Android

Support For Landscape and Portrait Mode in Android

Introduction

 
This article shows how to support Landscape and Portrait modes of a device in our applications.
 
Generally, when we run our application it is displayed in a portrait mode but after changing the layout into portrait mode it will change the display of an application. So this application will have the same display when you run it either in portrait mode or in landscape mode.
 
It is a very simple concept to support landscape mode or portrait mode in applications. For this, you will need to create a folder named "layout-land". In the layout-land folder, you will paste the same XML file present in your layout folder (activity_main.xml). So when we change the layout to landscape mode it will automatically take the XML file from the layout-land folder.
 
Step 1
 
Create an XML file inside the layout folder and write the following:
  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.    tools:context=".MainActivity"  
  6.    android:orientation="horizontal">  
  7.    <LinearLayout  
  8.       android:layout_height="wrap_content"  
  9.       android:layout_width="wrap_content"  
  10.       android:orientation="vertical">  
  11.       <Button  
  12.          android:id="@+id/button1"  
  13.          android:layout_height="wrap_content"  
  14.          android:layout_width="wrap_content"  
  15.          android:text="@string/about"  
  16.          android:background="#ffffff">  
  17.       </Button>  
  18.       <Button  
  19.          android:id="@+id/button2"  
  20.          android:layout_height="wrap_content"  
  21.          android:layout_width="72dp"  
  22.          android:text="@string/help"  
  23.          android:background="#ffffff">  
  24.       </Button>  
  25.    </LinearLayout>  
  26.    <ImageView  
  27.       android:layout_height="352dp"  
  28.       android:layout_width="wrap_content"  
  29.       android:src="@drawable/socialnetwork"  
  30.       android:paddingLeft="20dp">  
  31.    </ImageView>  
  32. </LinearLayout> 
Step 2
 
 Create the same XML file inside the layout-land folder and write the following:
  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.     tools:context=".MainActivity"  
  6.     android:orientation="horizontal">  
  7.     <LinearLayout  
  8.         android:layout_height="wrap_content"  
  9.         android:layout_width="wrap_content"  
  10.         android:orientation="vertical">  
  11.         <Button  
  12.             android:layout_height="wrap_content"  
  13.             android:layout_width="wrap_content"  
  14.             android:text="@string/about"  
  15.             android:background="#ffffff">  
  16.         </Button>  
  17.         <Button  
  18.             android:layout_height="wrap_content"  
  19.             android:layout_width="72dp"  
  20.             android:text="@string/help"  
  21.             android:background="#ffffff">  
  22.         </Button>  
  23.     </LinearLayout>  
  24.     <ImageView  
  25.         android:layout_height="352dp"  
  26.         android:layout_width="wrap_content"  
  27.         android:src="@drawable/socialnetwork"  
  28.         android:paddingLeft="20dp">  
  29.     </ImageView>  
  30. </LinearLayout> 
Step 3
 
 Create another XML file for another activity.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.     <TextView  
  7.         android:layout_height="wrap_content"  
  8.         android:layout_width="wrap_content"  
  9.         android:id="@+id/textview"  
  10.         android:textSize="50dp">  
  11.     </TextView>  
  12. </LinearLayout> 
Step 4
 
 Create a Java file and write the following:
  1. package com.supportdifferentscreensizes;  
  2.   
  3. import android.content.Intent;  
  4. import android.os.Bundle;  
  5. import android.app.Activity;  
  6. import android.view.Menu;  
  7. import android.view.View;  
  8. import android.widget.Button;  
  9.   
  10. public class MainActivity extends Activity   
  11. {  
  12.  Button button1, button2;  
  13.  @Override  
  14.  public void onCreate(Bundle savedInstanceState)   
  15.  {  
  16.   super.onCreate(savedInstanceState);  
  17.   setContentView(R.layout.activity_main);  
  18.   button1 = (Button) findViewById(R.id.button1);  
  19.   button2 = (Button) findViewById(R.id.button2);  
  20.   button1.setText(R.string.about);  
  21.   button2.setText(R.string.help);  
  22.   
  23.   button2.setOnClickListener(new View.OnClickListener()   
  24.   {  
  25.    @Override  
  26.    public void onClick(View view)   
  27.    {  
  28.   
  29.     Intent i = new Intent(MainActivity.this, Second.class);  
  30.     Bundle b = new Bundle();  
  31.     String s = getResources().getString(R.string.help);  
  32.     b.putString("1", s);  
  33.     i.putExtras(b);  
  34.     startActivity(i);  
  35.    }  
  36.   });  
  37.  }  
  38.  @Override  
  39.  public boolean onCreateOptionsMenu(Menu menu)   
  40.  {  
  41.   // Inflate the menu; this adds items to the action bar if it is present.  
  42.   getMenuInflater().inflate(R.menu.main, menu);  
  43.   return true;  
  44.  }  
  45.   
  46. } 
Step 4
 
 Create another Java class file and write the following:
  1. package com.supportdifferentscreensizes;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Intent;  
  5. import android.os.Bundle;  
  6. import android.widget.TextView;  
  7.   
  8. /** 
  9.  * Created by vivek on 8/26/13. 
  10.  */  
  11. public class Second extends Activity   
  12. {  
  13.  public void onCreate(Bundle savedInstanceState)   
  14.  {  
  15.   super.onCreate(savedInstanceState);  
  16.   setContentView(R.layout.second);  
  17.   
  18.   TextView textview = (TextView) findViewById(R.id.textview);  
  19.   Intent i = getIntent();  
  20.   Bundle b = i.getExtras();  
  21.   String text = b.getString("1");  
  22.   textview.setText(text);  
  23.   
  24.  }  
  25. } 
Step 5
 
Create a string.xml file inside the value-es (res\value-es) folder to support Spanish language as in the following:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <string name="app_name">SupportDifferentScreenSizes</string>  
  4.     <string name="action_settings">Settings</string>  
  5.     <string name="about">acerca de</string>  
  6.     <string name="help">ayudar</string>  
  7. </resources> 
Step 6
 
In the string.xml file inside the value (res\value) folder add support for language as in the following:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <string name="app_name">SupportDifferentScreenSizes</string>  
  4.     <string name="action_settings">Settings</string>  
  5.     <string name="about">About</string>  
  6.     <string name="help">Help</string>  
  7. </resources> 
Step 7
 
Change an Android Manifest.xml file as in the following:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     package="com.supportdifferentscreensizes"  
  4.     android:versionCode="1"  
  5.     android:versionName="1.0" >  
  6.     <uses-sdk  
  7.         android:minSdkVersion="7"  
  8.         android:targetSdkVersion="16" />  
  9.     <application  
  10.         android:allowBackup="true"  
  11.         android:icon="@drawable/ic_launcher"  
  12.         android:label="@string/app_name"  
  13.         android:theme="@style/AppTheme" >  
  14.         <activity  
  15.             android:name="com.supportdifferentscreensizes.MainActivity"  
  16.             android:label="@string/app_name" >  
  17.             <intent-filter>  
  18.                 <action android:name="android.intent.action.MAIN" />  
  19.                 <category android:name="android.intent.category.LAUNCHER" />  
  20.             </intent-filter>  
  21.         </activity>  
  22.         <activity  
  23.             android:name=".Second">  
  24.         </activity>  
  25.     </application>  
  26. </manifest> 
Step 8
 
In portrait mode:
 
Clipboard02.jpg
 
In landscape mode:
 
Clipboard04.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found