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

Overview
 
Here 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 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.
 
locations
 
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
  1. <RelativeLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4. android:layout_width="fill_parent"  
  5. android:layout_height="fill_parent"  
  6. tools:context=".MainActivity">  
  7.     <Button  
  8. android:layout_width="wrap_content"  
  9. android:layout_height="wrap_content"  
  10. android:text="Position - Top Left"  
  11. android:id="@+id/buttondisplay1"  
  12. android:layout_alignParentLeft="true"  
  13. android:layout_alignParentTop="true"  
  14. />  
  15.     <Button  
  16. android:layout_width="wrap_content"  
  17. android:layout_height="wrap_content"  
  18. android:text="Position - Top Right"  
  19. android:id="@+id/buttondisplay2"  
  20. android:layout_alignParentTop="true"  
  21. android:layout_alignParentRight="true"  
  22. />  
  23.     <Button  
  24. android:layout_width="wrap_content"  
  25. android:layout_height="wrap_content"  
  26. android:text="Position - Bottom Left"  
  27. android:id="@+id/buttondisplay3"  
  28. android:layout_alignParentLeft="true"  
  29. android:layout_alignParentBottom="true"  
  30. />  
  31.     <Button  
  32. android:layout_width="wrap_content"  
  33. android:layout_height="wrap_content"  
  34. android:text="Position - Bottom Right"  
  35. android:id="@+id/buttondisplay4"  
  36. android:layout_alignParentRight="true"  
  37. android:layout_alignParentBottom="true"  
  38. />  
  39.     <Button  
  40. android:layout_width="fill_parent"  
  41. android:layout_height="wrap_content"  
  42. android:text="Position - Middle"  
  43. android:id="@+id/buttondisplay5"  
  44. android:layout_centerVertical="true"  
  45. android:layout_centerHorizontal="true"  
  46. />  
  47. </RelativeLayout>  
Run the app and the result looks like as the below image.
 
app
 
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.
 
screen orientation
 
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.
 
model
 
Now add below code in the main.xml file exists in res/layout/land folder.
  1. <Button  
  2.      android:layout_width="120px"  
  3.      android:layout_height="wrap_content"  
  4.      android:text="Position - Top Middle"  
  5.      android:id="@+id/buttondisplay6"  
  6.      android:layout_centerVertical="true"  
  7.      android:layout_centerHorizontal="true"  
  8.      android:layout_alignParentTop="true"  
  9.      />  
  10.  <Button  
  11.      android:layout_width="120px"  
  12.      android:layout_height="wrap_content"  
  13.      android:text="Position - Bottom Middle"  
  14.      android:id="@+id/buttondisplay7"  
  15.      android:layout_centerVertical="true"  
  16.      android:layout_centerHorizontal="true"  
  17.      android:layout_alignParentBottom="true"  
  18.      />  
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. 
 
mode
 
It shows that different XML files are loaded when the device is in different orientations.
 
mode

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.