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:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     package="com.chhavi.supportmultiplescreens"  
  4.     android:versionCode="1"  
  5.     android:versionName="1.0" >  
  6.    
  7.   <supports-screens android:smallScreens="true"  
  8.                     android:normalScreens="true"  
  9.                     android:largeScreens="true"  
  10.                     android:xlargeScreens="true"  
  11.                     android:anyDensity="true"  
  12.                     android:resizeable="true"/>  
  13.   <uses-sdk  
  14.       android:minSdkVersion="7"  
  15.       android:targetSdkVersion="16" />  
  16.    
  17.   <application  
  18.       android:allowBackup="true"  
  19.       android:icon="@drawable/ic_launcher"  
  20.       android:label="@string/app_name"  
  21.       android:theme="@style/AppTheme" >  
  22.     <activity  
  23.         android:name="com.chhavi.supportmultiplescreens.MainActivity"  
  24.         android:label="@string/app_name" >  
  25.       <intent-filter>  
  26.         <action android:name="android.intent.action.MAIN" />  
  27.    
  28.         <category android:name="android.intent.category.LAUNCHER" />  
  29.       </intent-filter>  
  30.     </activity>  
  31.   </application>  
  32. </manifest> 
Step 2
 
Go to "res" -> "values" -> "dimens.xml". Apply the following changes to it:
  1. <resources>  
  2.   <!-- Default screen margins, per the Android Design guidelines. -->  
  3.   <dimen name="activity_horizontal_margin">16dp</dimen>  
  4.   <dimen name="activity_vertical_margin">16dp</dimen>  
  5.   <dimen name="txt">30dp</dimen>  
  6. </resources> 
Step 3
 
Open the "activity_main" layout file and add the following code to it:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  6.     android:paddingRight="@dimen/activity_horizontal_margin"  
  7.     android:paddingTop="@dimen/activity_vertical_margin"  
  8.     android:paddingBottom="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity"  
  10.     android:orientation="vertical">  
  11.   <TextView  
  12.       android:layout_width="wrap_content"  
  13.       android:layout_height="wrap_content"  
  14.       android:text="@string/hello_world"  
  15.       android:textSize="@dimen/txt"/>  
  16.   <ImageView  
  17.       android:layout_width="fill_parent"  
  18.       android:layout_height="fill_parent"  
  19.       android:src="@drawable/image1"  
  20.       android:scaleType="fitCenter"/>  
  21. </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:
  1. <resources>  
  2.   <!-- Default screen margins, per the Android Design guidelines. -->  
  3.   <dimen name="activity_horizontal_margin">16dp</dimen>  
  4.   <dimen name="activity_vertical_margin">16dp</dimen>  
  5.   <dimen name="txt">30dp</dimen>  
  6. </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:
  1. <resources>  
  2.   <!-- Default screen margins, per the Android Design guidelines. -->  
  3.   <dimen name="activity_horizontal_margin">16dp</dimen>  
  4.   <dimen name="activity_vertical_margin">16dp</dimen>  
  5.   <dimen name="txt">50dp</dimen>  
  6. </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
 
im1.jpg
 
In 5.1" WWGA using "-mdpi":
 
im2.jpg
 
In Galaxy Nexus:
 
im3.jpg
 
In 2.7" QVGA using "-ldpi":
 
im4.jpg
 
In 10.1" WXGA (Tablet) using "-mdpi":
 
im5.jpg
 
You can check the view on other devices also. More or less you will get the same layout in all devices.