Android UI Layouts(Android ViewGroup)

Android mobile application's building blocks are views, objects of View class and it acquire some rectangular space on the android mobile screen.

ViewGroups are collection of views and ViewGroup is an subclass of View class. ViewGroup provides an invisible area to hold the views like buttons,textview etc. that are used to create an layout of either an android activity or android fragment.

We can declare android layout in two different ways-

1. Defining Layouts in XML file
2. Creating Layouts at runtime or programmatically

An android viewgroup can contain other type of viewgroup or layout.Now we will see how to create an layout using XML file.

Creating Android Layout file Using XML File

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

It is really easy to create an layout in any xml file because android provide very straight forward and awesome library to provide suggestion while you are writing code.

In the above example we have create one layout of type linear which contains two views as Button and TextView. 

We will come to know about every type of layout in details in other blogs.

Loading the XML Resource

After creating an xml file for activity layout we have to load this xml file in our class file or java file to attach this with our activity or fragment using setContentView method for activity or  onCreateView for fragment in these methods we have to provide the resource file name as id.

here is an example to load an xml file named as main_layout.

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

onCreate is an callback method for activity class and setcontentView is other method which takes parameter as layout or xml file id which are stored in R file under layout.

Attributes

Every view or viewgroup has its own attributes and there are some attributes that are common to every view or viewgroup that are explained below -

ID

We need to provide id to every view or view group to identify it and to use this in our java or class file where we defines the action of views.

Below is an example of creating an button and fetching in our activity class file-

android:id="@+id/my_button"

1. Define a view/widget in the layout file and assign it a unique ID:

   <Button android:id="@+id/my_button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/my_button_text"/>

2. Then create an instance of the view object and capture it from the layout (typically in the onCreate() method):

   Button myButton = (Button) findViewById(R.id.my_button);

Android Layout Parameters/Attributes

Every layout has its own parameters but there are few parameters that are common to each and every layout.Every xml layout attribute starting with layout_something define layout parameters for the view are appropriate for the ViewGroup in which it is contained.

This image explain the hierarchy of views and viewgroups that can be combined together.Below is 

the list of some layout attributes -

Sr.No	Attribute & Description
1	android:id This is the ID which uniquely identifies the view.
2	android:layout_width This is the width of the layout.
3	android:layout_height This is the height of the layout
4	android:layout_marginTop This is the extra space on the top side of the layout.
5	android:layout_marginBottom This is the extra space on the bottom side of the layout.
6	android:layout_marginLeft This is the extra space on the left side of the layout.
7	android:layout_marginRight This is the extra space on the right side of the layout.
8	android:layout_gravity This specifies how child Views are positioned.
9	android:layout_weight This specifies how much of the extra space in the layout should be allocated to the View.
10	android:layout_x This specifies the x-coordinate of the layout.
11	android:layout_y This specifies the y-coordinate of the layout.
12	android:layout_width This is the width of the layout.
13	android:layout_width This is the width of the layout.
14	android:paddingLeft This is the left padding filled for the layout.
15	android:paddingRight This is the right padding filled for the layout.
16	android:paddingTop This is the top padding filled for the layout.
17	android:paddingBottom This is the bottom padding filled for the layout.

Android Create Layout Programmatically 

Here is an example that show how to create an linear layout programmatically in an android application.You won't need often to create any layout programmatically but some time you may need this.using this example you will come to know basics of creating an linear layout programmatically in the same manner you can create other layouts as well.

You can click on the image to see in full size.

First of all we have created an object of linear layout class then specified its orientation.In the next line linear layout parameters are defined to match it's parent border or in other words we can say it is going to fill its parent.

In the next line we set this create layout as content in our activity and then we have created some views that will be contained by linear layout as child views.We have also defined their margin and other some required parameters this all be explained in upcoming blogs.