Designing the Landscape and Portrait Mode of Application in Android - GeeksforGeeks

22 Sep, 2020
Whenever the user switch to landscape mode an issue is encountered in which some of the widgets becomes invisible (as you can see the below image) and so in this scenario there is a need to design the separate layout for the landscape mode. At the end of this article you will be able to do that.
Step 1 : Create a new project in android studio :
Refer how to create a new project in android studio here : Android | How to Create/Start a New Project in Android Studio?
Give the Name of the application as “Landscape design”.
Let the name of the activity be “MainActivity” and layout file as “activity_main.xml” or you can rename.
Step 2 : Can change color combination of the base theme of the application
To change the base application theme colors Goto app -> res -> values -> colors.xml, and invoke the following color combination.
XML
<?xml version="1.0" encoding="utf-8"?><resources>    <color name="colorPrimary">#0f9d58</color>    <color name="colorPrimaryDark">#006d2d</color>    <color name="colorAccent">#55cf86</color></resources>
Refer the following image if one has not got the colors.xml file.
Step 3 : Design portrait mode
Here the portrait design is containing simple LinearLayout, 1 EditText and 3 Buttons.
So one need to invoke the simple following XML code to activity_main.xml.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity"    tools:ignore="HardcodedText">      <!--This image is custom made GeeksforGeeks logo-->    <ImageView        android:layout_width="200dp"        android:layout_height="150dp"        android:layout_gravity="center"        android:layout_marginTop="25dp"        android:src="@drawable/gfg_logo_1" />      <!--A simple EditText view-->    <EditText        android:id="@+id/edit_text_1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginTop="35dp"        android:layout_marginEnd="16dp"        android:hint="Name" />      <Button        android:id="@+id/button_1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginTop="30dp"        android:layout_marginEnd="16dp"        android:text="Button 1" />      <Button        android:id="@+id/button_2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginTop="25dp"        android:layout_marginEnd="16dp"        android:text="Button 2" />      <Button        android:id="@+id/button_3"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginTop="25dp"        android:layout_marginEnd="16dp"        android:text="Button 3" />  </LinearLayout>
Output UI looks like :
Step 4: Design the layout for landscape mode
To design the layout for the landscape mode we need to add resource directory in the res folder of the project.
To create the landscape mode right click on the res folder -> New -> Android Resource Directory. 
Now one pop up will be prompted. Select Orientation Available Qualifiers and then “>>” icon at right side, then select Landscape under Screen Orientation.
Now select layout under the Resource type, and then let the Directory name as layout-land and don’t change it.
Then copy the activity_main.xml file from the layout folder to layout-land folder. Or you can create a fresh layout separately and redesign the layout for landscape mode.
Refer the following video if you are not able to get the steps :Video Playerhttps://media.geeksforgeeks.org/wp-content/uploads/20200908213733/landscape_mode.mp400:0000:0000:34Use Up/Down Arrow keys to increase or decrease volume.
Now invoke the following code or you can also redesign your own layout file for landscape mode.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal"    tools:context=".MainActivity"    tools:ignore="HardcodedText">      <!--This image is custom made GeeksforGeeks logo-->    <ImageView        android:layout_width="250dp"        android:layout_height="150dp"        android:layout_gravity="center"        android:src="@drawable/gfg_logo_1" />      <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">          <!--A simple EditText view-->        <EditText            android:id="@+id/edit_text_1"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="10dp"            android:layout_marginEnd="16dp"            android:hint="Name" />          <Button            android:id="@+id/button_1"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="30dp"            android:layout_marginEnd="16dp"            android:text="Button 1" />          <Button            android:id="@+id/button_2"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="25dp"            android:layout_marginEnd="16dp"            android:text="Button 2" />          <Button            android:id="@+id/button_3"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="25dp"            android:layout_marginEnd="16dp"            android:text="Button 3" />      </LinearLayout>  </LinearLayout>
Output UI looks like (to see this output one needs to rotate the device) :
Method 2: Another way to solve this issue is to wrap entire view groups inside the scroll view (meaning the scroll view should be the root view of the layout), by doing this there is no need to create the separate layout design for the landscape mode.
This implementation may help in some of the scenarios like for example, the activity which contains only EditText widgets or simple image views or grid views, in this case one can adopt this method.
However this method is not recommended to use under the landscape mode (but in some cases like above point can be used). Because user experience wouldn’t be up to the mark of the application.
To implement that, invoke the following code into activity_main.xml :
XML
<?xml version="1.0" encoding="utf-8"?><ScrollView xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">      <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">          <!--This image is custom made GeeksforGeeks logo-->        <ImageView            android:layout_width="200dp"            android:layout_height="150dp"            android:layout_gravity="center"            android:layout_marginTop="25dp"            android:src="@drawable/gfg_logo_1" />          <!--A simple EditText view-->        <EditText            android:id="@+id/edit_text_1"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="35dp"            android:layout_marginEnd="16dp"            android:hint="Name" />          <Button            android:id="@+id/button_1"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="30dp"            android:layout_marginEnd="16dp"            android:text="Button 1" />          <Button            android:id="@+id/button_2"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="25dp"            android:layout_marginEnd="16dp"            android:text="Button 2" />          <Button            android:id="@+id/button_3"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="25dp"            android:layout_marginEnd="16dp"            android:text="Button 3" />      </LinearLayout>  </ScrollView>
By invoking the above code you will achieve the following output :
Things to be taken care while making the separate layout for the landscape mode.
If one is designing the layout for landscape mode, needs to think and wire frame the landscape designs in the platforms like Whimsical or can go for the professional platforms like Adobe XD.
While wire framing the designs one should see that, the widgets are placed in such a manner that, it should increase the user experience (meaning it should make the user to interact with the app hassle freely).
Deciding the perfect layout before converting the wire frame design to actual implementation in Android Studio, should be done according to the complexity of the design of the application.
android
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Android Listview in Java with Example
Flexbox-Layout in Android
How to Save Data to the Firebase Realtime Database in Android?
How to Change the Background Color After Clicking the Button in Android?