Layout issue on multiple devices

Question

As we know we can create a single layout for all type of devices by using size in dp. i have created a xml with dp but it is displaying different on every other device like 7' , 10' tab, 5.4, 5.1 3.7 etc.

i have placed file in "layout" folder and now to support all these device i have to create different layout folder for all devices and it is tough to maintain, even i have created a hdpi,xhdpi etc as well but still lots of layout is need to create. please find below xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
  android:id="@+id/ans4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_orange"
tools:context="com.kids.kidsmath.MainActivity"
tools:ignore="MergeRootFrame" >

<Button
    android:id="@+id/mathCalculation"
    android:layout_width="250dp"
    android:layout_height="40dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="104dp"
    android:background="@drawable/curve_shape"
    android:onClick="openMa"
    android:text="Play "
    android:textColor="#000000"
    android:textSize="20sp"
    android:textStyle="bold"
    android:typeface="sans" />

<Button
    android:id="@+id/learnCounting"
    android:layout_width="250dp"
    android:layout_height="40dp"
    android:layout_alignLeft="@+id/mathCalculation"
    android:layout_alignRight="@+id/mathCalculation"
    android:layout_below="@+id/mathCalculation"
    android:layout_marginTop="46dp"
    android:background="@drawable/curve_shape"
    android:onClick="openL"
    android:text="Lg"
    android:textColor="#000000"
    android:textSize="20sp"
    android:textStyle="bold"
    android:typeface="sans" />

<Button
    android:id="@+id/greatersmaller"
    android:layout_width="250dp"
    android:layout_height="40dp"
    android:layout_alignLeft="@+id/learnCounting"
    android:layout_alignRight="@+id/learnCounting"
    android:layout_below="@+id/learnCounting"
    android:layout_marginTop="40dp"
    android:background="@drawable/curve_shape"
    android:onClick="openS"
    android:text="Gr"
    android:textColor="#000000"
    android:textSize="20sp"
    android:textStyle="bold"
    android:typeface="sans" />


</RelativeLayout>

please help me if i m doing wrong in this xml. also do we need to define different xml for all?

Answer 1

I guess there's a little misunderstanding what density-independent-pixel really means. So I'll try to explain it in a somewhat unconventional way:

Let's take one of your buttons, for example. You defined android:layout_width="250dp". So your button will have the same width on every 5" device, no matter what's the resolution. It won't be the same width on a 7" or 10" in relation to the actually available width. To make things a little bit clearer here are the dp-resolutions of the Nexus 5, 7 and 10 compared to the px-resolutions.

Nexus 5   1920x1080px   640x360dp
Nexus 7   1920x1200px   960x600dp
Nexus 10  2560x1600px   1280x800dp

Note: As you can see the resolution of the N5 and N7 is almost identical though the height in dp is still alot different. (640dp vs 960dp) That's because of the density difference (xxhdpi vs xhdpi).

So what can you do to optimize the layout for a broad range of devices? Well, as you already said, a layout-folder for all devices is tough to maintain especially if you want to change something in the layout later on. That's why you should use dimension files. (Link)

I'll try to explain it with the textSize. So let's say we defined the textSize to be 18sp. This is fairly large on a smartphone. On a 7" tablet it's still ok but on a 10" tablet it's pretty small. So instead of creating a layout-file for all three devices we define a dimension reference. First of all you need to create a dimens.xml in your values-folder and define the dimension afterwards, for example:

<dimen name="my_text_size">18sp</dimen>

In your layout-file you reference the size-value like this:

android:textSize="@dimension/my_text_size"

In order to adapt the textSize for different devices you create a values-sw600dp (used by the Nexus 7) and a values-sw720dp (used by the Nexus 10) folder. Then you copy the dimens.xml to both folders and change the value to e.g. 22sp (@sw600dp) and 26sp (@720dp). Now you're layout is kinda optimized for smartphones and tablets without creating multiple layout-files.

Note: You'll only need multiple layout files if you want to rearrange your views

The following android-developer pages should also be helpful: Supporting multiple screens and Designing for multiple screens