3.4 Android Views

Android View  is responsible for the user interface of the Android application. An Android  view is a widget which appears on screen. Android View objects are generally buttons, text fields, etc. We have another important term called ViewGroup. As the name suggests, Android ViewGroup groups views together to define the layout of screen. Thus, the user interface or the way your app appears on the screen is designed by a ladder of views and ViewGroups. We will work with sub classes and the base class is android.view.View. ViewGroup is itself a special type of view and it acts like a container which is not visible.

We define user interface using XML file. When we run our app, this XML element is loaded in our onCreate() event handler and this is done using the method setContentView(). When this is compiled each element in XML file is compiled into the equivalent Android Graphical User Interface Class. Then the Android system creates the user interface of activity. 

                    Android ViewGroups and views

3.4.1 Android ViewGroup

Android ViewGroup is a subclass of  base class android.view.ViewGroup . Order and sequence of views are declared in ViewGroups. Thus, ViewGroup provides layout. Commonly supported ViewGroups are as follows:

  • Android Linear layout
  • Absolute Layout
  • Table layout
  • Relative Layout
  • Frame Layout
  • Grid Layout 

          Android viewgroup layouts                                     

                                                                               

3.4.1.1 Android  Linear Layout ( Android LinearLayout )

This layout holds the child elements into a single row either vertically or horizontally. In case of vertical layout, we have column populated with views and in horizontal layout we have row of views. 

         Android Linear Layout                                               

 

There is always one root or main layout of each xml file. One layout can contain one or more other types of child layouts. In other words, nesting of child layouts is possible under one root element.

Now create a project and name it LinearLayout. Till now, we have developed two apps and from this point you should be comfortable with creating projects. We have drag and drop feature for graphical layout of xml file. You can select the widgets you want and then specify their attributes. But I would suggest you to type these lines of code by yourself at least for the first time. I promise you I shall show the drag and drop feature as well.

Open the file saying activity_main.xml. Generally, we are presented with a relative layout file. Don’t worry, just delete it and type the following code:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical" >
     
      <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="How are you doing ?"
        android:textAppearance="?android:attr/textAppearanceLarge" />

      <Button
        android:id="@+id/button1"
        android:layout_width="152dp"
        android:layout_height="wrap_content"
        android:text="Press Here" />

  </LinearLayout>

                                                        xml file of Android  LinearLayout Example

Let us talk about the attributes. Layout_width and layout_height specifies the width and height of the view or ViewGroup respectively. Id is unique for each element as if we want to reference them in near future. Java files use this id for referencing so it must be carefully assigned. They are self descriptive actually. So there is no hidden fact which has to be enlightened. One more thing you must have noticed. 152 dp right!! Don’t worry. Term dp or dip density independent pixel

162 dp= 1 inch of screen size

We have other units of measurement like sp for specifying fonts. Sp stands for scale independent pixel.

 Then we have pt stands for point.

1 pt= 1/72th of 1 inch of screen size.

Again, we have px which stands for pixel. It corresponds to the actual size of screen. This is not recommended. 

          Android Graphical Layout

                                                               Snapshot of Android LinearLayout example

Linear layout appears like this on your eclipse as shown in the above snapshot.  When you run the app on the emulator, it should look like the snapshot shown below:

           Output of Android Linear Layout

                                                        Snapshot of Android  LinearLayout on emulator

You might be thinking where is the Java file? Yes, this time Java file is not going to get disturbed because now we are learning designing. If you want to do something like when button is pressed it should do something in return then you need Java coding. We will discuss that in later sections. Now let us move to next layout.

3.4.1.2 Android Table Layout ( Android TableLayout )

          Android table layout                                                        

In this layout, views are grouped as rows and columns. You can see an element saying <TableRow>, this very element is used to do this organization of rows in the table. Just like Linear layout, open your eclipse and create a new project and name it anything as you like. For me, TableLayoutExample will work. Then open the activity_main.xml file and code the following lines into this file and run on the emulator.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <TableRow>
        <TextView
           android:id="@+id/textView1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Name:" />
   
        <EditText
           android:id="@+id/editText1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:ems="10" >
           
           <requestFocus />
        </EditText>
     </TableRow>
     <TableRow
          android:id="@+id/tableRow1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" >
        <Button
          android:id="@+id/button1"
          style="?android:attr/buttonStyleSmall"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="OK" />
     </TableRow>
</TableLayout>

                                                         xml file of  Android TableLayout example

Graphical layout should be similar to the snapshot shown below 

           Android TableLayout example

                                                 Snapshot of  Android TableLayout example

Output on emulator should be as shown below:

          Output of Android emulator

                                                   Snapshot of  TableLayout output on emulator.

3.4.1.3 Android Relative Layout ( Android RelativeLayout )

          Android relative layout      

In this layout, you can position child views with respect to each other or relative to the parent view’s position. Let us take a quick example of this and find out what is this relativity means in terms of layouts. As usual open a project and name it as you like. For me, RelativeLayoutExample is best so let us move with this. Read the attributes carefully, they are relative to each other and self explanatory. Code your xml file as shown below:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name:" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="23dp"
        android:layout_toRightOf="@+id/textView2"
        android:text="Enter your name here"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="55dp"
        android:text="submit" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignRight="@+id/textView1"
        android:layout_marginRight="27dp"
        android:text="cancel" />

</RelativeLayout> 

                                                             xml file of Relativelayout example  

           Snapshot of Android RelativeLayout

                                                        Snapshot of Android RelativeLayout example

Graphical layout should be as shown in snapshot given above. Output on emulator should be as shown in snapshot given below. 

          Android RelativeLayout output as seen on emulator

                                          Android  RelativeLayout output as seen on emulator

3.4.1.4 Android Absolute Layout (AbsoluteLayout)

This scheme allows us to specify the exact location of child element. But its use should be limited as it doesn’t guarantees presentation. Anyways, we should know them so we are. Its use is deprecated nowadays. Just for demonstrating how it was used to code check out the following lines of code. 

          Snapshot of Android AbsoluteLayout example

                           Snapshot of Android AbsoluteLayout example

Since use of absolute layout is deprecated and we have the latest sdk so we don’t have this feature. However a rough idea of output is shown in the embedded figure saying Sample output,

3.4.1.5 Android Frame Layout ( Android FrameLayout)

          Android frame layout        

This layout is used to display a single view. Now I would love to show you a lovely dog. His name is roger.  Check out the xml file I am listing below and you are good to go with it. 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello! I am Roger" />

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1" >
 
       <ImageView 
          android:src="@drawable/roger"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
        />
   </FrameLayout>

                                                               xml file of  Android FrameLayout example

Snapshot of your graphical layout in IDE is as shown below:

           Snapshot of FrameLayout example

                                                     Snapshot of FrameLayout example

Output on emulator is as shown below.

          Snapshot of FrameLayout example on emulator

                                               Snapshot of FrameLayout example on emulator

3.4.1.5 Android Grid Layout ( Android GridLayout)

          Android Grid Layout

 

This layout lists the views of rows and columns in a grid. Try it yourself by following similar steps. And if you don’t end up as you wanted, then don’t worry, we shall have apps in following chapters with grid layout. It is not a very popular layout. There is another way of implementing grids so we would follow that procedure. See you in next sub section. Till then enjoy designing layouts