Same DPI but different inch size

Question

I know the Internet is overwhelmed with questions about DPI px inches and so on. But after several hours of googling my situation doesnt seem to happen to anyone else!

I have 2 devices custom build with android studio which are both mdpi. BUT one device is 3.65inch and the other device is an 10.1 inch.

I have created a folder with 2 images 250x125 with the dpi set to 160 dpi

If normally I would declare my 2 images in my XML with dp units instead of pixels...I would suppose on both screens the result should be the same right ?

Well it seems the images keep remaining the same size and don't look @ how many inch the device is

So to set things clear: What do I have to change at my resources or my code so that my layout scales identical for different Inch sizes ?

This is my GOOD layout for my mdpi 10.1 tablet :

This is my BAD layout for my mdpi 3.65 device

How can I make it so that even on the 3.65 inch screen the buttons will scale to the same PROPORTIONS as the 10.1. Not the inches...not the pixels...the proportions....

This is my XML File

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:gravity="center">

    <Button
        android:id="@+id/buttonEnglish"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/english"
        android:layout_marginBottom="5sp"
        android:layout_marginLeft="5sp"
        android:layout_marginRight="2sp"
        android:layout_marginTop="0sp" />
    <Button
        android:id="@+id/buttonNederlands"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/nederlands"
        android:layout_marginBottom="5sp"
        android:layout_marginLeft="20sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"
        />
</LinearLayout>

I'm desperate... Thanx in advance

See your button size attentively. These remain same size. But due to different screen size, small one is looking like button fills the most of the screen. Actually you need to design two xml layout. one for tablet and one for phone. — Amir
so for every possible size for a phone or tablet on the market i need to create a different xml file ? That's maddnes xo !! — Fosa
Your understanding of how UI should be layout in Android is incorrect - it makes absolutely no sense for buttons or other UI components to scale linearly with screen dimension. Please consult http://developer.android.com/guide/practices/screens_support.html and myriad of tutorial sites to learn more about it. — Kai

Jim Jim · Accepted Answer · 2015-11-08T07:06:48

This might help explain the problem you are facing...

You have an image that is 250x125 - that is 250 pixels wide by 125 pixels in height.

You have specified 160 dpi - which means that 1 inch = 160 pixels.

So, both screens are doing what you ask and displaying the 250 pixels across 1.5625 inches. On the large screen it looks "proportionally" correct. On the 3.65" screen the button takes up more than half the screen - just like you asked it to.

If you want the smaller screen to look like the larger screen, then you have three options:

adjust the size of the image and provide 2 image assets (or more for a wider variety of screens). This is why you can have resource folders for mdpi, hdpi, xhdpi, etc. You adjust the pixels in the image to accommodate the screen size.
You use a "weighted" LinearLayout that adjusts the size of the space provided based on the available screen space. For this type of layout you should not worry about performance.
Do runtime scaling of the image based on screen size - use DisplayMetrics to get the size and density of the screen and adjust your image to fit the screen appropriately.

The last option is the most flexible in many ways, because if you end up with a screen that is either very large or very small, you can make adjustments to do things like move buttons or text to another place on the screen (above or below other content). But for your specific problem, any of them will suffice.

Same DPI but different inch size

3 Answers