Paul Labis: This is a personal blog where everyone can read my experiences, ideas and thoughts about programming, latest gadgets and other information technology related topics, lifestyle and many other stuff I would like to share to the public.

by paul

3 Comments »

, ,

Tutorial on Android Layout

On my previous article, I've discussed more on the theory and definition of an Android. In this article, we will be dealing more on the technical aspect of developing android application layout. I will walk you through various elements that make up the user interface(UI) and how to position different widgets on an android screen.

Terms to remember:
  • Activity - the basic unit of an android application. It contains views and ViewGroup. 
  • View - a widget that has an appearance on screen.
  • Widget - are user interface components like buttons, labels, text boxes, etc.
  • ViewGroup - a special type of View that provides the layout in which you can group views, order the appearance and sequence your views.
Just an additional information; In a typical android project, UI is defined using an XML file located in the res/layout folder. An example is main.xml located in res/layout folder.  During runtime, the .xml file where you defined your UI is loaded using the onCreate() event handler of your activity class and using setContentView() method of the extended Activity class. Moreover, during compilation time, each of the element in the defined UI xml file are compiled into an equivalent Android GUI class wherein its attributes are represented by methods.


Furthermore, Android supports various ViewGroups and among those are the linear, absolute, table, relative and scroll view layouts. This layouts will be discussed in details below.

At this point, I presume you already setup your development environment for programming Android applications. If you haven't, please follow the android setup tutorial.

Get Your Hands Dirty
So, lets begin by creating the sample project on eclipse. Do observe the screen shot below. (Click the image to enlarge)

There is another application called DroidDraw which you can use to design your layout aside from eclipse. Though, eclipse has its Android layout editor, it has limited features. Perhaps, you might want to use DroidDraw instead which supports drag and drop. However, its on your disposal whether which tool could help. On this ongoing tutorial, we will be using only the xml editor on eclipse.

LinearLayout 
It is the layout widget where you are able to arrange your views horizontally or vertically on a single row or single column. To see the how it works, lets create linear.xml under res/layout folder in the project and enter the code below:

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

<TextView
android:id="@+id/sampleText01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample Text 01"
/>

<TextView
android:id="@+id/sampleText02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample Text 02"
/>

</LinearLayout>
and change the LayoutPractice.java code to:
package com.techie.layout;

import android.app.Activity;
import android.os.Bundle;

public class LayoutPractice extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.linear);
}
}
that will result to:
On the code above, you'll notice that it starts with a container <LinearLayout> android xml element that hold and control the order and appearance of the other views elements inside it. That serves as the main container of the views elements <TextView>. You'll also notice that we specified the layouts' orientation to vertical. By its default, it is set to horizontal. Other than that, we also specified the layouts' width and height. That basically are the basic ones that you need to specify in a layout element.

The fill_parent and wrap_content are two constants. You should use fill_parent if you want the full size of the parent container which in our case is the linear layout container. Use wrap_content if you want the size of its content. Try adding a button to linear.xml and specify its width like below:
<Button
          android:id="@+id/sampleButton01"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="Sample Button 01"
          />
Experiment by changing its width to wrap_content. Also, you can specify its layouts width and size by pixel(px). See the code below for an example:
<Button
          android:id="@+id/sampleButton01"
          android:layout_width="150px"
          android:layout_height="40px"
          android:text="Sample Button 01"
          /> 

In linear layout, layout_weight and layout_gravity attributes are applicable to views contained within it.  Below is an example of how to use it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical">
 
    <TextView
          android:id="@+id/sampleText01"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Sample Text 01"   
          />
         
    <TextView
          android:id="@+id/sampleText02"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Sample Text 02"
          />
         
      <Button
          android:id="@+id/sampleButton01"
          android:layout_width="150px"
          android:layout_height="40px"
          android:text="Sample Button 01"
          />
  <Button
          android:id="@+id/sampleButton02"
          android:layout_width="150px"
          android:layout_height="40px"
          android:text="Sample Button 02"
          android:layout_weight="0.2"
          android:layout_gravity="right"
          />
  <Button
          android:id="@+id/sampleButton03"
          android:layout_width="150px"
          android:layout_height="40px"
          android:text="Sample Button 03"
          android:layout_weight="0.2"
          android:layout_gravity="left"
          />
  <EditText      
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"       
        android:textSize="18sp"
        android:layout_weight="0.8"       
        />
 
</LinearLayout>


In the above code, we applied layout_gravity to both buttons which aligned them to right and left corner of the parent container. The layout_weight attribute was used to specify the ratio in which the button and editText views occupy the remaining space on the screen.
AbsoluteLayout 
It enables you to specify the exact location of its content views like buttons, textview, and etc.. Lets create another android xml named absolute.xml under res/layout folder of the project. See the code below.
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <Button
        android:layout_width="150px"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_x="12px"
        android:layout_y="361px"
        />
    <Button
        android:layout_width="150px"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_x="160px"
        android:layout_y="361px"
        />
</AbsoluteLayout>

So, in the above you'll notice that we make use of the view attributes layout_x and layout_y to specify the exact positions of the absolute layouts' contents. To be able to see the changes, do change the code below:
package com.techie.layout;

import android.app.Activity;
import android.os.Bundle;

public class LayoutPractice extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.absolute);
    }
}
It will render the user interface like this:
TableLayout
Like a  normal table tag, it enables you to group views by rows and columns. Every views you place inside a row forms a cell. The cells' width is determined by the largest cell by that column. 


Create table.xml under res/layout of the project folder containing the following code:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
 
  <TableRow>
          <TextView
            android:text="First Name"             
              />
          <EditText
              android:layout_width="150px"
              />
  </TableRow>
 
  <TableRow>
          <TextView
            android:text="Last Name"             
              />
          <EditText
              android:layout_width="150px"
              />
  </TableRow>
 
  <TableRow>
          <TextView
            android:text="Are you developer?"             
              />
          <CheckBox
              android:text="Yes"
              />
  </TableRow>

  <TableRow>
          <TextView
            android:text="Password"             
              />
          <EditText
              android:layout_width="150px"
              android:password="true"
              />
  </TableRow>
 
  <TableRow>
          <TextView/>
          <Button
              android:text="Submit"
              />
  </TableRow>
 
</TableLayout>

Don't forget to update the LayoutPractice activity code to
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.table);
    }
So, as you can see above, the code implemented 2 column and 5 rows. The  views width  on column 1 were of same size with the largest view width in that column. Note also that  a view  was added just above the Submit button so that the Submit button will align on the second column. If you remove the textView, it will look like this:
Moreover, on the 5th row, a textView for password was added. The attribute password was set to true so that the text entered will be replaced with a dot.


RelativeLayout

This layout enables you to specify child view's position relating to another view. It makes use of available view attributes alignParentTop, alignParentLeft, alignLeft, alighRight, below, centerHorizontal and etc. Those mentioned attributes are made available to views inside a relative layout for them to be align relative to another view. Take note that it utilize id's of another view. Take a look at the code below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
 
   <TextView
        android:id="@+id/labelComments"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Comments"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        />
    <EditText
        android:id="@+id/textComments"
        android:layout_width="fill_parent"
        android:layout_height="170px"
        android:textSize="18sp"
        android:layout_alignLeft="@+id/labelComments"
        android:layout_below="@+id/labelComments"
        android:layout_centerHorizontal="true"
        />
    <Button
        android:id="@+id/buttonSave"
        android:layout_width="125px"
        android:layout_height="wrap_content"
        android:text="Save"
        android:layout_below="@+id/textComments"
        android:layout_alignRight="@+id/textComments"
        />
    <Button
        android:id="@+id/buttonCancel"
        android:layout_width="124px"
        android:layout_height="wrap_content"
        android:text="Cancel"
        android:layout_below="@+id/textComments"
        android:layout_alignLeft="@+id/textComments"
        />
 
</RelativeLayout>


ScrollView

It is a frame layout that enables a feature where the user can scroll through a list that basically occupy more space than the available physical space on your android phone. A scrollview can only contain one viewgroup which is normally a linearlayout. The code below has a linear layout inside a scroll view. 

Try this by creating scrollview.xml under res/layout folder of the project.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    android:id="@+id/widget54"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <LinearLayout
        android:layout_width="300px"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 1"
            />
        <Button
            android:id="@+id/button2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 2"
            />
        <Button
            android:id="@+id/button3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 3"
            />
        <EditText
            android:id="@+id/txt1"
            android:layout_width="fill_parent"
            android:layout_height="300px"
            />
        <Button
            android:id="@+id/button4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 4"
            />
        <Button
            android:id="@+id/button5"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 5"
            />
        <EditText
            android:id="@+id/txt2"
            android:layout_width="fill_parent"
            android:layout_height="200px"
            />
    </LinearLayout>
</ScrollView>
The above code results to the following:

The above is a neat implementation of scroll view where inside is a linear container having contents that occupy more than the available actual space of an android screen.


Nutshell
In this article, you saw various layout implementations with wigets on top of Android. On the next articles, we will focus on other components of the UI which is the views.  Practice on your newly learned lay-outing skill. So, stay tune and have fun with android! 

I would like to give credit to Wei-Meng Lee who written  a very helpful tutorial on android layout.

3 Comments

Next Post »
« Previous Post

Leave a Reply