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
New Android Project
Figure 1: New Android Project
2. Select Android build target

3. Enter application details


4. res/values/strings.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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 








1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



16



17



18



19



20





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








1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



16



17



18



19



20



21





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








1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



16



17



18



19



20



21



22



23



24



25



26



27



28



29



30



31





package com.sample.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

Comments

Post a Comment

Popular posts from this blog

How to draw an overlay on a SurfaceView used by Camera on Android?

Solution 1: I have a simple program that draws the preview of the Camera into a SurfaceView . What I'm trying to do is using the onPreviewFrame method, which is invoked each time a new frame is drawn into the SurfaceView , in order to execute the invalidate method which is supposed to invoke the onDraw method. In fact, the onDraw method is being invoked, but nothing there is being printed (I guess the camera preview is overwriting the text I'm trying to draw). This is a simplify version of the SurfaceView subclass I have: public class Superficie extends SurfaceView implements SurfaceHolder . Callback { SurfaceHolder mHolder ; public Camera camera ; Superficie ( Context context ) { super ( context ); mHolder = getHolder (); mHolder . addCallback ( this ); mHolder . setType ( SurfaceHolder . SURFACE_TYPE_PUSH_BUFFERS ); } public void surfaceCreated ( final SurfaceHolder holder ) { camera = Camera . open (); try {
Read more

Create EditText with dropdown in android

EditText is a view which is used so frequently in Android application,specially in applications which has forms which allow user to fill information of any kind. When you have filled any form you must have a faced an problem (specially on mobile devices) ie. deleting the text written in EditText and prepare editable dropdown which allows to enter manual data with dropdown. So I have created my own custom EditText ie. DropDownEditText.This customized view contains a Button inside the EditText itself. So just on pressing this Button only once you can populate the dropdown with ArrayAdapter. So here my code goes… First XML code for customized view. dropdown_edit_text.xml <?xml version=”1.0″ encoding=”utf-8″?> <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"; android:layout_width=”fill_parent” android:layout_height=”wrap_content” > <EditText android:id=”@+id/dropdown_edit” android:layout_width=”fill_parent” androi
Read more

Android TCP Connection Chat application

Image
1. Make the Server in Java To create the server create a new project in Java and make a class called "TCPServer". In this class put the following code: UPDATED 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 import javax.swing.*; import java.io.*; import java.net.ServerSocket; import java.net.Socket;   /**   * The class extends the Thread class so we can receive and send messages at the same time   */ public class TCPServer extends Thread {        public static final int SERVERPO
Read more