Orientation, Anchoring, Resizing And Repositioning Of Views In Android Application

Overview

Here are some useful links to start programming in Android applications.

1. Android Programming - Day One
2. Android Programming - Day Two
3. How To Display A Dialog Windows In Android
4. How To Display A Progress Dialog Window In Android
5. Intent In Android
6. Return Data Using Intent Object In Android Applications
7. Passing Data Using An Intent Object In Android Applications
8. Fragments In Android Applications
9. Adding Fragments Dynamically In Android Application
10. Fragment Life Cycle In Android Application
11. Interaction Between Two Fragments
12. Calling In-Built Functions in Android Applications
13. Intent Object and Intent Filters in Android Application
14. Displaying Notifications in Android Applications
15. User Interface in Android Applications

Introduction

In this article, you will learn about orientation, anchoring, resizing, and repositioning of views. Android supports two types of screen orientations: portrait and landscape. By default, when you change the display orientation of your device, the current activity that is displayed automatically redraws its content in the new orientation. This happens because the onCreate() method of the activity is fired whenever there is a change in display orientation.

Implementation

When the views are redrawn, they may be drawn in their original locations. This article, User Interface in Android Applications, already discussed TableLayout and its output as in the below screenshot.

In the landscape mode, a lot of space on the right of the screen could be used. Any additional views at the bottom of the screen would be hidden when the screen orientation is set to landscape.

Furthermore, by using two techniques you can handle changes in screen orientation,

• Anchoring: This is the easiest way to anchor views to the four edges of the screen. When the screen orientation changes, the views can anchor neatly to the edges.
• Resizing and repositioning: These are simple techniques to ensure that views can handle changes in screen orientation.
• Anchoring Views

It can easily be achieved by using RelativeLayout. Let's make some changes in the main.xml file

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position - Top Left"
        android:id="@+id/buttondisplay1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position - Top Right"
        android:id="@+id/buttondisplay2"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position - Bottom Left"
        android:id="@+id/buttondisplay3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Position - Bottom Right"
        android:id="@+id/buttondisplay4"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true" />
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Position - Middle"
        android:id="@+id/buttondisplay5"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Run the app and the result looks like the below image.

In the above image, there are various views of the Button element.

• Layout_alignParentLeft: This property aligns the view to the left of the parent view.
• Layout_alignParentRight: This property aligns the view to the right of the parent view.
• Layout_alignParentTop: This property aligns the view to the top of the parent view.
• Layout_alignParentBottom: This property aligns the view to the bottom of the parent view.
• Layout_centerVertical: This property aligns the view at the center vertically within its parent view.
• Layout_centerHorizontal: This property aligns the view at the center horizontally within its parent view.

If the screen orientation is changed from portrait to landscape mode, the four buttons are aligned to the four edges of the screen, and the center button is centered in the middle of the screen with its width fully stretched.

After anchoring views, now you will see about resizing and repositioning. So you have to customize the UI based on screen orientation and this can be easily implemented by creating a separate file for main.xml in the folder res/layout. Here, the main.xml file will contain the UI for each orientation. So, you have to create a new folder called layout-land which represents landscape mode.

Now add the below code in the main.xml file that exists in the res/layout/land folder.

<Button  
     android:layout_width="120px"  
     android:layout_height="wrap_content"  
     android:text="Position - Top Middle"  
     android:id="@+id/buttondisplay6"  
     android:layout_centerVertical="true"  
     android:layout_centerHorizontal="true"  
     android:layout_alignParentTop="true"  
     />  
 <Button  
     android:layout_width="120px"  
     android:layout_height="wrap_content"  
     android:text="Position - Bottom Middle"  
     android:id="@+id/buttondisplay7"  
     android:layout_centerVertical="true"  
     android:layout_centerHorizontal="true"  
     android:layout_alignParentBottom="true"  
     />  

Run the app and see the difference at run time, when the activity is loaded in portrait mode it will display five buttons but if the activity is loaded in landscape mode, seven buttons are displayed. 

It shows that different XML files are loaded when the device is in different orientations.

Conclusion

In the above article, you learned about anchoring, resizing, and repositioning the views with different orientations. In the next article, I will explain the activity behavior when screen orientation changes.