Quantcast
Channel: Another Android Blog » Android Development
Viewing all articles
Browse latest Browse all 10

Custom Composite Android Component

$
0
0

This example puts a couple of TextViews into a LinearLayout. The combination of components is then treated as one component with the added functionality of programmatically changing the text of the two TextViews. I pretty much modified this off of something I learned and forgot. It took me a good bit of digging to find it again. Check maohao.com for the original source/alternate version. I’m putting it here so I don’t loose it (again). I’m sure it’s somewhere on developer.google.com but I just couldn’t find a specific example not bogged down by other code (i.e., ListView). Also, I’m not even sure this works well for ListView. That said, it does have practical applications. For example, a list that will always be small. For further explanation, please visit maohao at:

http://maohao.wordpress.com/2009/08/27/building-mix-up-custom-component-android/

Here is a working example of my version. The first code below,two_text_components.xml, has root LinearLayout and two TextView components with id text_one and text_two. This is the XML layout of the the composite component we want to create.

two_text_components.xml

<?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="horizontal"
	>
	<TextView
		android:id="@+id/text_one"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		></TextView>
	<TextView
		android:id="@+id/text_two"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_weight="9"
		></TextView>
</LinearLayout>

We are going to programmatically set the text for text_one and text_two. In the Maohao post, he specifies a namespace and is able to insert variables directly into the xml of the composite component – definitely worth taking a look at. The most important aspect of this example is connecting the XML to the Java. That’s done on a single line below that point’s the Activity’s layout inflator to the appropriate xml file. Also make sure most of your work is done in onFinishInflate() or later; otherwise, you’ll end up with null pointer exceptions. Take a look at the Java code.

TwoTextWidget.java

package com.anotherandroidblog.snippets.CustomCompositeViewExample.customcomponents;
 
import com.anotherandroidblog.snippets.CustomCompositeViewExample.R;
 
import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class TwoTextWidget extends LinearLayout {
	private TextView textOne;
	private TextView textTwo;
 
	public TwoTextWidget(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
 
	@Override
	protected void onFinishInflate() {
		super.onFinishInflate();
		((Activity)getContext()).getLayoutInflater().inflate(R.layout.two_text_component, this);
		setupViewItems();
	}
 
	private void setupViewItems() {
		textOne = (TextView) findViewById(R.id.text_one);
		textTwo = (TextView) findViewById(R.id.text_two);
	}
 
	public void setTextOne(String text) {
		textOne.setText(text);
	}
 
	public void setTextTwo(String text) {
		textTwo.setText(text);
	}
}

Now let’s see how we add the new composite widget into the Activity’s XML. You must use the full package/class name of the new composite widget. You can use any of the standard LinearLayout properties in our composite widget (which extends from LinearLayout).

main.xml

<?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="@string/title"
    />
    <com.anotherandroidblog.snippets.CustomCompositeViewExample.customcomponents.TwoTextWidget
    	android:id="@+id/list_item_one"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    	android:orientation="horizontal"
    	/>
    <com.anotherandroidblog.snippets.CustomCompositeViewExample.customcomponents.TwoTextWidget
    	android:id="@+id/list_item_two"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    	android:orientation="horizontal"
    	/>
</LinearLayout>

Here is our last file. It is just the Activity class that runs the application. I’ve called the two methods created in the composite component for each instance we use them.

Home.java

package com.anotherandroidblog.snippets.CustomCompositeViewExample;
 
import com.anotherandroidblog.snippets.CustomCompositeViewExample.customcomponents.TwoTextWidget;
 
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
 
public class Home extends Activity {
	private TwoTextWidget itemOne;
	private TwoTextWidget itemTwo;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setupViews();
    }
 
    private void setupViews() {
    	itemOne = (TwoTextWidget) findViewById(R.id.list_item_one);
    	itemOne.setTextOne("1");
    	itemOne.setTextTwo("Hello");
 
    	itemTwo = (TwoTextWidget) findViewById(R.id.list_item_two);
    	itemTwo.setTextOne("2");
    	itemTwo.setTextTwo("Goodbye");
    }
}

Project Files

Here is the project file.


Viewing all articles
Browse latest Browse all 10

Trending Articles