Mar
13
2010

 

This tutorial assumes basic familiarity with Android SDK and its XML layouting mechanism. The example is written in Android SDK 2.1.

Background

Layouting in Android is usually done in an XML file, via the layout editor or by hand.  Below is an example of a layout done in the Eclipse layout editor.

Almost every Android application loads a layout within its main Activity class, and it usually looks like below:

[c]

package com.permadi.example;

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

public class LoadLayoutExample extends Activity
{

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

[/c]

This line below loads the layout named main.xml into the Activity.

[c]

setContentView(R.layout.main);

[/c]

What we want to demonstrate here is how to load a layout XML and associating it with a class for example, for a custom view class that you can design in XML. There many benefit of this, such as separation of control code and of course to minimize manual coding. An excellent reference of methods to customize views can be found on the following document:
http://developer.android.com/guide/topics/ui/custom-components.html.  However, the technique described here is not covered in that document.

Note: in older version of Android SDK, the process is sligltly different,usually involving getLayoutInflater() which has been depreceated.

Example

Create a new XML layout file, let’s call it example.xml

For my example, the layout looks like below.

The XML file looks lke this:

[c]
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" android:layout_gravity="center_horizontal">
      <TableRow android:gravity="center_horizontal"> 
             <TextView android:text="Layout Example" android:id="@+id/TextView01" 
                     android:layout_height="wrap_content" android:layout_gravity="center_horizontal" 
                     android:layout_width="fill_parent">
             </TextView>
      </TableRow>
      <TableRow>
            <ImageView android:id="@+id/ImageView01" android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" android:src="@drawable/icon" 
                    android:layout_gravity="right">
            </ImageView>
            <Button android:text="Set Icon" android:id="@+id/Button02" 
                   android:layout_width="wrap_content" android:layout_height="wrap_content">
            </Button>		
       </TableRow>
       <TableRow>
              <EditText android:text="[enter name]" android:id="@+id/EditText01" 
                     android:layout_width="wrap_content" android:layout_height="wrap_content">
              </EditText>
	      <Button android:text="Submit" android:id="@+id/Button02" 
                     android:layout_width="wrap_content" android:layout_height="wrap_content">
              </Button>		
       </TableRow>
       <TimePicker android:id="@+id/TimePicker01" android:layout_width="wrap_content" 
              android:layout_height="wrap_content">
       </TimePicker>
</TableLayout>

[/c]

What is that supposed to be? Um, nothing, it’s just an example, you can use your own if you want.
Let’s associate this layout with a class named CustomViewCustomView.java looks like this.

[c]
package com.permadi.example;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;

public class CustomView extends LinearLayout
{

public CustomView(Context context, AttributeSet attrs)
{
super(context, attrs);

LayoutInflater layoutInflater =
(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view=layoutInflater.inflate(R.layout.example,this);
}
}

[/c]

The key is these lines, which load the example.xml (R.layout.example) using LayoutInflater: layoutIflater.inflate(R.layout.example, this);

[c]
layoutInflater.inflate(R.layout.example,this);
[/c]

You can then create a CustomView object like this:

[c]
CustomView customView=new CustomView(this, null);
[/c]

where this is your Application context.

For example, to load the view within an application, it will look like this:

[c]

package com.permadi.example;

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

public class LoadLayoutExample extends Activity
{
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState)
  {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
     CustomView customView=new CustomView(this, null);
     ViewGroup container = (ViewGroup) findViewById(R.id.main);
     container.addView(customView);        
   }
}
[/c]

Specfically, these three lines creates the view then adds it into the main view.

[c]
     CustomView customView=new CustomView(this, null);
     ViewGroup container = (ViewGroup) findViewById(R.id.main);
     container.addView(customView);        
[/c]

The output is shown below, as you see, the custom view layout has been added:

The source code can be downloaded here (uses Android SDK 2.1).

In the next post, see how to use CustomView in an xml based layout: http://permadi.com/blog/2010/03/android-sdk-using-custom-view-in-xml-based-layout/

Comments are closed.