Android display different layouts for different screen orientations

When your application allows the user to switch from portrait to landscape orientation and vice-versa, the interface in portrait view is different from landscape view. The interface might look good in the portrait view but not good in the landscape orientation view. For example, in your main user interface, you have six buttons arranged vertically. This interface looks good in the portrait orientation view. However, on some devices that have small screen sizes, the interface is not so good as some buttons can not be displayed in the limited screen space.

This problem can be solved by using different layouts for different screen orientations. You will need two layout files. One layout file is for the portaint orientation and another for the landscape orientation. These layout files have the same name. The portrait layout file is placed in the layout folder and the the landscape layout must be placed in the layout-land folder.



Now to have workable example application on handling the screen orientation changes by using different layout files, you will create a new Android project. Then modify the activity_main.xml file (in the layout folder) to add six buttons as shown below. This layout file is for portrait orientation that displays the six buttons in a single column.

<!-- Layout for portrait screen -->
<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:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity"
   android:orientation="vertical"
   >

  <Button
     android:id="@+id/bt1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button1"
    
     />
  <Button
     android:id="@+id/bt2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button2"
    
     />
  <Button
     android:id="@+id/bt3"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button3"
    
     />
  <Button
     android:id="@+id/bt4"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button4"    
     />
   <Button
     android:id="@+id/bt5"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button5"
    
     />
  <Button
     android:id="@+id/bt6"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button6"    
     />
</LinearLayout>

After that, in the res folder, you create a folder called layout-land. Then in that folder, create a new layout file called activity_main.xml and paste the following code into this file. This layout file is for landscape orientation that displays the six buttons in two rows. Each row has three buttons.

<!-- Layout for landscape screen -->
<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:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity"
   android:orientation="vertical"
   >

  <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     >
  <Button
     android:id="@+id/bt1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button1"
    
     />
  <Button
     android:id="@+id/bt2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button2"
    
     />
  <Button
     android:id="@+id/bt3"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button3"
    
     />
  </LinearLayout>
   <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal">
  <Button
     android:id="@+id/bt4"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button4"
    
     />
  <Button
     android:id="@+id/bt5"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button5"    
     />
  <Button
     android:id="@+id/bt6"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Button6"
    
     />
   </LinearLayout>
</LinearLayout>

Now run the example application. To test the application, in emulator, you can press Ctrl+F11 to make screen orientations changed.

Android-display-different-layouts-for-different-screen-orientations

Posted by: Dara | post date: 08-30-2014 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.