Different layouts for different screen sizes in Android

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

Figure 1: New Android Project

2. Select Android build target

Figure 2: Select Android Build Target

3. 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
 
Figure 4 : Application in execution
15. Download
Different layouts for different screen size 158.26 KB
Download Source Code
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: DisplayMetrics, layout, resolution, screen, screen size