Supporting Multiple Screen sizes in Android device

Posted By : Ravi Sharma | 05-Sep-2013

android

Android runs on a variety of devices that offer different screen sizes and densities.

To support different screen sizes, orientation android provides very simple steps.

In order to run your app on different screen sizes without hampering the UI you have to make few folders in res folder.

In this blog I will work on normal , large screen sizes.

For normal screen size, here is the layout.


	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

	 xmlns:tools="http://schemas.android.com/tools"

	 android:layout_width="match_parent"

	 android:layout_height="match_parent"

	    android:paddingBottom="@dimen/activity_vertical_margin"

	    android:paddingLeft="@dimen/activity_horizontal_margin"

	    android:paddingRight="@dimen/activity_horizontal_margin"

	    android:paddingTop="@dimen/activity_vertical_margin"

	    tools:context=".LayoutActivity" >

	

	    <Button

	        android:id="@+id/button1"

	        android:layout_width="wrap_content"

	        android:layout_height="wrap_content"

	        android:layout_alignParentLeft="true"

	        android:layout_alignParentTop="true"

	        android:layout_marginLeft="20dp"

	        android:text="Button1" />

	

	    <Button

	        android:id="@+id/button2"

	        android:layout_width="wrap_content"

	        android:layout_height="wrap_content"

	        android:layout_alignBottom="@+id/button1"

	        android:layout_alignParentRight="true"

	        android:layout_marginRight="55dp"

	        android:text="Button2" />

	

	</RelativeLayout>

For large screen size make a folder named layout-large in res folder , paste above code and make changes accordingly. Here is layout for large screen size.



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".LayoutActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignParentRight="true"
        android:layout_marginRight="55dp"
       
        android:text="Button2" />
   
</RelativeLayout>

Also you can support both landscape, portrait orientations. Here is code for landscape mode (normal size) Make folder layout-land in res folder


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".LayoutActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="15dp"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
      
        android:layout_marginTop="75dp"
        android:text="Button2" />
   
</RelativeLayout>

For landscape mode in large screen size, make folder layout-large-land in res folder.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".LayoutActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="15dp"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="75dp"
        android:text="Button2" />

</RelativeLayout>

Here is the ouput of all four screens.