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


Here some useful links to start programming in Android applications.


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.


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 screen shot.


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:

  1. Anchoring – This is 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.
  2. Resizing and repositioning – These are simple techniques to ensure that views can be handle changes in screen orientation.
Anchoring Views

It can easilybe achieved by using RelativeLayout. Lets 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.


In the above image, there are various views of 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, 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.

  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. 


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



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

Up Next
    Ebook Download
    View all
    View all