The Android User Interface and Controls #Article 4

Introduction

If you have created your first Hello world application then you have used one of this layout managers.The linear Layout is the default layout but there sev*eral other layouts that  can used depending on how you want to organise you content in you application.

Choice of which layout to be adopted for a certain activity entirely depends on what content to be displayed in that activity forexample if you dealing with forms hat capture the user data then you can choose from either the Relative layout or Table layout

Each of this layout have different properties and are best suited for certain User interface changes forexample in the landscape mode the ScrowView Layout enables the to scroll through the app.

UI controls are UI/widgets that respond to user actions for example a widget to submit forms that would be a button  to handle that event  and this can be classfied into several catergories like Toggle Button,Radio Button ,Image Button therefore it's all about you the designer to select which UI control to use to respond to what event

Getting Started

Here i will briefly talk about the different Units used in User Interface design of Android.Android supports most of the measurement units including pixels ,cm, but they are the recommended measurement units used by Android to solve issues like muilti-device support because diffferent devices have diffferent screen resolutions ,aspect ratios,screen size  and screen densities therefore it's important to follow the Android guidlines and use the recommended measurement units which include;

1. The device independent pixels(dp or dip)                                                                                          This measurement is usually used for layout and element dimensions  which are stored as strings by the Android system..Therefore it's recommended to have this measurements stored in the dimen folder.Avoid hardcording
2. The Scale independent pixels(sp)                                                                                                       This measurement is used for text.This is recommended by Android because it takes care of user specific requirements foreaxample  for impaired users who customize their devices to display large fonts ,this measurement will dynamically change according to the user settings.

Note:Always use dp or sp,avoid pixels as not every device can have the same measurements in pixels and have your measurements stored in the dimen folder as this will ease your development life cycle incase you want to add certain functionality and target muiltiple devices

UI Layout Types in detail

Some UI controls

                                                                                                                                                 The Toggle Button Widget

Just like it name it's used as switch to turn on and off certain functionality just like ehen you want the user to be able to turn on/off the GPS(Global positioning Service)

 TextView Widget

used to display text with several properties that include;

•  textSize(size of text .NB use scale independent pixels (sp)) 
•  textColor->hexadimensional color value like #000000                                                                      

• type face->e.g monoface and sans are supported                                                                                                                                                                                                                             EditText

• Allows text to be editted   ,the most important property to consider is the Input type property that specifies the data the Edittext widget should expect from the user

•  RatingButtton

•  Incase you want to rate a place or anyother thing then this widget will help with that by providing an array of stastistics to rate from              

Below are some of the supported Layout types supported by Android:

  Note :Each element must atleast have the width and height attributes by using;    

  fill_parent->fill the entire parent

wrap_content->take as much space as an element can use    

match_parent->match with parent                                                                                                

  Tip:To quickly change the properties of an element without turning to the XML code,use the following short cut Right-Click on the element  and select show in property                                                                                   

1. Linear Layout                                                                                                                                  This is the default layout whenever your create an activity,it supports the screen orientation property by supporting either the horizontal or vertical orientation.                                                                  Elements are arranged next to each other.    Below is the XML code with a Linear layout having three widgets  a text view,Edit Text,Toggle Button  and Rating Buttton                                                       
2. XML

     <!-- 
     Linear layout basically the default layout manager ,this enables elements to be arranged next to each other
     
     You can also set the orientation to either vertical or horizontal
      -->
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       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=".RelativeActivity" >
   
     <!--Always use Scale independent pixels(sp) for textSize as this will accomodate screen densities plus other user specification 
     Every Element must atleast have a height and width
     
     Please a void hardcoding Strings and units as this limits your efforts to internationalize you application
      -->
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/hello_world"
           android:textSize="@dimen/size" />
   
       
     <!--
     This widget enables you to edit text .Mainly used for forms
     Some important properties include:
     inputtype->used to describe the type of content to expect from the user;this could be a phone number,email address etc 
      -->
       <EditText
           android:id="@+id/editText1"
           android:layout_width="wrap_content"
           android:layout_height="@dimen/zero"
           android:layout_weight="1"
           android:ems="10"
           android:inputType="textPersonName" >
   
           <requestFocus />
       </EditText>
   
       <CheckBox
           android:id="@+id/checkBox1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="CheckBox" />
   <!-- just like it's name ,it's usually used toggle functionality like hiding/showing an activity when a user performs a certain action -->
       <ToggleButton
           android:id="@+id/toggleButton1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="ToggleButton" />
   
       <RatingBar
           android:id="@+id/ratingBar1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content" />
   
   </LinearLayout>

3. Relative Layout                                                                                                                               This is also a commonly used layout that arranges/aligns elements relative to each other.With this layout the orientation property isn't supported with properties like alignleftOfParent,AlignRightOfParent.below is a psued code of a relative layout  having two Button widgets                                  
   XML

   <!-- Relative layout arranges elements relative to each other
   it doesn't support orientation property 
   commonly used layout manager which can also be nested in other layouts -->
   
   <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=".RelativeActivity" >
   
      <LinearLayout 
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" >
          <RelativeLayout 
           android:id="@+id/lytTitlebar"
           android:layout_width="fill_parent"
           android:layout_height="45dp"
           android:background="@drawable/bg_titlebar"
           android:layout_alignParentTop="true"
           android:paddingLeft="5dp"
           android:paddingRight="5dp">
           <Button 
               android:id="@+id/btnBack"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/back"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentLeft="true"
               android:layout_centerVertical="true"/>
           <TextView 
               android:id="@+id/txtTitle"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:textSize="18sp"
               android:textStyle="bold"
               android:textColor="@color/title_color"
               android:text="@string/register"
               android:layout_centerInParent="true"/>
           
       </RelativeLayout>
       <!-- firstname -->
       <TextView android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="@string/firstName"
           android:paddingLeft="10dip"
           android:paddingRight="10dip"
           android:paddingTop="10dip"
            android:textSize="17sp"
           android:textColor="@color/green"
       />
       
       <!-- firstname input -->
       <EditText android:id="@+id/fname"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:layout_margin="5dip"
           android:layout_marginBottom="15dip"
           android:singleLine="true"
           android:inputType="textPersonName"/>
       
        <!-- lastname -->
       <TextView android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="@string/lastName"
           android:paddingLeft="10dip"
           android:paddingRight="10dip"
           android:paddingTop="10dip"
            android:textSize="17sp"
           android:textColor="@color/green"/>
       
       <!-- lastname input -->
       <EditText android:id="@+id/lname"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:layout_margin="5dip"
           android:layout_marginBottom="15dip"
           android:singleLine="true"
           android:inputType="textPersonName"/>
       
        <!-- username -->
       <TextView android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="@string/username"
           android:paddingLeft="10dip"
           android:paddingRight="10dip"
           android:paddingTop="10dip"
            android:textSize="17sp"
           android:textColor="@color/green"
           />
       
       <!-- username input -->
       <EditText android:id="@+id/uname"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:layout_margin="5dip"
           android:layout_marginBottom="15dip"
           android:singleLine="true"
           android:inputType="text"/>
       
       <!-- password -->
       <TextView android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="@string/password"
           android:paddingLeft="10dip"
           android:paddingRight="10dip"
           android:paddingTop="10dip"
            android:textSize="17sp"
           android:textColor="@color/green"/>
       
       <!-- password input -->
       <EditText android:id="@+id/pass" 
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:layout_margin="5dip"
           android:layout_marginBottom="15dip"
           android:singleLine="true"
           android:inputType="textPassword"/>
       
       
        <!-- address -->
       <TextView android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="@string/address"
           android:paddingLeft="10dip"
           android:paddingRight="10dip"
           android:paddingTop="10dip"
            android:textSize="17sp"
           android:textColor="@color/green"/>
       
       <!-- address input -->
       <EditText android:id="@+id/addr"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:layout_margin="5dip"
           android:layout_marginBottom="15dip"
           android:singleLine="true"
           android:inputType="textPostalAddress"/>
       
        <!-- contact -->
       <TextView android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="@string/contact"
           android:paddingLeft="10dip"
           android:paddingRight="10dip"
           android:paddingTop="10dip"
            android:textSize="17sp"
           android:textColor="@color/green"/>
       
       <!-- contact input -->
       <EditText android:id="@+id/contact"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:layout_margin="5dip"
           android:layout_marginBottom="15dip"
           android:singleLine="true"
           android:inputType="phone"/>
       
       <!-- Button Register -->
       <Button android:id="@+id/btnreg" 
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="@string/submit"/>
       
       
       <!-- Button Cancel -->
       <Button android:id="@+id/btncancel" 
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="@string/cancel"/>
       
   </LinearLayout>
   
   </RelativeLayout>

              Below is a java code that will respond to user event forexample when a user taps/clicks on the button widget;                                                                                                                              
   Java

   package com.code256.uilayouts_controls;
   
   import android.os.Bundle;
   import android.app.Activity;
   import android.view.Menu;
   import android.view.View;
   import android.view.View.OnClickListener;
   import android.widget.Button;
   
   public class RelativeActivity extends Activity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           //getting reference to the layout
           setContentView(R.layout.relativelayout);
           //it's advisable to have this in the oncreate method so that whenever the activity loads it can also load the references
           //getting e reference to the button
           Button button = (Button) findViewById(R.id.btnreg);
           //after getting reference to the button then we can decide what action to perform when the clicks on the button forexample we would love if the user clicks it takes back to the previous activity
       button.setOnClickListener(new OnClickListener() {
           
           @Override
           public void onClick(View v) {
               // TODO Auto-generated method stub
               finish();
           }
       });
       
       }
   
       @Override
       public boolean onCreateOptionsMenu(Menu menu) {
           // Inflate the menu; this adds items to the action bar if it is present.
           getMenuInflater().inflate(R.menu.main, menu);
           return true;
       }
   
   }

4. Table Layout                                                                                                                                   Table Layout is just like the HTML table ,having rows and columns ,this is a very useful layout best suited for forms ,presentation of tabular data below is some Xml code using a table layout .Here am using RadioButton,imageView widget ;just like the Button it will respond to the user actions/events     .  The imageView widget is responsible for displaying graphics and images the folloeing attribute are important for this widget;                                                                                                                scr->this basically locates the grapic or image from the drawable folder                                         
   XML

   <!-- this layout is just like the html table layout.it enables you to create rows have you span several rows 
   it's good when designing tabular data and creating forms 
   am also using radioButtons in this example but don't worry because this work just like the normal button.just like the html radio button only allowing one click -->
   
   
   <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/TableLayout1"
       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=".RelativeActivity" >
   <RelativeLayout 
           android:id="@+id/lytTitlebar"
           android:layout_width="fill_parent"
           android:layout_height="45dp"
           android:background="@drawable/bg_titlebar"
           android:layout_alignParentTop="true"
           android:paddingLeft="5dp"
           android:paddingRight="5dp">
           <Button 
               android:id="@+id/btnBack"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/back"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentLeft="true"
               android:layout_centerVertical="true"/>
           <TextView 
               android:id="@+id/txtTitle"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:textSize="18sp"
               android:textStyle="bold"
               android:textColor="@color/title_color"
               android:text="@string/gallery"
               android:layout_centerInParent="true"/>
       </RelativeLayout> 
      
       
       <ScrollView 
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
              android:fadeScrollbars="true"
           android:layout_below="@+id/lytTitlebar"
           >
           <TableLayout 
       android:layout_width="fill_parent"
       android:layout_height="wrap_content" 
       android:background="@color/background_color"
       android:divider="@color/divider_color"
       >
       
   <TableRow
           android:id="@+id/tableRow1"
         android:layout_width="200dp"
               android:layout_height="200dp"
              android:background="@drawable/button_style"
                android:divider="@color/background_color"
           >
     
   
           <ImageView
               android:id="@+id/imageView911"
        
               android:layout_margin="@dimen/Margin"
               android:src="@drawable/apokalodge"
                      android:layout_width="150dp"
               android:layout_height="97dp"
                  android:padding="@dimen/normal_padding"
               android:background="@drawable/button_style"
                android:contentDescription="@string/app_name"
                android:layout_gravity="left"/>
   
           <ImageView
               android:id="@+id/imageView311"
                    android:layout_width="150dp"
               android:layout_height="97dp"
                  android:padding="@dimen/normal_padding"
               android:background="@drawable/button_style"
                android:contentDescription="@string/app_name"
               android:src="@drawable/eminpasha"
               android:layout_gravity="right" />
   
       </TableRow>
       <RelativeLayout 
           android:id="@+id/lytTitlebar12"
           android:layout_width="fill_parent"
           android:layout_height="45dp"
           android:background="@drawable/bg_titlebar"
           android:layout_gravity="center_vertical"
           android:paddingLeft="5dp"
           android:paddingRight="5dp">
           <TextView
               android:id="@+id/text1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/ApokaLodge"
               android:textColor="@color/background_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentLeft="true"
               android:layout_centerVertical="true"/>
                 <TextView
               android:id="@+id/text2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/eminipasha"
               android:textColor="@color/background_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentRight="true"
               android:layout_centerVertical="true"/>
       </RelativeLayout>
   <RelativeLayout 
           android:id="@+id/lytTitlebar1"
           android:layout_width="fill_parent"
           android:layout_height="45dp"
           android:background="@drawable/bg_titlebar"
           android:layout_gravity="center_vertical"
           android:paddingLeft="5dp"
           android:paddingRight="5dp">
           <RadioButton 
               android:id="@+id/radio1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/like"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentLeft="true"
               android:layout_centerVertical="true"/>
                 <RadioButton 
               android:id="@+id/radio2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/like"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentRight="true"
               android:layout_centerVertical="true"/>
       </RelativeLayout>
           <TableRow
           android:id="@+id/tableRow2"
         android:layout_width="150dp"
               android:layout_height="150dp"
             android:background="@drawable/button_style"
           >
     
   
           <ImageView
               android:id="@+id/imageView9"
                    android:layout_width="150dp"
               android:layout_height="97dp"
                  android:padding="@dimen/normal_padding"
               android:background="@drawable/button_style"
                android:contentDescription="@string/app_name"
               android:src="@drawable/cloud" 
                android:layout_gravity="left" 
                  android:layout_margin="@dimen/Margin"/>
   
           <ImageView
               android:id="@+id/imageView3"
                    android:layout_width="150dp"
               android:layout_height="97dp"
                  android:padding="@dimen/normal_padding"
               android:background="@drawable/button_style"
                android:contentDescription="@string/app_name"
               android:src="@drawable/skype"
                android:layout_gravity="right" 
                  android:layout_margin="@dimen/Margin" />
   
       </TableRow>
        <RelativeLayout 
           android:id="@+id/lytTitlebar127"
           android:layout_width="fill_parent"
           android:layout_height="45dp"
           android:background="@drawable/bg_titlebar"
           android:layout_gravity="center_vertical"
           android:paddingLeft="5dp"
           android:paddingRight="5dp">
           <TextView
               android:id="@+id/text3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/cloud"
               android:textColor="@color/background_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentLeft="true"
               android:layout_centerVertical="true"/>
                 <TextView
               android:id="@+id/text4"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/paraa"
               android:textColor="@color/background_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentRight="true"
               android:layout_centerVertical="true"/>
       </RelativeLayout>
       <RelativeLayout 
           android:id="@+id/lytTitlebar11"
           android:layout_width="fill_parent"
           android:layout_height="45dp"
           android:background="@drawable/bg_titlebar"
           android:layout_gravity="center_vertical"
           android:paddingLeft="5dp"
           android:paddingRight="5dp">
           <RadioButton 
               android:id="@+id/radio3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/like"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentLeft="true"
               android:layout_centerVertical="true"/>
                 <RadioButton 
               android:id="@+id/radio4"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/like"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentRight="true"
               android:layout_centerVertical="true"/>
       </RelativeLayout>
         <TableRow
           android:id="@+id/tableRow3"
         android:layout_width="150dp"
               android:layout_height="150dp"
           android:background="@drawable/button_style"
           >
     
   
           <ImageView
               android:id="@+id/imageView10"
                   android:layout_width="150dp"
               android:layout_height="97dp"
                  android:padding="@dimen/normal_padding"
               android:background="@drawable/button_style"
                android:contentDescription="@string/app_name"
               android:src="@drawable/e"
                android:layout_gravity="left" 
     android:layout_margin="@dimen/Margin"/>
   
           <ImageView
               android:id="@+id/imageView11"
                   android:layout_width="150dp"
               android:layout_height="97dp"
                  android:padding="@dimen/normal_padding"
               android:background="@drawable/button_style"
                android:contentDescription="@string/app_name"
               android:src="@drawable/f" 
                android:layout_gravity="right"
                  android:layout_margin="@dimen/Margin" />
   
       </TableRow>
            <RelativeLayout 
           android:id="@+id/lytTitlebar1278"
           android:layout_width="fill_parent"
           android:layout_height="45dp"
           android:background="@drawable/bg_titlebar"
           android:layout_gravity="center_vertical"
           android:paddingLeft="5dp"
           android:paddingRight="5dp">
           <TextView
               android:id="@+id/text5"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/TouristHotel"
               android:textColor="@color/background_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentLeft="true"
               android:layout_centerVertical="true"/>
                 <TextView
               android:id="@+id/text6"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/rwenzori "
               android:textColor="@color/background_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentRight="true"
               android:layout_centerVertical="true"/>
       </RelativeLayout>
       <RelativeLayout 
           android:id="@+id/lytTitlebar111"
           android:layout_width="fill_parent"
           android:layout_height="45dp"
           android:background="@drawable/bg_titlebar"
           android:layout_gravity="center_vertical"
           android:paddingLeft="5dp"
           android:paddingRight="5dp">
           <RadioButton 
               android:id="@+id/radio5"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/like"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentLeft="true"
               android:layout_centerVertical="true"/>
                 <RadioButton 
               android:id="@+id/radio6"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/like"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentRight="true"
               android:layout_centerVertical="true"/>
       </RelativeLayout>
         <TableRow
           android:id="@+id/tableRow4"
         android:layout_width="150dp"
               android:layout_height="150dp"
              android:background="@drawable/button_style"
           >
     
   
           <ImageView
               android:id="@+id/imageView91"
                  android:layout_width="150dp"
               android:layout_height="97dp"
                  android:padding="@dimen/normal_padding"
               android:background="@drawable/button_style"
                android:contentDescription="@string/app_name"
               android:src="@drawable/restaurant_3"
                android:layout_gravity="left"  
                  android:layout_margin="@dimen/Margin"/>
   
           <ImageView
               android:id="@+id/imageView31"
              android:layout_width="150dp"
               android:layout_height="97dp"
                  android:padding="@dimen/normal_padding"
               android:background="@drawable/button_style"
                android:contentDescription="@string/app_name"
               android:src="@drawable/restaurant_2"
                android:layout_gravity="right"  
                  android:layout_margin="@dimen/Margin"/>
   
       </TableRow><RelativeLayout 
           android:id="@+id/lytTitlebar1111"
           android:layout_width="fill_parent"
           android:layout_height="45dp"
           android:background="@drawable/bg_titlebar"
           android:layout_gravity="center_vertical"
           android:paddingLeft="5dp"
           android:paddingRight="5dp">
           <RadioButton 
               android:id="@+id/radio7"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/like"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentLeft="true"
               android:layout_centerVertical="true"/>
                 <RadioButton 
               android:id="@+id/radio8"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingTop="5dp"
               android:paddingBottom="5dp"
               android:paddingLeft="10dp"
               android:paddingRight="10dp"
               android:text="@string/like"
               android:textColor="@color/title_color"
               android:textSize="14sp"
               android:textStyle="bold"
               android:background="@drawable/button_style"
               android:layout_alignParentRight="true"
               android:layout_centerVertical="true"/>
       </RelativeLayout></TableLayout></ScrollView>
   
   </TableLayout>

                                                                                                                                                    Here is the java code to respond to the events of the users  ,here am implementing  the OnClickListner to boast performance of the application because i have many RadioButtons that i can respond to therefore instead of creating a new instance for each     RadioButton it's better you implement the onclick listner and use a switch or if-else statement to determine which action to be performed when the Radio Button is clicked                                                                              
   Java

   package com.code256.uilayouts_controls;
   
   import android.app.Activity;
   import android.content.Intent;
   
   import android.os.Bundle;
   import android.view.Menu;
   import android.view.View;
   import android.view.View.OnClickListener;
   import android.widget.RadioButton;
   //since we have alot of radio buttons .it's better to implement the OnclickListner so that we don't have to create a new instance of the onclick every time
   //this boasts the application performance
   public class TableActivity extends Activity implements OnClickListener {
   //intaialize the different radio buttons
       RadioButton radio1,radio2,radio3,radio4,radio5,radio6,radio7,radio8;
       
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.tablelayout);
           
           //getting reference to the radio buttons
           radio1= (RadioButton)findViewById(R.id.radio1);
           radio2= (RadioButton)findViewById(R.id.radio2);    
           radio3= (RadioButton)findViewById(R.id.radio3);
           radio4= (RadioButton)findViewById(R.id.radio4);
           radio5= (RadioButton)findViewById(R.id.radio5);    
           radio6= (RadioButton)findViewById(R.id.radio6);
           radio7= (RadioButton)findViewById(R.id.radio7);
           radio8= (RadioButton)findViewById(R.id.radio8);
           //setting the onClickListner to the current event handler
           radio1.setOnClickListener(this);
           radio2.setOnClickListener(this);
           radio3.setOnClickListener(this);
           
           radio4.setOnClickListener(this);
           radio5.setOnClickListener(this);
           radio6.setOnClickListener(this);
           radio7.setOnClickListener(this);
           radio8.setOnClickListener(this);
               // button click event
   
       }
   
       @Override
       public boolean onCreateOptionsMenu(Menu menu) {
           // Inflate the menu; this adds items to the action bar if it is present.
           getMenuInflater().inflate(R.menu.main, menu);
           return true;
       }
   
       @Override
       public void onClick(View v) {
           // we shall a switch statement to determine what to perform when a certain button is clicked
           switch (v.getId()) {
           case R.id.radio1:
       Intent intent = new Intent(getApplicationContext(),RelativeActivity.class);
       startActivity(intent);
               break;
           case R.id.radio2:
               Intent intent1 = new Intent(getApplicationContext(),LinearActivity.class);
               startActivity(intent1);
           
               break;
           case R.id.radio3:
               Intent intent11 = new Intent(getApplicationContext(),Listview.class);
               startActivity(intent11);
           
           break;
           case R.id.radio4:
               Intent intent111 = new Intent(getApplicationContext(),RelativeActivity.class);
               startActivity(intent111);
           break;
           case R.id.radio5:
               Intent intent1111 = new Intent(getApplicationContext(),RelativeActivity.class);
               startActivity(intent1111);
           break;
           case R.id.radio6:
               
               Intent intent11111 = new Intent(getApplicationContext(),RelativeActivity.class);
               startActivity(intent11111);
               break;
           case R.id.radio7:
               Intent intent111111 = new Intent(getApplicationContext(),RelativeActivity.class);
               startActivity(intent111111);
       
               break;
           case R.id.radio8:
               Intent intent1111111 = new Intent(getApplicationContext(),RelativeActivity.class);
               startActivity(intent1111111);
           break;
           
   
           default:
           finish();
               break;
           }
   
           
       }
   
   }

5. GridView Layout                                                                                                                              GridView layout is just like the table layout though it's not commonly used but it also aligns elements in a grid/tabular arrangement just like the table layout.you can use the table layout for that example
6. ListView Layout                                                                                                                               Atleast every application at a certain point will need this layout forxample dislaying data from a database or an array;this layout displays data in a list and can be nested in other layouts .This is  the XML code to display a ListView                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
   XML

   <!-- most application will have to use this layout especially when displaying data from a database or an arrray
   this layout provides a mechanism of displaying such data in list form -->
   
   <ListView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@id/List"
       android:layout_width="match_parent"
       android:layout_height="match_parent" >
   
   </ListView>

                                                                                                                                                                                                                                                                                                       This is the java code to display the listView   ,you need to use  an adapter to organize the content in the list view,we have it extend the ListActivity                                                                                    
   Java

   package com.code256.uilayouts_controls;
   
   import android.R;
   import android.app.ListActivity;
   import android.os.Bundle;
   import android.view.Menu;
   import android.widget.ArrayAdapter;
   
   public class Listview extends ListActivity  {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.listview);
           //setting up the adapter..using the android inbuilt resource to organize the data
           setListAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,getResources().getStringArray(R.array.cities)));
       }
   
       @Override
       public boolean onCreateOptionsMenu(Menu menu) {
           // Inflate the menu; this adds items to the action bar if it is present.
           getMenuInflater().inflate(R.menu.main, menu);
           return true;
       }
   
   }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   To respond to user clicks when use the onItemClick event handler                                                      
   Java

   getListAdapter();
   ListView list = (ListView) findViewById(R.id.list);
   list.setOnItemClickListener(new OnItemClickListener() {
   
       @Override
       public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
               long arg3) {
           // TODO Auto-generated method stub
   
       }
   });
   

                                                                                                                                                                                                                                 
7. Frame Layout                                                                                                                                  This layout has elements overlapping each other ,it's not commonly used ,it only used when you want to hide and display certain functionality when an event occurs
8. Absolute Layout                                                                                                                              Nolonger supported by Android because the bugs it causes while rendering

Points of Interest

• In the landscape oriention i would advise you to use the ScrowView layout to display certain unseen parts on the screen
• You can't never nest or have two ScrowView in one activity

In pictures

Table Layout

ListView

Relative Layout