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

Overview

Here are some useful links to start programming 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.

locations

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.

Position top left

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.

Position top left

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.

Activity main

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.

Position top left

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

Position bottom left

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.