Tag Archives: Android UI

16
Aug

Android UI Design Pattern – Quick Action Bar

Android, Mobile Application Development August 16th, 2011

So far with all the previous blogs we have been quite familiar to various aspects like Dashboard and Action bar for a user friendly Interface for Android mobile application.

In this post we shall discuss about the Quick Action design pattern in more detail with which you will be  have a clear understanding of the significant parts of a typical user friendly interface.

Introduction:

As previously mentioned, Quick Actions are basically actions/functions in a popup bar that are triggered by specific visual elements/buttons/items on the screen. Quick Actions are used to display contextual actions typically used in list views but not limited to it. You can imagine a phone-book or contact list on the phone. Now, there are certain set of actions that will be common to all contacts in the views like; make a call, send message, edit contact or may be even transfer files by  Email, Bluetooth etc. Basically these functions that are common to items in a context can be put in the Quick Action bar. This way the screen is uncluttered and simple and more importantly we needn’t sacrifice on the actions needed.

After having learnt about  detailed source code for an Action bar, next let us begin with the creation of the Quick Actions bar. We will make this short and simple, so just follow on…

To begin with, the demo snaps look like this:

Step 1. Create Actionable Items

The below code snippet is used to create an actionable item i.e. the actions you would want to place in the quick action bar. Creating an actionable item involves specifying the title, setting an icon that represents the item which will help you relate to the action, and finally set a Listener for the action. The term itself is self-explanatory. Yes, it is used to determine the action to be performed when clicked or pressed. As far as the icon /image goes, it can be easily set by referring to it from the resources as is the case with any external resource set in android which you would aware of, I am most certain.


final QuickActionIcons edit = new QuickActionIcons();;

 edit.setTitle("Edit");
 edit.setIcon(getResources().getDrawable(R.drawable.edit));
 edit.setOnClickListener(new OnClickListener()
 {
 public void onClick(View v)
 {
 Toast.makeText(QuickActionSampleAppActivity.this,"Edit Contact",Toast.LENGTH_SHORT).show();
 }

 });]

The above actions can be repeated depending upon the number of actions to be put in.

With this, you have successfully created your actions. Next we shall create the quick action dialog that should be displayed on clicking some button or tab.

Step 2: Create Quick Action Dialog

This part is even simpler. Like in this example, when an item in the list view is clicked / pressed, a new quick action bar/dialog is created. Then all the actionable items that you have created in the previous step are appended one by one to the quick action bar. After this you simply have to specify the animation style i.e. how do you want the dialog to be displayed on screen.


resultPane.setOnItemClickListener(new OnItemClickListener() 
    {
		public void onItemClick(AdapterView<?> parent, View view, int position, long id)
		{
			QuickActionBar qab = new QuickActionBar(view);
			
			qab.addItem(edit);
			qab.addItem(call);
			qab.addItem(send_data);
			qab.setAnimationStyle(QuickActionBar.GROW_FROM_LEFT);
			
			qab.show();
		}
    });

And then finally you display the created quick action bar.

Step 3: Create Animation Files

All animations that you specify will have to be supported by corresponding XML files that allow the animation to play out. These XML files will form a part of your resources. It‘s really not that difficult to create these animation files. Have a look at a sample below.

<strong></strong>

<set xmlns:android="http://schemas.android.com/apk/res/android">
 <scale
 android:fromXScale="0.3" android:toXScale="1.0"
 android:fromYScale="0.3" android:toYScale="1.0"
 android:pivotX="50%" android:pivotY="100%"
 android:duration="@android:integer/config_shortAnimTime"
 />
 <alpha
 android:interpolator="@android:anim/decelerate_interpolator"
 android:fromAlpha="0.0" android:toAlpha="1.0"
 android:duration="@android:integer/config_shortAnimTime"
 />
</set>


Step 4: Create Layouts for actionable Items and Quick Action Bar

Some additional things that you would have to do are create layouts for the quick action dialog and the actionable items. It’s as simple as the layouts that you are so used to creating in android day in and day out. Go on and have a look at the snippet for the quick action items any way.


<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_vertical|center_horizontal"
 android:paddingTop="0dip"
 android:paddingBottom="0dip"
 android:paddingLeft="20dip"
 android:paddingRight="20dip"
 android:clickable="true"
 android:background="@drawable/button_state">

 <ImageView
 android:id="@+id/image"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"/>

 <TextView
 android:id="@+id/caption"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:gravity="center_vertical"
 android:textSize="12sp"
 android:textColor="#ff000000"/>

</LinearLayout>

You may try out the quick action dialog layout by yourself. If you’re stuck you can refer to the complete source code on Quick Action that is available anyway.

By following these 4 simple steps , you are all set and ready to have quick action dialogs zooming around in your app. So go on and try them out.

With a few design guidelines on User Friendly Interface for Android followed by:

I am most certain that you can now design and develop an efficient interface. Should you have any questions on any topic, I would be pleased to answer them.

03
Aug

Android UI Design Pattern – Action Bar

Android, Mobile Application Development August 3rd, 2011

The previous posts on User Interface tips and Dashboard design pattern gave you a fair idea on how to get going with your User Interface.

In this post, we shall look at the Action Bar design pattern in more detail which will enable you to better understand and execute Action Bars on your user interface.

Introduction:

As previously mentioned, action bar is a bar placed atop the screen that houses all the essential actions used in an application. It contains only those actions that are common to the entire application, and not activity specific ones. It is very commonly used in most applications, some even before it was introduced as a design pattern.

The Twitter Application for Android is a prime example. It has an action bar that provides actions like refresh, search, messages etc. The Facebook app is another common app that uses this pattern. Imagine if every app had an action bar, how useful and user friendly it would be. Navigation can also be added there. For now, this should suffice. Let us take a look at how do you actually go about creating it. Of the 3 patterns this is the easiest pattern to implement. So let us try and implement this step by step in the same manner as described in Dashboard Design pattern. Please refer -Xoriant Source Code for Android Dashboard UI Pattern

Take a look at the images below :

Follow these few simple steps to get going with your Action Bar:

Step 1: Create Action Bar Class

First of all, you need to create an abstract base class that houses all the common functionalities like the lifecycle method and the” onClick” handlers similar to the dashboard. In this, “onClick” handlers refer to actions that need to be triggered when the actions on the action bar are clicked. This should be pretty simple, especially after doing it for the dashboard. But as always the sample snippet is available for your reference.

public abstract class ActionBarAppActivity extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);
    }

    public void onSearch(View v)
    {
    	startActivity (new Intent(getApplicationContext(), SearchActivity.class));
    }

    public void onHome (View v)
    {
    	return2Home(this);
    }

    public void return2Home(Context context)
    {
        final Intent intent = new Intent(context, HomeActivity.class);
        intent.setFlags (Intent.FLAG_ACTIVITY_CLEAR_TOP);
        context.startActivity (intent);
    }
}

Step 2: Create Layout For Action Bar

You have got your base class ready. That means half the job is done. Now simply create the layout for the home screen along with the action bar. Remember the title bar will not be present in the application. It will be replaced by the action bar. The layout must include an icon for home, the title of the current view and other options to be displayed on the bar. Don’t include more than 3 options as it looks cluttered. Creating layouts by now won’t be a hurdle. All you need is a couple of image views and text views. The necessary icons/images may be stored in the resources and referred to in the usual way. With the hints I have given you the layout shouldn’t take long to make. Anyhow a sample snippet is always there at your disposal. Take a look at the sample above. Just to remind you; it is only a snippet not the entire code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
			  android:orientation="horizontal"
			  android:layout_width = "fill_parent"
			  android:layout_height="wrap_content"
			  android:gravity="right"
			  android:layout_gravity="right">

			   <ImageButton style="@style/TitleBarOperation"
            			   android:src="@drawable/about_click"
            			   android:onClick="onAbout"
            			   android:layout_marginTop = "6dip"
            			   android:layout_marginBottom = "4dip"
            			   android:layout_marginLeft="5dip"
            			   android:background="@null"
            			   android:layout_marginRight="5dip"/>

			  <ImageView android:layout_width="1px"
			   android:layout_height="fill_parent"
			   android:background="@drawable/separator"
			   android:layout_marginLeft = "5dip"
			   android:layout_marginRight="5dip"
			   />

			  <ImageButton style="@style/TitleBarOperation"
            			   android:src="@drawable/search"
            			   android:layout_marginTop = "6dip"
            			   android:layout_marginBottom = "4dip"
            			   android:onClick="onSearch"
            			   android:background="@drawable/home_bg"
            			   android:layout_marginRight="5dip"/>
	</LinearLayout>

Step 3: Append Action Bar to all Activities and create layouts (Modify action bar in case of search)

Now all that remains is replicating the same layout of the home screen action bar across all the other activities. That is simple replication of the code. Also generate the layout for the remaining activities. In case of the search activity, only a slight modification will be needed to the action bar to include a search box as well. That is as simple as appending an edit text to the layout. Have a look at the code snippet below.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
			  android:orientation="horizontal"
			  android:layout_width = "wrap_content"
			  android:layout_height="wrap_content"
			  android:gravity="left|center_vertical"
			  android:layout_gravity="left">

			  <ImageButton style="@style/TitleBarOperation"
            			   android:src="@drawable/home_def"
            			   android:background="@drawable/home_bg"
            			   android:onClick="onHome"
            			   android:layout_marginTop = "5dip"
            			   android:layout_marginRight="5dip"
            			   android:paddingBottom="3dip"
            			   android:layout_marginLeft = "4dip"
            			   android:layout_marginBottom = "4dip"
            			   android:layout_gravity="center"/>

              <ImageView android:layout_width="1px"
			   android:layout_height="fill_parent"
			   android:background="@drawable/separator"
			   android:layout_marginRight="5dip"/>

              <TextView style="@style/TitleBarText"
              			android:id = "@+id/title_text"
              			android:text = "Action Bar Sample"
              			/>

              <ImageView android:layout_width="1px"
			   android:layout_height="fill_parent"
			   android:background="@drawable/separator"
			   android:layout_marginLeft="5dip"
			   />

              <EditText android:id="@+id/input_text"
              			android:layout_height="fill_parent"
              			android:layout_width="100dip"
              			android:layout_marginTop="2dip"
              			android:layout_gravity="center"
              			android:textSize="10sp"
              			android:text = "search here..."
              			android:layout_marginLeft="5dip"
              			android:layout_marginRight="5dip"/>

			<ImageView android:layout_width="1px"
			   android:layout_height="fill_parent"
			   android:background="@drawable/separator"
			   android:layout_marginLeft="2dip"/>

Step 4: Modifying styles.xml

With this, your Action Bar is ready. All that remains is adding a few lines of code to your styles.xml file. This style must be appended to the manifest as a theme in the application tag. Basically these lines specify that there will be no title bar in the application, and instead will be overlaid by our own custom action bar. See the sample code to understand.

<style name="Theme.D1" parent="android:style/Theme.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

We have successfully implemented the Action Bar by following these 4 simple steps. Now you can create your very own action bar with actions of your choice. With this we have completed 2 of  the 3 design patterns. The third pattern will soon follow. Only if could imagine how attractive your UI would be if you were to use all 3 patterns in an app. Hopefully you have understood and enjoyed learning these patterns as much as I  am pleased to share them.

Source Code

Should you require full source code for Action Bar, please refer Xoriant-Source Code for Android Action Bar.Like always you can leave your comments here and I will look forward to answering them.

There will be the next blog on design patterns for Quick Actions soon. So watch out for the space to complete your User Interface with third and final design pattern!!

28
Jul

Android UI Design Pattern – Dashboard

Android, Mobile Application Development July 28th, 2011

The earlier post here has covered the importance and the basics of developing a user friendly UI, taking this further we will be presenting to you a detailed view of the design patterns discussed. The following post will cover the ‘Dashboard ‘ design pattern along with a step by step process to help you develop a dashboard yourself. The code snippets attached will allow you to learn and build the dashboard in no time.

Introduction:

Trust me when I say it’s too easy. Have you seen the Facebook application for Android? You will see the home screen has image icons for all major features of the application like messages, wall posts, friends, albums etc. This is exactly what a dashboard is. You might have actually used this before without even knowing it is a design pattern. The dashboard lets you highlight key/new features and provide easy navigation to various parts of the app. A detailed description of the same was given in my blog on User Interface Design Tips which I trust you would have read. Even if you haven’t, I would suggest going back to that article and reading it to get a clear picture of the dashboard design pattern. This will make this article a better read for you as it provides simple steps for creating your very own dashboard. So let’s begin!!!

A typical dashboard for any application may look like this:

Full source code for this sample application is available on xoriant’s public github repo - https://github.com/github-xoriant/Android-Dashboard-UI-Pattern

Listed are a few steps for creating a typical dashboard with precise detailing. Follow them to have a clear understanding

Step 1: Create Home Screen

Follow these codes to get your Home Screen in simplest possible way.

<LinearLayout android:orientation="vertical"
      				  android:layout_width="wrap_content"
      				  android:layout_height="wrap_content"
      				  android:layout_marginTop="60dip"
      				  android:layout_marginLeft="40dip" android:layout_marginBottom="40dip">

        	<ImageView android:id="@+id/photoAlbum"
            			 style="@style/Home"
            			 android:onClick="onPhotoAlbum"
           				 android:src="@drawable/photoalbum"/>

        	<TextView style="@style/HomeText"
        			  android:id="@+id/ph1"
        			  android:text="@string/photoAlbum"
        		  	  android:layout_marginTop="10dip"/>
</LinearLayout>
<LinearLayout style="@style/TitleBar"
    			  android:id="@+id/layout1">

       <ImageView style="@style/TitleBarLogo"
       			  android:id="@+id/img1"
                  android:src="@drawable/dashboard"
                  android:onClick="onHome"
            	  android:layout_marginTop = "5dip"
            	  android:layout_marginRight="5dip"
            	  android:layout_marginLeft="5dip"
            	  android:layout_marginBottom = "5dip"
            	  android:paddingBottom = "5dip"
            	  android:background="@null"
            	  android:layout_gravity="center"
            	  android:paddingLeft="5dip"
            	  android:paddingRight="7dip" />

        <ImageView android:layout_width="1px"
        		   android:layout_height="fill_parent"
        		   android:id="@+id/sep"
			       android:background="@drawable/separator"
			       android:layout_marginRight="7dip"
			   />

        <TextView style="@style/TitleBarText"
        		  android:id="@+id/tv1"
        		  android:paddingLeft = "8dip"
        		  android:text="@string/home"/>
</LinearLayout>

The first step is to create a simple layout for the home screen that will house the image buttons. As the name itself says these are simply buttons, which are represented by icons/images present in the resources folder. The layout must have a custom title bar at the top that displays the current location/screen that the user is on, along with a straight link to reach the home screen or the dashboard. All you have to use is the “onClick” attribute of the image view to direct the user to the respective location. The layout is very simple, and all you require is basic knowledge of layout creation which you must be an expert on by this time!!!  Anyway to make it easy have a look at the code snippet for creating an image view for the image icon and the title bar given above. Keep in mind this has to be done in a proper layout.

Step 2:Create Dashboard Abstract Class

Follow these codes to create your own Dashboard Abstract Class.

public abstract class DashboardAppActivity extends Activity
{
    /** Called when the activity is first created. */
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
    }

    //Lifecycle Methods

    //App Click Methods

    public void onSearch(View v)
    {
    	startActivity (new Intent(getApplicationContext(), SearchActivity.class));
    }

    public void onAbout(View v)
    {
    	startActivity (new Intent(getApplicationContext(), AboutActivity.class));
    }

    public void return2Home(Context context)
    {
        final Intent intent = new Intent(context, HomeActivity.class);
        intent.setFlags (Intent.FLAG_ACTIVITY_CLEAR_TOP);
        context.startActivity (intent);
    }

    public void onHome (View v)
    {
    	return2Home(this);
    }
}

By now you will have your home screen ready with you. Now we just need to define the “On Click” handlers that will trigger the necessary action which could be starting a new activity or simply a toast. For this purpose all you need to do is simply define an abstract class, that will contain all the common code like lifecycle methods, On Click handlers for the icons on the dashboard and the title bar(home) as well. In our app we will have to define the handlers to redirect the user to new activities associated with the appropriate image icon. Once done, all your other activities in the application that have representations on the home page will inherit this abstract class. It’s very simple and I am pretty sure you can do this on your own. Just in case, a sample code snippet is available at your disposal as always!!!

Step 3:Create Activities and Layouts

Following are a few codes to help you create your Activities and Layouts.

public class AboutActivity extends DashboardAppActivity
{
	public void onCreate(Bundle savedInstanceState)
	{
	    super.onCreate(savedInstanceState);

	    setContentView (R.layout.about);
	    TextView tv = (TextView) findViewById (R.id.title_text);
	    if (tv != null)
	    {
	    	tv.setText(getTitle());
	    }
	}
}

So now your Dashboard is nearly done. All you need to do is create the activities for all functions that you have listed in the dashboard. Along with the activities you will need the XML Layouts as is the case with any basic activity in Android. These activities must extend the dashboard abstract class. Also, you need to write a few lines of code to display the name of the activity in the title bar.  You can have a look at the sample code given above.

Step 4:Understanding Styles

Finally, refer to the below given codes to Understand Styles.

<style name="TitleBar">
        <item name="android:id">@id/title_container</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">45dip</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">@color/title_background</item>
    </style>

    <style name="TitleBarOperation">
        <item name="android:layout_width">45dip</item>
        <item name="android:layout_height">fill_parent</item>
    </style>

    <style name="TitleBarLogo">
        <item name="android:id">@id/title_logo</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">fill_parent</item>
 </style>

So now your dashboard is finally up and running.  Something that you will come across while going through the code is the regular use of styles. These styles are nothing new, and are very similar to style sheets used for  developing web pages. These styles have been defined in the styles.xml file, which is then referred in the app using their ids. A sample of the styles.xml file is given above.

So 4 simple steps and you have your dashboard set up. Now that was unbelievably easy as I had said. Hopefully this tutorial would have provided all the assistance that was required to create your very own creative dashboard.

Source Code

If there are still any problems you always have the complete source code of the app to fall back on Xoriant’s git hub repository. Xoriant- Source code for Android Dashboard UI Pattern

Also you can post your comments here and I will be more than happy to answer them.

I will soon be writing about yet another effective and easy design pattern, “The Action Bar” in my next blog. But till then keep experimenting with your dashboards!!!!

20
Jul

Android – UI Design Guidelines

Android, Mobile Application Development July 20th, 2011

The user interface plays one of the most important roles in determining how successfully you can attract and retain the users by making the UI easy to use, efficient and enjoyable. With decision making being increasingly influenced by the online medium, it’s scope is extended to mobile internet. So, it is required to enhance the user experience by developing user friendly interfaces for the apps on the go.

We all are well aware of what all features will be available on the mobile version of a product at hand.  But we are usually not sure about how to arrange them on screen(s), or decide on what framework controls to use to optimize the full potential of a particular product feature. At the end, the most important thing that must not be lost in the process is the simplicity, elegance and the vision, which invariably determines the success or failure of the application i.e. the application rank  in the market(read: popularity).

A good user experience is critical to any application, more so for mobile applications. A good UI will lead to better quality and user experience, eventually translating to popularity and profits. In such a scenario where the users are of utmost consideration in the design and planning of your application, a clean user friendly, simple and yet an innovative UI might just turn a whole lot of users to your application.  Doesn’t it sound appealing as to how something as simple as the aesthetics of an application can do?

Now, this is what we call as “Need of the hour”-But here comes the problem, does anyone know – what is a good UI? How should it look? What should it do? What should it not do, not contain!!!

In such a scenario where you know the problem but not the apt solution, it is always good to have a quick research on how others  got it right.  Abstraction of the problem statement and its respective solution when accepted by a community becomes a pattern. Earlier we had Design patterns for solving design problems of application architecture. “Evolution happened in UI” and now we have a similar set of patterns for the UI. Patterns have emerged as a natural by-product of the design process. Like Software Design Patterns, they too provide a solution to a common/recurring problem. Developing a good and an effective UI requires usage and understanding of these Design Patterns. The best of applications, , are focusing on the use of these design patterns including Twitter Apps, Facebook apps etc.

In this article I shall mainly be discussing these design patterns along with their applications and advantages in use for Android applications and in subsequent ones we shall have a look on how to go about actually creating them.

Dashboard

It has been used in applications even before it was officially introduced as a design pattern. For example, Facebook application has been providing a dashboard of its key functions before it was officially recognized as a design pattern. The Dashboard can be used in apps to highlight the key features of the application. In essence, it is an introduction to the application.  It can be used to reveal new content and capabilities to the user. The dashboard typically occupies the full screen to ensure that it stays out of the way, i.e. the user’s attention is not diverted to any other aspect of the screen/app. The Dashboard may be organized as:

  • Accounts
  • Features
  • Categories

The secondary functionality may be reserved for the Menu options. Thus by making the most common/important operations visible, it ensures that the right things are made visible to the user.

The Good

  • Highlight key features to user
  • Provide one stop access to all the major functions
  • Draw user attention to new capabilities or features introduced
  • Easy navigation around the app.

The Bad

  • All features cannot be represented on the dashboard
  • Some lesser known features not represented, may not get the desired user attention
  • Some represented features may not actually interest user, leading to loss in popularity.

Quick Actions

Quick Actions are basically actions/functions in a popup bar that are triggered by specific visual elements/buttons/items on the screen. They have minimal disruptive influences on the screen context. Quick actions ensure that the screen is not cluttered too much with icons and buttons, and at the same time these options are available to the user only when required. They are very straightforward, can be fast and fun to use. Only the most important and obvious options must be presented in the quick action view. When Items have competing internal options, quick items are typically used. In case of contexts that can/may have multiple selections, quick actions must not be used.

The Good

  • Uncluttered screen, free of too many icons and buttons
  • Minimal disruptive influence on the screen
  • Ensures that key functions can be present when needed
  • All operations/functions common to multiple items on a given screen can be placed in quick action bars.

The Bad

  • It cannot be used if context allows multiple options to be selected at once
  • Operations in the quick action bar are specific to one activity only.

Action Bar

The Action bar is typically located at the top of the screen, used to provide support for all the operations that are frequently used in the application and common to all aspects of the application. Navigation options are also provided in the action bar. It may include a home option to return to the dashboard activity or the main screen. It typically replaces the Title bar in an application. The action bar may be used to bring key actions on screen. Commonly used options present in the action bar include:

  • Search
  • New
  • Refresh
  • Stop
  • Back
  • Forward
  • Undo/Redo etc.

The Good

  • Uncluttered screen, free of too many icons
  • Easy access to key features at all times
  • Easy navigation
  • Indicates current location/state of the app.

The Bad

  • It is always present on top of the screen, taking up valuable space
  • It cannot include all functions of the application, jus t the important ones
  • Too many options (>5) in the action bar might make it clunky and heavy.

Thus ,we can summarize that the design patterns is the need of the hour which  will go a long way in providing a unified and consistent methodology for developing UI’s that will create a lasting impression on the users.

Keeping these fundamental points in mind while designing any user interface, you can get a kick start to your dream to develop the most user friendly interface.  But what about the design patters for Dashboards, Quick Actions and Action Bar?  I am looking forward to soon share these design patterns. So stay connected to have an interactive information sharing.

For more information, you may want to refer to Google’s session on Android UI Design Patterns

29
Jun

Android Application Development : UI Layouts

Mobile Application Development June 29th, 2010

Providing a good user experience is critical to mobile applications. UI Application development in Android requires that you have a good understanding of Layouts. In this blog post, we shall cover all about Android Layouts with code samples.

Android Layout is like a container; all the screen will use either of the one layout and all the view (components) on that screen are part of the layout. The fact that mobile screen is small in size it is very important to properly design the UI.

Let us look at the various layouts offered:

  • Linear Layout

This layout as name says is used to place the views in the linear flow one after the other. We can specify the manner in which view are placed linearly i.e. horizontally or vertically.

Let us have a look at the Linear Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
    	>
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
    	 android:text="First Text View"
    	 />

 <TextView
    	 android:layout_width="fill_parent"
    	 android:layout_height="wrap_content"
    	 android:text="Second Text View"
    	 />
 </LinearLayout>

As shown the above Linear Layout have two Text Views and have orientation set to vertical (android:orientation=“vertical”), hence the two Text Views will be drawn vertically one below the other.

Linear Layout Vertical Orientation

Figure 1: Linear Layout Vertical Orientation

Look at the above XML for Linear Layout, width for layout along with Text View with the layout is set to fill_parent (android:layout_width=“fill_parent”). And since Linear Layout is the top most layout and width set to fill parent it will be stretched to cover entire screen. Similarly both the Text Views also have width set to fill parent, and since they are child to Linear Layout they are stretched to entire screen width.

Now let us change the orientation of linear layout to horizontal (android:orientation=“horizontal”).  Just changing the orientation to horizontal will draw Text View next to each other, but since each of the text view is set to have width as fill parent and by default both are written from left to right (Gravity) only one Text View (First Text View) will be visible. To overcome this set width for both the Text View to wrap_content (android:layout_width=“wrap_content”).

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="fill_parent"
    	>
<TextView
    		android:layout_width="wrap_content"
    		android:layout_height="wrap_content"
    		android:text="First Text View"
      />

    		<TextView
    		android:layout_width="wrap_content"
    		android:layout_height="wrap_content"
    	android:text="Second Text View"
    		android:paddingLeft="10px"
    		/>
  </LinearLayout>

Note: Since we have set width for both the Text View as wrap_content, 2nd Text View will start as soon as 1st end. Hence in the above xml we have provided left padding for 2nd Text View in order to have some space between the 2 Text View.

Linear Layout Horizontal Orientation

Figure 2 Linear Layout Horizontal Orientation

  • Table Layout

Using this layout we can place view/components in tabular format.  The best example to understand this layout is Login Screen. Below XML shows Table layout

<?xml version="1.0" encoding="utf-8"?>
<TableLayout android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

		<TableRow android:id="@+id/TableRow01">
			<TextView android:id="@+id/TextView01"
			android:text="User Name:"
			android:width="100px"/>

			<EditText android:id="@+id/EditText01"
			android:width="220px"/>
		</TableRow>

		<TableRow android:id="@+id/TableRow02">
			<TextView android:id="@+id/TextView02"
			android:text="Password:"
			/>

			<EditText android:id="@+id/EditText02"
			android:inputType="textPassword"/>
		</TableRow>

		<TableRow android:id="@+id/TableRow03">
			<Button android:id="@+id/Button01"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:text="Login"/>

			<Button android:id="@+id/Button02"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:text="Reset"
			android:width="100px"/>
</TableRow>
</TableLayout>

As shown Table consist of three rows (Table Row) and each row as two views/components. Number of columns in table is determined by the maximum number of components in a single row.

Table Layout

Figure 3 : Table Layout

One more important point to note here is that even after specifying width of Reset button in xml to 100 pixel  (android:width=“100px”), it’s width is same as that of Edit Text. This is because width of Column is determined by the maximum width of the component in that column and here Reset button is same the column as Edit Text which has width set to 220 pixel.

  • Relative Layout

This layout is flexible layout of all. This layout as name suggest allow placing components relative to other component or layout. Let us see at the example

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User Name:"
android:width="100px"/>
<EditText android:id="@+id/EditText01"
android:layout_width="220px"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/TextView01"
android:layout_below="@+id/RelativeLayout01"
/>

<EditText android:id="@+id/EditText02"
android:layout_width="220px"
android:layout_height="wrap_content"
android:layout_below="@+id/EditText01"
android:layout_alignLeft="@+id/EditText01"
/>

<TextView android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password:"
android:width="100px"
android:layout_below="@+id/EditText01"
android:layout_toLeftOf="@+id/EditText02"
/>

<Button android:text="Login"
android:id="@+id/Button01"
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_below="@id/EditText02"
android:layout_alignLeft="@id/EditText02"
/>

<Button android:text="Reset"
android:id="@+id/Button02"
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_below="@id/EditText02"
android:layout_alignRight="@id/EditText02"
/>

</RelativeLayout>

As shown,  EditText 01 has attributes android:layout_toRightOf=“@+id/TextView01″ and android:layout_below=“@+id/RelativeLayout01” for placing Edit Text next to Text View (User Name) . Similarly check EditText02 as attributes android:layout_below=“@+id/EditText01″ and android:layout_alignLeft=“@+id/EditText01″ for placing Edit Text box below the Edit Text 01.

Relative Layout

Figure 4 Relative Layout

  • Absolute Layout

As name suggest this layout is used to place views/components at the exact location on the screen using x and y. Let us see example

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout android:id="@+id/AbsoluteLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<EditText
android:id="@+id/EditText01"
android:layout_width="200px" android:layout_height="wrap_content"
android:layout_x="12px"
android:layout_y="12px"/>
<Button android:text="Search"
android:id="@+id/Button01"
android:layout_width="100px" android:layout_height="wrap_content"
android:layout_x="220px"
android:layout_y="12px"/>
</AbsoluteLayout>

Absolute Layout

Figure 5 Absolute Layout

As seen we have specified android:layout_x and android:layout_y for both the components  their by providing the absolute location for the components.

  • Frame Layout

Frame Layout is one of the simplest layouts. It is like a single screen and all the views/components child to this layout will be drawn on same screen anchored to the top left corner of the screen. So it is likely that one view can overall another one and hides it unless it is transparent. Let see the example

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/FrameLayout01"
android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<ImageView android:id="@+id/ImageView01"
android:src="@drawable/taj_mahal"
android:scaleType="center"
android:layout_width="fill_parent" android:layout_height="fill_parent"/>

<TextView android:text="Taj Mahal"
android:id="@+id/TextView01"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="10dip"
android:textColor="#FFFFFF"
android:background="#AA0000"
/>
</FrameLayout>

Frame Layout

Figure 6 Frame Layout

Note: taj_mahal.jpg is in drawable folder

Conclusion

We looked at the basic android layouts and tried to understand them with their respective examples.