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

Overview

 

Here 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 Application
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 due to the fact that 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 about TableLayout and the output of it as in the below screenshot.

 

 

In the landscape mode, a lot of empty 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 be handle changes in screen orientation.
Anchoring Views

It can easily be achieved by using RelativeLayout. Let's make some changes in 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 as 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 below code in the main.xml file exists in 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.