Multiple Screen Support in Android using Android Studio

Chhavi Goel
Jul 09, 2013
132.7k
0
5
Article

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>

</intent-filter>

</activity>

</application>

</manifest>

Step 2:

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

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

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>

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