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>
<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>
<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>
<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.

5 Comments

Join the conversation! Your thoughts help the community grow.

Marcel Eglseder8y ago
Can you send me the code with an email?
Rajnish Vishwakarma10y ago
Nice artcle .but there is one query as on google developers site it is suggested that the baseleine is mdpi as in the above example the image for the drawable-mdpi is 500*500 so for ldpi its should be 375*375 and for 750 in drawable-hdpi .so i m confused ..please clarify .waiting for ur replyy..
Mrugesh Patel12y ago
Nice article, It's help me lot to learn about multiple device with same screen. But i have one question... How to make reach graphical application in android? Is there any tool? Can you help me?
- Gilang Surahman11y ago
  you can try "Cut&Slice me" http://www.cutandslice.me/
Rano13y ago
Nice article. I want to know if we need each layout with landscape folder like normal-land , small-land etc.