Understanding User Interface in Android – Part 1: Layouts

So far in my previous few articles on Android I have focused on showing you how to get things done in Android without really spending too much time discussing the visual aspect of Android application development – User Interface design. In this article, and the next, I will walk you through the various elements that make up the UI of an Android application. In this first part of the article, I will discuss the various layouts available in Android to position the various widgets on your screen.

Android Screen UI Components

Up to this point, you have seen that the basic unit of an Android application is an Activity. An Activity displays the user interface of your application, which may contain widgets like buttons, labels, text boxes, etc. Typically, you define your UI using an XML file (for example, the main.xml file located in the res/layout folder), which may look like this:

During runtime, you load the XML UI in the onCreate() event handler in your Activity class, using the setContentView() method of the Activity class:

What happens is that during compilation time, each element in the XML file is compiled into its equivalent Android GUI class, with attributes represented by methods. The Android system then creates the UI of the Activity when it is loaded.

While it is always easier to build your UI using a XML file, there are times where you need to build your UI dynamically during runtime (for example, when writing games). Hence, it is also possible to create your UI entirely using code.

Views and ViewGroups

An Activity contains Views and ViewGroups. A View is a widget that has an appearance on screen. Examples of widgets are buttons, labels, text boxes, etc. A View derives from the base class android.view.View.

One or more Views can be grouped together into a ViewGroup. A ViewGroup (which is by itself is a special type of View) provides the layout in which you can order the appearance and sequence of views. Examples of Viewgroups are LinearLayout, FrameLayout, etc. A ViewGroup derives from the base class android.view.ViewGroup.

Android supports the following ViewGroups:

  • LinearLayout
  • AbsoluteLayout
  • TableLayout
  • RelativeLayout
  • FrameLayout
  • ScrollView

The following sections will discuss each ViewGroup in more details. Note that in practice, it is common to nest different types of layouts to create the UI you want.

Creating the Sample Project

For this article, create a new Android project and name it as shown in Figure 1.


Figure 1 Creating a new Android project using Eclipse

Eclipse provides only minimal support for designing Android UI and so you won’t be able to drag-and-drop of widgets on a design surface. Instead, you can use the free DroidDraw tool available at http://www.droiddraw.org/. Figure 2 shows the DroidDraw in action. You can drag-and-drop widgets onto different layouts and then use it to generate its equivalent XML code. While DroidDraw is not perfect, it is very useful to get you started with Android UI design and is a good tool to learn the various Views and ViewGroups in Android.


Figure 2 The DroidDraw web application to design your Android UI

You can also download standalone versions of DroidDraw for Windows, Mac OS X, and Linux.

LinearLayout

The LinearLayout arranges views in a single column or single row. Child views can either be arranged vertically or horizontally. To see how LinearLayout works, let’s modify the main.xml file in the project:

In the main.xml file, observe that the root element is and it has a element contained within it. The element controls the order in which the views contained within it appear.

Each View and ViewGroup has a set of common attributes, some of which are shown in Table 1.

Attribute Description
layout_width Specifies the width of the View or ViewGroup
layout_height Specifies the height of the View or ViewGroup
layout_marginTop Specifies extra space on the top side of the View or ViewGroup
layout_marginBottom Specifies extra space on the bottom side of the View or ViewGroup
layout_marginLeft Specifies extra space on the left side of the View or ViewGroup
layout_marginRight Specifies extra space on the right side of the View or ViewGroup
layout_gravity Specifies how child Views are positioned
layout_weight Specifies how much of the extra space in the layout to be allocated to the View
layout_x Specifies the x-coordinate of the View or ViewGroup
layout_y Specifies the y-coordinate of the View or ViewGroup

Table 1 Common attributes of views and viewgroups

Note that some of these attributes are only applicable when a View is in certain specific ViewGroup(s). For example, the layout_weight and layout_gravity attributes are only applicable if a View is either in a LinearLayout or TableLayout.

For example, the element above has its width filling up the entire width of its parent (which is the screen in this case) using the fill_parent constant. Its height is indicated by the wrap_content constant, which means that its height is the height of its content (in this case, the text contained within it). If you do not wish to have the view occupy the entire row, you can set its layout_width attribute to wrap_content, like this:

This will set the width of the view to be equal to the width of the text contained within it. You can also set the width to an absolute value, like this:

In this case, the width is set to 105 pixels wide. Let’s modify the main.xml file by adding a

18 Comments

  • baotq says:

    Thanks you!

  • jaspreetsingh says:

    Best android tutorial i found in internet dam thanks :)

  • sunwicked says:

    G8 tut

  • jack22 says:

    how to give display other than English language in android?

  • akash sudhir khade says:

    Hi…mobiforce team…its nice tut.. its really helps me…
    thanx….

  • paul78 says:

    very nice!!!!!!

    i want create another program…..

    up i want create one listView in one ScrollView on up of desktop of android….and down i want insert 5 Button in Horizontal in one frame…..
    It’s possible?????
    if possible…hot to create all in one xml???????

  • pavanhemdev says:

    Hi Wei Meeng,

    This is a great article. The best basic UI tutorial thus far..
    Sincere Thanks

  • usingframeworks says:

    Thanks for this great help.

    [url]http://www.techienjoy.com[/url]

  • mslav says:

    Hi great set of tutorials – although I kept on getting an “r.layout.main cannot be resolved” error, and the app wouldn’t compile.

    Turns out it was a missing image in the basicviews.xml
    android:src=”@drawable/icon”

    Placing an image called “icon.png” in the res/drawable-hdpi/ / ldpi / mdpi folders sorted this error out, and the example then compiled ok…

  • Vikas Kumar says:

    Nice one! very useful for beginners..

Other Afilias Products

Try the world’s leading device detection solution at
DeviceAtlas - Try the world’s leading mobile device detection solution

Create amazing web presences on any screen with
goMobi - Create amazing web presences on any screen.

Evaluate your websites’ mobile readiness with
mobiReady - Evaluate your websites’ mobile readiness.

© 2016 Afilias Technologies Ltd. All rights reserved.

This is a website of Afilias Technologies Ltd, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland