Layout query for different devices

Question

I was designing a Native app in the Android. I have few query in which i am not very clear:

1. Do we really need to define layout xml for all type of device (xhdpi, mdpi, hdpi etc)if want to give support to all size of devices or only one layout can work in all size of devices?

2. I am creating few buttons in my app which will be place in center bottom and top of the devices. I have used Relative and linear layout for this and dp for width of the button and layout. but it is not showing similar in every device, do i need to do redesign the app for all type of devices?

           <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
               xmlns:tools="http://schemas.android.com/tools"
               android:id="@+id/Container"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               tools:ignore="MergeRootFrame" >
   
               <LinearLayout
                   android:id="@+id/linearLayout1"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:layout_alignParentLeft="true"
                   android:layout_alignParentRight="true"
                   android:orientation="vertical" >
   
                   <RelativeLayout
                       android:layout_width="match_parent"
                       android:layout_height="118dip" >
                   </RelativeLayout>
               </LinearLayout>
   
               <LinearLayout
                   android:id="@+id/linearLayout2"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:layout_alignParentLeft="true"
                   android:layout_below="@+id/linearLayout1"
                   android:background="@drawable/blackboard"
                   android:orientation="vertical" >
   
                   <RelativeLayout
                       android:layout_width="wrap_content"
                       android:layout_height="346dp" >
   
                       <View
                           android:id="@+id/view2"
                           android:layout_width="180dip"
                           android:layout_height="3dip"
                           android:layout_alignRight="@+id/result"
                           android:layout_below="@+id/second"
                           android:layout_marginTop="22dip"
                           android:background="#0000ff" />
   
                       <Button
                           android:id="@+id/second"
                           android:layout_width="150dip"
                           android:layout_height="50dip"
                           android:layout_alignLeft="@+id/first"
                           android:layout_centerVertical="true"
                           android:background="@drawable/curve_shape"
                           android:text="2"
                           android:textSize="30sp" />
   
                       <Button
                           android:id="@+id/first"
                           android:layout_width="150dip"
                           android:layout_height="50dip"
                           android:layout_above="@+id/second"
                           android:layout_alignParentRight="true"
                           android:layout_marginBottom="56dip"
                           android:layout_marginRight="190dip"
                           android:background="@drawable/curve_shape"
                           android:text="1"
                           android:textSize="30sp" />
   
                       <Button
                           android:id="@+id/result"
                           android:layout_width="150dip"
                           android:layout_height="50dip"
                           android:layout_alignLeft="@+id/second"
                           android:layout_below="@+id/view2"
                           android:layout_marginTop="27dp"
                           android:background="@drawable/curve_shape"
                           android:text="res" />
                   </RelativeLayout>
               </LinearLayout>
   
               <Button
                   android:id="@+id/ansBtn3"
                   android:layout_width="114dp"
                   android:layout_height="wrap_content"
                   android:layout_alignLeft="@+id/ansBtn2"
                   android:layout_alignRight="@+id/ansBtn2"
                   android:layout_below="@+id/linearLayout2"
                   android:layout_marginTop="58dp"
                   android:onClick="checkResult"
                   android:text="2345" />
   
               <Button
                   android:id="@+id/ansBtn1"
                   android:layout_width="180dip"
                   android:layout_height="wrap_content"
                   android:layout_alignLeft="@+id/ansBtn4"
                   android:layout_below="@+id/ansBtn4"
                   android:layout_marginTop="39dp"
                   android:onClick="checkResult"
                   android:text="2345" />
   
               <Button
                   android:id="@+id/ansBtn2"
                   android:layout_width="180dip"
                   android:layout_height="wrap_content"
                   android:layout_alignBaseline="@+id/ansBtn1"
                   android:layout_alignBottom="@+id/ansBtn1"
                   android:layout_alignParentLeft="true"
                   android:layout_marginLeft="31dp"
                   android:onClick="checkResult"
                   android:text="2345" />
   
               <Button
                   android:id="@+id/ansBtn4"
                   android:layout_width="118dp"
                   android:layout_height="wrap_content"
                   android:layout_alignBaseline="@+id/ansBtn3"
                   android:layout_alignBottom="@+id/ansBtn3"
                   android:layout_marginLeft="68dp"
                   android:layout_toRightOf="@+id/ansBtn3"
                   android:onClick="checkResult"
                   android:text="2345" />
   
           </RelativeLayout>
   

   

Answer 1

1. xhdpi and hdpi, etc are not actually defining the screen size. They are identifiers for screen densities (read more) You can jusy have one layout for all of them. However, it is better that you have images for all those densities to keep the quality of your UI consistent across all those devices

2. Something like this:

   <LinearLayout
       android:id="@+id/linearLayout2"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:background="@drawable/blackboard"
       android:gravity="center"
       android:orientation="vertical" >
   
       <Button
           android:id="@+id/first"
           android:layout_width="150dip"
           android:layout_height="50dip"
           android:layout_marginBottom="56dip"
           android:background="@drawable/curve_shape"
           android:text="1"
           android:textSize="30sp" />
   
           <Button
               android:id="@+id/second"
               android:layout_width="150dip"
               android:layout_height="50dip"
               android:background="@drawable/curve_shape"
               android:text="2"
               android:textSize="30sp" />
   
           <View
               android:id="@+id/view2"
               android:layout_width="180dip"
               android:layout_height="3dip"
               android:layout_marginTop="22dip"
               android:background="#0000ff" />
   
           <Button
               android:id="@+id/result"
               android:layout_width="150dip"
               android:layout_height="50dip"
               android:layout_marginTop="27dp"
               android:background="@drawable/curve_shape"
               android:text="res" />
   </LinearLayout>
   
   <Button
       android:id="@+id/ansBtn3"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_alignLeft="@+id/ansBtn2"
       android:layout_alignRight="@+id/ansBtn2"
       android:layout_marginBottom="20dp"
       android:layout_above="@+id/ansBtn1"
       android:onClick="checkResult"
       android:text="2345" />
   
   <Button
       android:id="@+id/ansBtn1"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_alignLeft="@+id/ansBtn4"
       android:layout_alignParentBottom="true"
       android:layout_marginBottom="20dp"
       android:onClick="checkResult"
       android:text="2345" />
   
   <Button
       android:id="@+id/ansBtn2"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_alignBaseline="@+id/ansBtn1"
       android:layout_alignBottom="@+id/ansBtn1"
       android:layout_alignParentLeft="true"
       android:onClick="checkResult"
       android:text="2345" />
   
   <Button
       android:id="@+id/ansBtn4"
       android:layout_width="100dp"
       android:layout_height="wrap_content"
       android:layout_alignBaseline="@+id/ansBtn3"
       android:layout_alignBottom="@+id/ansBtn3"
       android:layout_alignParentRight="true"
       android:onClick="checkResult"
       android:text="2345" />
   

Your layout will look slightly different on various screen sizes because it is not logical to have a different design for each screen size and screen density (It is possible). I would suggest that you haave a read through Supporting Multiple Screens. It clearly explains how you have to this (It is quite long but it is worth reading)

Answer 2

1. With one layout should do. You use different layouts for other purposes, such as adding features that are available just from a certain API, having a different layout if is in portrait or landscape mode, etc.

2. Without seeing the code is hard to tell. Theoretically, it should look similar, yes. From my experience, the Android version has a bigger impact on such things than the size of the device.