Click here to Skip to main content
13,151,791 members (58,086 online)
Click here to Skip to main content
Add your own
alternative version

Stats

10.3K views
12 bookmarked
Posted 9 Aug 2014

The Android User Interface and Controls #Article 4

, 9 Aug 2014
Rate this:
Please Sign up or sign in to vote.
Android UI Layouts and Controls

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.   <!-- 
      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                                  
    <!-- 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;                                                                                                                              
    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                                         
    <!-- 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                                                                              
    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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
    <!-- 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                                                                                    
    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                                                      
    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

Table Layout

ListView

Relative Layout

Relative Layout

Relative Layout

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
SuggestionMeaning of "dip" Pin
Geert Vancompernolle18-Feb-15 6:53
memberGeert Vancompernolle18-Feb-15 6:53 
GeneralThanks for the entry! Pin
Kevin Priddle27-Aug-14 6:19
staffKevin Priddle27-Aug-14 6:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170924.2 | Last Updated 9 Aug 2014
Article Copyright 2014 by henry sentio kauta
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid