Different layouts for different screen sizes in Android

June 29, 2012
By

Android ( Version less than 3.2 or API Level less than 13 )  classifies the screen sizes into four different groups such as small, normal, large and extra large. The resolutions of small, normal, large and extra large are at least 426 x 320 , 470 x 320 ,  640 x 480 and 960 x 720 respectively where all the resolution values are measured in the unit “dp”. The layout file for the small screen devices are stored in the folder res/layout-small. Similarly layout folders for normal, large and extra large screens are stored in res/layout-normal, res/layout-large and res/layout-extra respectively.

Beginning from Android version 3.2( API Level 13), there is no such thing as size grouping. That is size grouping is deprecated from Android version 3.2 onwards. From Android 3.2 onwards, the smallest width required for a layout file is specified. This is done by specifying directory name as “layout-sw<N>dp” where <N> is the smallest width of the screen in the unit dp.

If a screen size specific layout file is not found, then the layout files found in the folder res/layout will be used for rendering the activities.

In this article, we will create an application which will make use different layout files to render MainActivity in different devices of different screen sizes.


1. Create an Android project namely DifferentLayoutDemo

New Android Project

Figure 1: New Android Project


2. Select Android build target

Select Android Build Target

Figure 2: Select Android Build Target


3. Enter application details

Enter Application Details

Figure 3: Enter Application Details


4. res/values/strings.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">DifferentLayoutDemo</string>
    <string name="small_screen_size">Small Screen Size Layout</string>
    <string name="normal_screen_size">Normal Screen Size Layout</string>
    <string name="large_screen_size">Large Screen Size Layout</string>
    <string name="xlarge_screen_size">Extra Large Screen Size Layout</string>
    <string name="main_layout">Main Layout</string>
    <string name="sw320">The smallest width of the screen is greater than or equal to 320dp</string>
    <string name="sw480">The smallest width of the screen is greater than or equal to 480dp</string>

</resources>


5. Create folders namely as given below :

  • res/layout-small : Devices with screens having at least a resolution of 426dp x 320dp will make use the layouts defined in this folder
  • res/layout-normal : Devices with screens having at least a resolution of 470dp x 320dp will make use the layouts defined in this folder
  • res/layout-large : Devices with screens having at least a resolution of 640dp x 480dp will make use the layouts defined in this folder
  • res/layout-xlarge : Devices with screens having at least a resolution of 960dp x 720dp will make use the layouts defined in this folder
  • res/layout-sw320dp : Devices with a smallest screen width which is greater than 320dp will make use the layouts defined in this folder
  • res/layout-sw480dp: Devices with a smallest screen width which is greater than 480dp will make use the layouts defined in this folder

6. res/layout-small/main.xml


<?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="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/small_screen_size"
        android:textSize="20dp"
    />

    <TextView
        android:id="@+id/tv_screen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/small_screen_size"
        android:textSize="14dp"
    />

</LinearLayout>

  • Devices with screens having at least a resolution of 426dp x 320dp will make use this layout

7. res/layout-normal/main.xml


<?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="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/normal_screen_size"
        android:textSize="20dp"

    />

    <TextView
        android:id="@+id/tv_screen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="14dp"
    />

</LinearLayout>

  • Devices with screens having at least a resolution of 470dp x 320dp will make use this layout

8. res/layout-large/main.xml


<?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="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/large_screen_size"
        android:textSize="20dp"

    />

    <TextView
        android:id="@+id/tv_screen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="14dp"
    />

</LinearLayout>

  • Devices with screens having at least a resolution of 640dp x 480dp will make use this layout

9. res/layout-xlarge/main.xml


<?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="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/xlarge_screen_size"
        android:textSize="20dp"
    />

    <TextView
        android:id="@+id/tv_screen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/xlarge_screen_size"
        android:textSize="14dp"
    />

</LinearLayout>

  • Devices with screens having at least a resolution of 960dp x 720dp will make use this layout

10 res/layout/main.xml


<?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="vertical" >

 <TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="@string/main_layout" />

 <TextView
 android:id="@+id/tv_screen"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:textSize="14dp"
/>

</LinearLayout>

  • If a screen size specific layout file is not found, then this layout file will be used

11. res/layout-sw320dp 
<?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="vertical"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/sw320"
    />
    <TextView
        android:id="@+id/tv_screen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="14dp"
    />
</LinearLayout>
  • Devices with smallest screen width which is greater than 320dp will make use this layout

12. res/layout-sw480dp
<?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="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/sw480" />

    <TextView
        android:id="@+id/tv_screen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="14dp"
    />

</LinearLayout>

  • Devices with smallest screen width which is greater than 480dp will make use this layout

13. src/in/wptrafficanalyzer/differentlayout/MainActivity.java
package in.wptrafficanalyzer.differentlayout;

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.widget.TextView;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        DisplayMetrics metrics = new DisplayMetrics();

        getWindowManager().getDefaultDisplay().getMetrics(metrics);

        /** Converting Screen resolution in pixels into dp */
        float dp_w = ( metrics.widthPixels * 160 ) / metrics.xdpi;

        /** Converting Screen resolution in pixels into dp */
        float dp_h = ( metrics.heightPixels * 160 ) / metrics.ydpi;

        /** Getting reference to TextView object of the main layout */
        TextView tvScreen  = (TextView) findViewById(R.id.tv_screen);

        /** Displaying Screen resolution in dp **/
        tvScreen.setText(Float.toString((int)dp_w) + "dp x " + Float.toString((int)dp_h) + "dp");
    }
}

14. Application in execution

Application in execution

Figure 4 : Application in execution


15. Download


16. Reference

http://developer.android.com/guide/index.html


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , , ,

5 Responses to Different layouts for different screen sizes in Android

  1. Gene Lim on June 21, 2013 at 7:25 am

    Hi, I have tried the code. It works well, Thanks!
    But I have one problem, it actually works well on the emulator. When I used a real physical phone, no matter how big or how small is the size of the phone, it will only detect the normal layout instead of choosing layout-small/layout-xlarge/layout-large.
    I hope to get a respond about this thanks again!

  2. Agoeng on February 8, 2014 at 12:42 pm

    Hii George, about above layout, I can practice it well. How about we can adjust height of textview or edittext based on different screen size ?

  3. dave on February 22, 2014 at 11:12 pm

    don’t you need to use the tag?

    • dave on February 22, 2014 at 11:13 pm

      *support-screens tag

  4. Hemnath Lakshmanan on March 11, 2014 at 5:14 pm

    Hello sir,
    It works…great.Have any other way to do like this

Leave a Reply to dave Cancel reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner