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"?>
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 :
- 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"?>
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"?>
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.