Android Multiple Screen Sizes with Same Density

Android multiple screen sizes with same density

There are three distinct but linked concepts to understand here: screen density (pixels per inch/centimeter, or commonly known as DPI from dots per inch in printers), physical screen size (in inches or centimeters) and number of pixels (also known as resolution, in pixels).

These terms are not interchangeable, and you need to understand how they interlink to not be confused with the issue. Generally, you can ignore physical screen size since that's already accounted for in the density. For example a screen 3 inches wide and 300 pixels across will have a DPI of 100. Furthermore phones screens tend to have about the same physical size, even if the number of pixels is very different.

So, let's consider the screen of a G1 or Hero which has a resolution 480x320 and a density of approx 160dpi. An image 300 pixels wide will be 1.875 inches across. This is calculated by pixel size (300) / density (160). Now if you compare this to the screen of the Nexus One, Droid or similar, these models have a higher resolution screen of approx 800x480 with a high density of approx 240dpi. If you display the same 300px wide image, it will now only physically be displayed at about one and a quarter inches across. In other words, it will be much smaller. This can be a problem because if the image contains text, then the text might not be readable anymore.

Android can be told to automatically scale images to fit these different screens so that it still looks to be the same size. This is done by setting sizes in Density Independent pixels. If something is 100dp wide, it will be 100px wide on a medium density screen. On a high density screen, it will be 150px wide, but they will both look about the same size on the actual screen. However, if you do this, your image can go a bit blurry. It's the same as when you zoom into a photo too closely in a picture viewing program; the edges go blurry since it 'stretches' them while you zoom.

The way to solve this is to use the mdpi, hdpi and so forth folders. You're giving Android an image that has already been scaled, so that it doesn't have to do it itself. Obviously if you just stretch the image yourself in Photoshop, then it won't look any better. But normally one is resizing very large images down to make them fit the mobile screen. In that case, you just resize them three different times, each into a different resolution.

So to finally answer your specific question: if you have an image placed in your mdpi folder, it will be exactly the same size regardless of the screen resolution, as long as they are all the same density. What will change is how much space around them, e.g. a 320x320px wide image would fill most of a 320x480 screen, but only about a third of a 480x800 screen. However, as noted above, generally the higher resolution phones also have a more dense screen. In that case, Android won't look in your mdpi folder for the image - it will go to the hdpi folder, and if it can't find it there, it will take the default "drawable" folder. Then if you've used DP it will automatically scale it, or if you've used PX, it will leave it as is, and it will just look smaller.

There! A very long answer for you. I hope it makes sense.

Two screens, same size with different density

I think the fact that emulators are being used is causing a bit of confusion here.

Specifying dp units as you have done here, should mean that the image is roughly the same physical size on different devices. In your question you have said that we are comparing two screens of almost the same size, but that is not the case!

Given the resolutions you have stated in the question, we are actually looking at (approximately) a 9 inch tablet on the left and a 4.5 inch phone on the right. As these are virtual devices and can be resized on screen they can be made to appear the same size but they represent very different things in reality.

On the left we can see from the status bar and system buttons that this indeed looks like a tablet, and I've used the icons in the status bar as a rough measure of scale here:

This backs up the expectation that if you actually had a tablet and phone in front of you(or if the emulators were in correct proportion), the image would be the same physical size on both.

Edit-additional detail in response to the comments on this answer:

The purpose of describing sizes in dp is that they will be the same physical size on devices with different pixel densities. This is what you've done above. If the element is, for example, 2 inches on each side, then it will be 2 inches on a high-res or low-res phone, and it will be 2 inches on a high-res or low-res tablet.

If what you want is not for the element to be the same actual size, but to always be the same proportion of the screen(like always 90% the width of the screen say) then there are a few types of layout you might choose from.

LinearLayout uses the concept of Weight to allocate different proportions of the space.

The support library includes PercentRelativeLayout and PercentFrameLayout which work like the regular layouts but allow you to specify sizes using percentages.

The new ConstraintLayout is currently only available in Android Studio 2.2 Preview edition. I have not yet used it myself, but it seems as though it includes it's own proportion and percentage based concepts which would enable this also.

Android - How does dp occupy different space in devices with different sizes?

Android defines a baseline dpi of 160 which is used as the reference to compute sizes for all screen densities:

pixel_size * (device_dpi / baseline_dpi) = result in "dp" units

>> or the other way around 

dp_size / (device_dpi / baseline_dpi) = result in "pixel" units

Therefore, 1 pixel in a 240dpi device is equivalent to 1.5dp units:

1 * (240 / 160) = 1.5

and the other way around, 1.5dp units in a 240dpi device is equivalent to 1 pixel

1.5 / (240 / 160) = 1

The important fact to know is that 160 is the baseline used as the reference for all DPIs.
So, as dp units increase/decrease, the required pixels area to draw something translates into keeping the same size scale regardless of the device screen.

More information in the official documentation.

To be more clear:

The display size is not related to "dp units". The display size is just how big the display canvas is. The screen DPI defines how many dots fit in 1 square inch. And a "dp unit" is an abstract unit that, depending on the device's DPI, is scaled (up or down) to give "uniform dimensions" on any screen size, by using 160 as the baseline reference.

Android Different Screen Size and Density

As we all know, different phones have different screens. Almost all android phones are in a 16 by 9 ratio. (Except for the wonderfull s8 ... ).

Now I used to run into problems regarding the design but I found a way to make the design look 100 % the same on every 16:9 and even 21.5:9 screens.

What I basically do is design in photoshop on an xxxhdpi canvas:

2560 x 1440 with 577 in density.

I render my buttons and use a batch converter to convert each button (drawable) into 5 different sizes:

xxxhdpi = 100 % ( the size of the original )
xxhdpi = 75 %
xhdpi = 50 %
hdpi = 37.5 %
mdpi = 25 %.

I then put up 5 different folders in my android project, named:

"drawable-xxxhdpi"
"drawable-xxhdpi"
"drawable-xhdpi"
"drawable-hdpi"
"drawable-mdpi"

I insert my drawables in the correct folders and start the design.

I try to always use a linearlayout and then use android:layout_weights to determine the position on the screen.

Weights work like percents, so saying I put up two linear layouts into my root layout, both weighing in at exactly 50 . they fill up exactly half the screen on every device.

This works very well for all devices as long as you can use a linearlayout.

If I need to use a framelayout I then go into the code of my class and init every element that cannot have weights. Especially when it comes down to padding:

I put up a new linearlayout.layoutparams for the elemens in questions in for witdh and height go "resources.dimensions.displaymetrics.height / width pixels and divide those with a hardcoded number.

Since the display metrics correspond the actual phone, the division will end in percentages, even when frame layouts are used. Same goes for margins or padding.

The result is flawless. No matter what phone is used, when it is 16:9 ratio, the design will ALWAYS look the same. Even in Scrollviews, Relative-Layouts and so one.

For phones with a different aspect ratio I set the ratio by dividing hightpixels / widthpixels which makes the design work just as well on those screens.

The result ends in much work but perfect design. I refuse to use "dpi" in my axmls, since they do work but will not ALWAYS look the same on each phone.

I hope this wil be an answer for you.
In Short:
Design in photoshop, render one button, batchconvert it, put up on xml and youre good.

---

Related Topics