Home/ Questions/Q 6786387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:14:20+00:00

Short Question I have a 50dip by 40dip button in my Android XML layout.

  • 0

Short Question

I have a 50dip by 40dip button in my Android XML layout. What are the pixel dimensions of the drawable that I need to place in my mdpi resource folder?

Long Question

Let’s say I have a 50dip x 40dip button.

<Button
    android:layout_width="50dip"
    android:layout_height="40dip"
    android:background="@drawable/someImage" />

I am satisfied with the physical size of this button on my phone. My question is when I’m designing someImage.png in Photoshop, how do I decide on the pixel dimensions of the image? Currently, I’m just making it a gigantic 500px by 400px image and placing it in the the default drawable resource folder because it’s working okay across all the phones and tablets I’ve tested on.

The reference page on supporting multiple screens does not tell me how to decide the
pixel dimensions.

Problem #1 – Baseline graphic

enter image description here

This diagram only tells me the relative dimensions of the graphics I need to put into each drawable resource folder. However, it does not tell me the pixel dimension I need to make my baseline mdpi graphic, from which all other graphics are relative to.

Problem #2 – screen density fragmentation

The density-independent pixel is equivalent to one physical pixel on a
160 dpi screen, which is the baseline density assumed by the system
for a "medium" density screen. At runtime, the system transparently
handles any scaling of the dp units, as necessary, based on the actual
density of the screen in use. The conversion of dp units to screen
pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi
screen, 1 dp equals 1.5 physical pixels. You should always use dp
units when defining your application’s UI, to ensure proper display of
your UI on screens with different densities.

This little tidbit tells me that a 50dip wide graphic on a 160dpi screen will appear to be 50px wide. So great, you say. I should make my mdpi graphic (160dpi falls under mdpi) 50px wide in Photoshop. Well, it’s not that simple, because not all mdpi phones are 160dpi. What if my mother’s mdpi phone is 167dpi? Then my 50dip wide graphic would appear as 52.1875px on her phone, which would likely cause some weird blurring artifacts. So what am I supposed to do? Should I model my baseline mdpi off of my mother’s 167dpi phone or should I model it off of the perfect laboratory 160dpi phone which maybe doesn’t even exist in the real world?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When it comes to problem #2…

    Should I model my baseline mdpi off of my mother’s 167dpi phone or should I model it off of the perfect laboratory 160dpi phone which maybe doesn’t even exist in the real world?

    You should model it aiming at the perfect laboratory 160dpi phone. This is pretty much what that article is trying to tell us. My reasoning is that ldpi, mdpi etc are ‘generalised’ densities and it is the responsibility of the Android OS’s graphics engine to correctly compensate for actual dpi of any given device. There really isn’t any other way of doing it other than forcing device manufacturers to use authorised screen components (which isn’t going to happen).

    As for problem #1, I would look at the width:height ratio of your button and pick actual pixel dimensions based on that but larger than the ‘model’ 50 x 40 px. The W:H ratio is 5:4 so I’d go for a width divisible by 5 but larger than 50 perhaps 60 which is conveniently divisible by 5 and 4. This would mean creating your button image as 60 x 48 px both of which when multiplied by 0.75 for ldpi purposes give exect values (45 x 36 px).

    • 0