Multiple Screen Support in Android using Android Studio

Introduction

 

This article explains how Android applications support multiple screens having various sizes and densities.

 

Make a simple application having an image and a text. If you now test this application on various devices, you will see that the text and the image appearing on various devices are not the same in terms of their size. In projects/applications where designing is important, multiple screen support is very important.

 

The Android system itself also provides scaling and resizing to make the Android application support multiple screen sizes and densities, to some extent. Still you should always try to provide such support yourself.

 

To support multiple screens you should:

1. Set support screens in the Manifest file

2. Provide various layouts for various screen sizes

3. Provide various bitmap drawables for various screen densities

 

Various screen size variants are: small, normal, large and xlarge.

 

Various screen density variants are: ldpi for low-density screens, mdpi for medium-density screens, hdpi for high-density screens, xhdpi for extra high-density screens and nodpi for all densities. tvdpi screens are somewhere between mdpi and hdpi; approximately 213dpi.

 

Step 1

 

Open "AndroidManifest" and add the following code to it:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.chhavi.supportmultiplescreens"
    android:versionCode="1"
    android:versionName="1.0" >

  <supports-screens android:smallScreens="true"
                    android:normalScreens="true"
                    android:largeScreens="true"
                    android:xlargeScreens="true"
                    android:anyDensity="true"
                    android:resizeable="true"/>
  <uses-sdk
      android:minSdkVersion="7"
      android:targetSdkVersion="16" />

  <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
    <activity
        android:name="com.chhavi.supportmultiplescreens.MainActivity"
        android:label="@string/app_name" >
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
  </application>
</manifest>

Step 2

 

Go to "res" -> "values" -> "dimens.xml". Apply the following changes to it:

<resources>
  <!-- Default screen margins, per the Android Design guidelines. -->
  <dimen name="activity_horizontal_margin">16dp</dimen>
  <dimen name="activity_vertical_margin">16dp</dimen>
  <dimen name="txt">30dp</dimen>
</resources>

Step 3

 

Open the "activity_main" layout file and add the following code to it:

<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:orientation="vertical">
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/hello_world"
      android:textSize="@dimen/txt"/>
  <ImageView
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:src="@drawable/image1"
      android:scaleType="fitCenter"/>
</LinearLayout>

Step 4

 

Add an image with the name "image1" in any "drawable".

 

Step 5

 

Now see the layout preview in various devices like Nexus4, Nexus7, Nexus10, 10.1" WXGA (tablet) and so on. You will see the image but the text does not appear the same in all these devices. To have more or less the same view we need to use the following procedure.

 

Step 6

 

Right-click on res then select "New" -> "Android Resource Directory". Give it the name "values-hdpi" and the type "values". Copy "dimens.xml" of "values" (in step 1) to the clipboard and paste it in "values-hdpi". Apply the following changes to it:

<resources>
  <!-- Default screen margins, per the Android Design guidelines. -->
  <dimen name="activity_horizontal_margin">16dp</dimen>
  <dimen name="activity_vertical_margin">16dp</dimen>
  <dimen name="txt">30dp</dimen>
</resources>

Step 7

 

Right-click on res then select "New" -> "Android Resource Directory". Give it the name "values-ldpi" and the type "values". Copy "dimens.xml" of "values" (in step 1) to the clipboard and paste it in "values-ldpi". Apply the following changes to it:

<resources>
  <!-- Default screen margins, per the Android Design guidelines. -->
  <dimen name="activity_horizontal_margin">16dp</dimen>
  <dimen name="activity_vertical_margin">16dp</dimen>
  <dimen name="txt">50dp</dimen>
</resources>

Step 8

 

Right-click on res then select "New" -> "Android Resource Directory". Give it the name "values-mdpi" and the type "values". Copy "dimens.xml" of "values" (in step 1) to the clipboard and paste it in "values-mdpi".

 

Change 30dp to 50dp

 

Step 9

 

Right-click on res then select "New" -> "Android Resource Directory". Give it the name "values-nodpi" and the type "values". Copy "dimens.xml" of "values" (in step 1) to the clipboard and paste it in "values-nodpi".

 

Change 30dp to 50dp

 

Step 10

 

Right-click on res then select "New" -> "Android Resource Directory". Give it the name "values-sw600dp" and the type "values". Copy "dimens.xml" of "values" (in step 1) to the clipboard and paste it in "values-sw600dp".

 

Change 30dp to 80dp

 

Step 11

 

Right-click on res then select "New" -> "Android Resource Directory". Give it the name "values-sw720dp" and the type "values". Copy "dimens.xml" of "values" (in step 1) to the clipboard and paste it in "values-sw720dp".

 

Change 30dp to 80dp.

 

Step 12

 

Right-click on res then select "New" -> "Android Resource Directory". Give it the name "values-xhdpi" and the type "values". Copy "dimens.xml" of "values" (in step 1) to the clipboard and paste it in "values-xhdpi".

 

Do not change 30dp.

 

Step 13

 

Right-click on res then select "New" -> "Android Resource Directory". Give it the name "layout-large" and the type "layout". Copy "activity_main" of "layout" (in step 3) to the clipboard and paste it in "layout-large".

 

Step 14

 

Similarly make "layout-normal", "layout-small", "layout-normal", "layout-sw600dp", ""layout-sw720dp", "layout-xlarge" and "layout-xlarge-land". Copy "activity_main" of "layout" (in step 3) to the clipboard and paste it in all these newly created layout folders.

 

Step 15

 

Now select an image you want to display. Resize it to 150*150. Name it "image1". Place this jpj in "drawable-hdpi".

 

Step 16

 

Use the same image and resize it to 200*200-> Name it as "image1"-> Place this jpj in "drawable-ldpi".

 

Step 17

 

Use the same image and resize it to 500*500-> Name it as "image1"-> Place this jpj in "drawable-mdpi".

 

Step 18

 

Use the same image and resize it to 500*500-> Name it as "image1"-> Place this jpj in "drawable-nodpi".

 

Step 19

 

Use the same image and resize it to 500*500-> Name it as "image1"-> Place this jpj in "drawable-xhdpi".

 

Step 20

 

Use the same image and resize it to 284*147-> Name it as "image1"-> Place this jpj in "drawable-xxdpi".

 

Step 21

 

Now try and view the layout in various devices, such as in the following.

 

In Nexus4

 

 

In 5.1" WWGA using "-mdpi":

 

 

In Galaxy Nexus:

 

 

In 2.7" QVGA using "-ldpi":

 

 

In 10.1" WXGA (Tablet) using "-mdpi":

 

 

You can check the view on other devices also. More or less you will get the same layout in all devices.