Overview
I hope, you got a chance to read some useful articles to start programming in Android Applications. The useful links are given below:
  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

Introduction

You know about an Activity and how its life cycle and activity is a means by which users interact with the Application. However, an activity by itself does not have a presence on the screen. An activity displays the user interface of your application, which may contain some widgets such as buttons, labels, text boxes, etc. Basically, it is defined in the XML file, generally called the main.xml file, located in the res/layout folder of your project.
  1. <LinearLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:orientation="vertical"
  5. android:layout_width="fill_parent"
  6. android:layout_height="fill_parent" tools:context=".MainActivity">
  7. <Button android:id="@+id/buttondisplaynotification"
  8. android:layout_width="fill_parent"
  9. android:layout_height="fill_parent"
  10. android:text="Show Notification"
  11. android:onClick="onClickShowNotification"
  12. />
  13. </LinearLayout>
During the runtime, it is loaded in the onCreate() method handler in the Activity class, using the setContentView() method.
  1. @Override
  2. protected void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. setContentView(R.layout.activity_main);
  5. }
During the compilation, each element in XML file is compiled into an equivalent Android GUI class with the attributes, represented by the methods.
In this article, you will learn about some widgets like Views, ViewGroups, LinearLayout, AbsoluteLayout, TableLayout, RelativeLayout, FrameLayout, ScrollView, etc.
An activity contains Views and View groups. A View is a widget, which has an appearance on the screen. E.g buttons, labels, textboxes, etc. It is derived from the base class android.view.View.
In ViewGroup, one or more Views can be grouped together. A ViewGroup provides the layout, in which you can set the order of the appearance and sequence of the Views. Some examples of ViewGroups are LinearLayout and FrameLayout. It is derived from the base class android.view.ViewGroup.
Android supports the following ViewGroups.
  1. LinearLayout
  2. AbsoluteLayout
  3. TableLayout
  4. RelativeLayout
  5. FrameLayout
  6. ScrollView
Let us see all these one by one.
LinearLayout
The LinearLayout arranges a View in a single column or a single row. Thus, child Views can be arranged either vertically or horizontally. If you want to see how LinearLayout works, consider the following elements, typically contained in the manin.xml file.
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent" tools:context=".MainActivity">
  7. <Button android:id="@+id/buttondisplaynotification"
  8. android:layout_width="fill_parent"
  9. android:layout_height="fill_parent"
  10. android:text="Show Notification"
  11. android:onClick="onClickShowNotification"
  12. />
  13. </LinearLayout>
In the main.xml file, you can see that the root element is <LinearLayout> and it has a <Button> element, contained within it. The <LinearLayout> element controls the order, in which the views contained within it appears. The table, given below, shows the common attributes, used in the View and ViewGroups,
windowtext .5pt;solid wi
ATTRIBUTE DESCRIPTION
Lauout_width It specifies the width of the View and ViewGroup.
Layout_height It specifies the height of the View and ViewGroup.
Layout_marginTop It specifies the extra space on the top side of the View or Viewgroup
Layout_marginBotton It specifies the extra space on the bottom side of the View or Viewgroup
Layout_marginLeft It specifies the extra space on the left side of the View or Viewgroup.
Layout_marginRight It specifies the extra space on the right side of the View or Viewgroup
Layout_gravity It specifies, how child Views are positioned.
Layout_weight It specifies, how much extra space in the layout should be allocated to the View.
Layout_x It is x-coordinate of the view or Viewgroup.
Layout_y It is y-coordinate of the view or Viewgroup.
  1. <TextView
  2. android:layout_width="wrap_content"
  3. android:layout_height="wrap_content"
  4. android:text="Check it for layout!!"
  5. />
Suppose, in the above <TextView> element, the width fills the entire width of its parent, using the fill_parent constant. Its height is indicated by the wrap_content constant, which means that its height is the height of its content. If you don’t want the <TextView> View to occupy the entire row, you can set its layout width attribute to wrap_content.
Now, make some changes in the properties of the element in the same file as:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent" tools:context=".MainActivity">
  7. <TextView
  8. android:layout_width="100dp"
  9. android:layout_height="wrap_content"
  10. android:text="See User Interface Effect by changing dp to px"/>
  12. <Button android:id="@+id/buttondisplaynotification"
  13. android:layout_width="120dp"
  14. android:layout_height="fill_parent"
  15. android:text="Show Notification"
  16. android:onClick="onClickShowNotification"
  17. />
  18. </LinearLayout>
In the code, given above, set the width of both the TextView and Button Views to an absolute value. The width is 100dp (dp is referred as density-independent pixels) and Button is 120dp.
The screenshot, mentioned above is the screen of Nexus 4. It has 4.7 inches screen (diagonally), with a screen width of 2.08 inches.
We can see in the screenshot, given above, what Views looks like on the different screens with different pixel density. Thus, it is important to understand, how Android recognizes the screens of varying sizes and density.
Android defines and recognizes four types of screen densities.
  1. Low Density(lDPI)
  2. Medium Density(MDPI)
  3. High Density(HDPI)
  4. Extra-High Density(XHDPI)
The above image comes into one of the densities, defined in the preceding list. E.g. Nexus 4 is regarded as an XHDPI device, as its pixel density is closest to 240 dpi. Unit dp ensures that the Views are displayed in the right proportion, regardless of the screen density. Basically, Android automatically scales the size of the view, depending on the density of the screen. E.g. A Button is displayed on 120 dpi screen, its width would be 90 pixels because a 120 dpi screen is treated, just like a 100 dpi screen. If it is displayed on a 165 dpi screen, its width would be 124 pixels.
Below is the formula to convert dp to px.
We see that one dp is equivalent to one px.
Now, we will see about the changes, when the size is defined in pixels(px) instead of dp.
  1. <TextView
  2. android:layout_width="100px"
  3. android:layout_height="wrap_content"
  4. android:text="See User Interface Effect by changing dp to px"/>
  6. <Button android:id="@+id/buttondisplaynotification"
  7. android:layout_width="120px"
  8. android:layout_height="fill_parent"
  9. android:text="Show Notification"
  10. android:onClick="onClickShowNotification"
  11. />
Run the app and the result is displayed below,
It shows, that if you use pixels for the View sizes, the Views will appear smaller on a device with a high dpi screen, compared to one with a lower dpi.
In the example, mentioned above, the orientation of the layout is set as vertical.
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent" tools:context=".MainActivity">
The default orientation layout is horizontal. If you remove this attribute, the Views will look like as given below,
In LinearLayout, we can use layout_weight and layout_gravity attributes to the View, contained within it. We do some changes in the main.xml file.
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical"
  6. tools:context=".MainActivity">
  8. <TextView
  9. android:layout_width="100px"
  10. android:layout_height="wrap_content"
  11. android:text="See User Interface Effect by changing dp to px"/>
  13. <Button android:id="@+id/buttondisplaynotification"
  14. android:layout_width="120px"
  15. android:layout_height="fill_parent"
  16. android:text="Show Notification"
  17. android:onClick="onClickShowNotification"
  18. android:layout_weight="1"
  19. android:layout_gravity="center"
  20. />
  22. </LinearLayout>
Run the app and see the difference, given below,
Now, we change the orientation of LinearLayout to horizontal from vertical, given below:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="horizontal"
  6. tools:context=".MainActivity">
  8. <TextView
  9. android:layout_width="0dp"
  10. android:layout_height="wrap_content"
  11. android:text="See User Interface Effect by changing dp to px"
  12. android:layout_gravity="left"
  13. android:layout_weight="1"
  14. />
  16. <Button android:id="@+id/buttondisplaynotification"
  17. android:layout_width="0dp"
  18. android:layout_height="fill_parent"
  19. android:text="Show Notification"
  20. android:onClick="onClickShowNotification"
  21. android:layout_weight="2"
  22. android:layout_gravity="center"
  23. />
  24. </LinearLayout>
Afterwards, we need to change the width of each view to 0 dp and it displays the screenshot, given below,
Absolute Layout
It enables us to specify the exact location of its children. Make some changes in the main.xml file.
  1. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. tools:context=".MainActivity">
  7. <TextView
  8. android:layout_width="300dp"
  9. android:layout_height="wrap_content"
  10. android:text="See user interface effect by changing to absolute layout"
  11. android:layout_x="50px"
  12. android:layout_y="100px"
  13. />
  15. <Button android:id="@+id/buttondisplaynotification"
  16. android:layout_width="200dp"
  17. android:layout_height="wrap_content"
  18. android:text="Show Notification"
  19. android:onClick="onClickShowNotification"
  20. android:layout_x="150px"
  21. android:layout_y="180px"
  22. />
  23. </AbsoluteLayout>
Run the app and result looks like the screenshot, given below:
In the result, given above, the elements are the specified positions, using the android:layout_x and android:layout_y attributes. Android will not support them in their future versions, so we should avoid using this layout.
Table Layout
It groups the Views into rows and columns. <TableRow> element is used to design a row in the table. Each row can contain one or more Views. Each View is placed within a row to form a cell. The width of each column is determined by the largest width of each cell in the column. Let’s make some changes in the file main.xml.
  1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. tools:context=".MainActivity">
  7. <TableRow>
  8. <TextView
  9. android:text="Enter Email"
  10. android:width="120dp"
  11. />
  12. <EditText
  13. android:id="@+id/txtemail"
  14. android:width="150dp"
  15. />
  16. </TableRow>
  17. <TableRow>
  18. <TextView
  19. android:text="Enter Password"
  20. android:width="120dp"
  21. />
  22. <EditText
  23. android:id="@+id/txtpassword"
  24. android:width="150dp"
  25. android:password="true"
  26. />
  27. </TableRow>
  28. <TableRow>
  29. <Button
  30. android:text="Login"
  31. android:id="@+id/buttonLogin"
  32. />
  33. </TableRow>
  34. </TableLayout>
Run the app and the result looks like the screenshot, given below:
In the preceding code, there are two columns and three rows in the TableLayout. Make some changes to one more element as Remember Me in checkbox.
  1. <TableRow>
  2. <TextView />
  3. <CheckBox
  4. android:text="Remember Me"
  5. android:id="@+id/chkboxrememberme"
  6. android:layout_width="fill_parent"
  7. android:layout_height="wrap_content"
  8. />
  9. </TableRow>
  10. <TableRow>
  11. <TextView />
  12. <Button
  13. android:text="Login"
  14. android:id="@+id/buttonLogin"
  15. />
  16. </TableRow>
Run the app and see the result, given below:
In the preceding code, the cell is populated, directly under the Password TextView with a <TextView/> empty element. It will display under the PasswordTextView, if we don’t do this.
Relative Layout
This layout enables us to specify, how child Views are positioned, relative to each other. Make some changes in the main.xml file as:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. tools:context=".MainActivity">
  7. <TextView
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:text="Message"
  11. android:layout_alignParentTop="true"
  12. android:layout_alignParentLeft="true"
  13. android:id="@+id/txtnotifications"
  14. />
  15. <EditText
  16. android:layout_width="fill_parent"
  17. android:layout_height="150px"
  18. android:layout_alignLeft="@+id/txtnotifications"
  19. android:layout_below="@+id/txtnotifications"
  20. android:layout_centerHorizontal="true"
  21. android:id="@+id/editnotifications"
  22. />
  23. <Button
  24. android:layout_width="180px"
  25. android:layout_height="wrap_content"
  26. android:text="Save"
  27. android:layout_below="@id/editnotifications"
  28. android:layout_alignLeft="@id/editnotifications"
  29. android:id="@+id/buttonsave"
  30. />
  31. <Button
  32. android:layout_width="160px"
  33. android:layout_height="wrap_content"
  34. android:text="Cancel"
  35. android:layout_below="@id/editnotifications"
  36. android:layout_alignRight="@id/editnotifications"
  37. android:id="@+id/buttoncancel"
  38. />
  39. </RelativeLayout>
Run the app and see the result, given in the image, below:
In the image, given above, each View embedded within the RelativeLayout has attributes that enable it to align with another View. These attributes are: Frame Layout
This layout is a placeholder on the screen, which we can use to display a single View. It is always anchored to the top left of the layout, when we add a FrameLayout. Thus, let’s do some changes in the file main.xml.
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. tools:context=".MainActivity">
  7. <TextView
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:text="Welcome you at Frame Layout"
  11. android:layout_alignParentTop="true"
  12. android:layout_alignParentLeft="true"
  13. android:id="@+id/txtnotifications"
  14. />
  15. <FrameLayout
  16. android:layout_width="wrap_content"
  17. android:layout_height="wrap_content"
  18. android:layout_alignLeft="@+id/txtnotifications"
  19. android:layout_below="@+id/txtnotifications"
  20. android:layout_centerHorizontal="true"
  21. >
  22. <ImageView
  23. android:layout_width="wrap_content"
  24. android:layout_height="wrap_content"
  25. android:layout_marginLeft="100px"
  26. android:layout_marginTop="20px"
  27. android:src="@drawable/ic_launcher"
  28. />
  29. </FrameLayout>
  30. </RelativeLayout>
Run the app and see the result in the image, given below:
In the preceding code, we have FrameLayout within RelativeLayout and have embedded an ImageView within it. Now, add another view within the FrameLayout, the view will overlap the previous view.
  1. <FrameLayout
  2. android:layout_width="wrap_content"
  3. android:layout_height="wrap_content"
  4. android:layout_alignLeft="@+id/txtnotifications"
  5. android:layout_below="@+id/txtnotifications"
  6. android:layout_centerHorizontal="true"
  7. >
  8. <ImageView
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:layout_marginLeft="100px"
  12. android:layout_marginTop="20px"
  13. android:src="@drawable/ic_launcher"
  14. />
  16. <Button
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:text="Show Image"
  20. />
  21. </FrameLayout>
Run the app and see the result, given below in the image:
Scroll View
This layout is a special type of FrameLayout and enables the users to scroll through a list of Views, which can occupy more space than the physical display. It can contain only one child view or view group, which is normally a LinearLayout. Let’s do some changes in the main.xml file.
  1. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. tools:context=".MainActivity">
  6. <LinearLayout
  7. android:layout_width="fill_parent"
  8. android:layout_height="wrap_content"
  9. android:orientation="vertical"
  10. android:focusable="true"
  11. android:focusableInTouchMode="true"
  12. >
  13. <Button
  14. android:layout_width="fill_parent"
  15. android:layout_height="wrap_content"
  16. android:text="Display 1"
  17. android:id="@+id/buttondisplay1"
  18. />
  19. <Button
  20. android:layout_width="fill_parent"
  21. android:layout_height="wrap_content"
  22. android:text="Display 2"
  23. android:id="@+id/buttondisplay2"
  24. />
  25. <Button
  26. android:layout_width="fill_parent"
  27. android:layout_height="wrap_content"
  28. android:text="Display 3"
  29. android:id="@+id/buttondisplay3"
  30. />
  31. <EditText
  32. android:layout_width="fill_parent"
  33. android:layout_height="400dp"
  34. android:id="@+id/textbox1"
  35. />
  36. <Button
  37. android:layout_width="fill_parent"
  38. android:layout_height="wrap_content"
  39. android:text="Display 4"
  40. android:id="@+id/buttondisplay4"
  41. />
  42. <Button
  43. android:layout_width="fill_parent"
  44. android:layout_height="wrap_content"
  45. android:text="Display 5"
  46. android:id="@+id/buttondisplay5"
  47. />
  48. <Button
  49. android:layout_width="fill_parent"
  50. android:layout_height="wrap_content"
  51. android:text="Display 6"
  52. android:id="@+id/buttondisplay6"
  53. />
  54. </LinearLayout>
  55. </ScrollView>
Run the app and see the result, as the image, given below:
The ExitText automatically gets the focus. It fills up the entire activity. Next, add two attributes to the <LinearLayout> element.
  1. android:focusable="true"
  2. android:focusableInTouchMode="true"
After adding these attributes, we are now able to view the buttons and scroll through the list of Views.

Conclusion

In this article, you learned about various types of layout (LinearLayout, AbsoluteLayout, TableLayout, Relative Layout, Frame Layout, and Scroll View). In the next article, I will explain an orientation, anchoring, resizing and repositioning of the Views. If you have any questions or comments, post it on C# Corner comments section.