CODEWITHSUNDEEP
androidandroid-layoutresolutiondpimdpi
Fosa
Fosa

Reputation: 457

Same DPI but different inch size

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 : enter image description here

This is my BAD layout for my mdpi 3.65 device enter image description here

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

Upvotes: 4

Views: 2767

Answers (3)

Fosa
Fosa

Reputation: 457

Thanx everyone for the answers. Due to answer from @Iacs I discovered that I had to made changes to my folder structure.

I have completely overlooked the fact that in the /res folder there can be more directories then just the standard "layout" directory. You can create other directories with these names : layout-large, layout-xlarge, layout-small, and so on... In these folders you can paste your layout.xml and adjust the values...

This is how things look now in my android studio note the layout folder structure: enter image description here

And now ofcourse my 2 devices with both the same DPI but different screen size are showing my buttons the way I want them to be showned!

Upvotes: 0

Vishal Bhadani
Vishal Bhadani

Reputation: 131

There is no need of Designing two xml layout.

You can use Dimension for margin and padding according to device.

You are giving static value for margin.

Use dimen.xml in value folder each device.

Following code in your layout.xml will work for you.

android:layout_marginLeft="@dimen/margin_button"

Value folder name for dimen.xml:

values-mdpi
values-hdpi
values-xhdpi
values-xxhdpi
values-sw600dp

create dimen.xml in each values folder.

and in dimen.xml you have to define value for margin in all values folder but value of that property is different according to device size like this:

values-mdpi

<dimen name="margin_button">20dp</dimen>

values-hdpi

<dimen name="margin_button">23dp</dimen>

like wise in all values folders.

Upvotes: 3

Jim
Jim

Reputation: 10278

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:

  1. 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.

  2. 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.

  3. 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.

Upvotes: 3

Related Questions