Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I see this is probably a noob question, but it truly confuses me.

I'm reading documents from the Google Material Design, along with some of its implementations in css. The specification is written in Android's dp, while css codes uses px as a length unit.

What confuses me is that the css implementations often uses the exact value from specification, for example, a toast should have:

Single-line snackbar height: 48 dp tall

Minimum width: 288 dp

2 dp rounded corner

corresponding CSS:

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

In my current understanding, an Android DP is generally displayed at the size of one pixel on a 160dpi screen, while the CSS px is defined as a visual angle. So does a px happens to be the same as a dp when seeing in some distance? If so, is that a common pattern to use px as dp in css, or did I completely misunderstand the CSS code?

I know nothing about Android development before, and not a designer. Thanks for any help.

share|improve this question
2  
I think what you need is media queries based on device resolution i.e. css-tricks.com/snippets/css/retina-display-media-query and then depending on the DPI of the device, you should scale your original pixel values by the ratio for each resolution. You could also opt for using em/rems everywhere and then just scale the base font size for each resolution. –  DumbNic Jul 27 at 15:24

2 Answers 2

up vote 4 down vote accepted

I believe the full answer to your question can be found here:

http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android

To convert dp to px you need to take account of the display dimensions you are addressing to. The greater the DPI, the more pixels you'll have to cram in the same area to make it look good and to avoid pixelation:

ldpi: 1 dp = 0.75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1.5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

E.g:

A 3x3 dp square in CSS or Photoshop needs to be:

2.25x2.25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (this resolutin will be used on next generation devices)

Based on the above, your calculatins should look like this, using a 3x dp multiplier for XXHDPI screens:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android automatically scales down images if it finds that the used device resolution is lower, so you are safe to develop with XXHDPI in mind, as it addresses the majority of today's high-end devices on the market.

Here is a simple converter to do the job for you: http://androidpixels.net/

share|improve this answer
    
But isn't a px in android different from a px in css? –  Pinyin Jul 29 at 4:13
    
A pixel means the same thing no matter the software or screen used. It may look like a larger or smaller dot on different devices, but that's because those screens may have more or less pixels crammed in the same space (this term is called PPI - pixel per inch). I recommend reading Mr E. Upvoter answer, it will help you predefine densities in CSS and make your job easier. –  Mathieu Jul 29 at 9:02
    
Thanks, I'll try the media queries. –  Pinyin Jul 29 at 9:37

This website explains Android's units the best! Hope it helps. http://blog.edwinevans.me/?p=131

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

    
Hi digitalhomeboy, could you please explain a bit more what we'll find behind the link you provide and why it answers the question? That way, your answer is still of value in case the link breaks at a later time. Link rot is the main reason we really dislike link-only answers here. Thanks for your effort and keep contributing! –  Vincent Nov 6 at 13:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.