Building mix-up custom Android component/widget using Java class and XML layout

A lot of times you would find it convenient to just create “compound components” or what Commons guy called “meta” widgets.These widgets are compositions of other widgets. Most of the work involved would be to layout those compound components, bind data and wire up controls. For the layout part, it’s convenient to just use mixture of a Java class and a corresponding xml layout file, as opposed to using a pure Java class. Here is how:

1. Create the Java class. It usually extends a Layout class such as a LinearLayout or a RelativeLayout.  You have to define a constructor in the flavor of

public MyHomeBrewedComp(Context context, AttributeSet attr)

If you just use "public MyHomeBrewedComp(Context context)“,  you would get an “java.lang.NoSuchMethodException" error from Console and a “android.view.InflateException: Binary XML file line #nnn: Error inflating class" from CatLog at runtime.

2. Create the corresponding xml layout file under the package “res/layout” folder.  This is the xml version of your Java class, which means the root node should be the identical class to your Java class.

3. Layout compound widgets in your enclosing widget. If you are doing layout in the xml file, you will then have to inflate the xml in your java file programmatically. You do this by overriding the widget’s onFinishInflate () method.

protected void onFinishInflate(){
((Activity)getContext()).getLayoutInflater().inflate(R.layout.myhomebrewedComp, this);
//other code comes here, such as wiring up controls

4. TODO: setting up attributes in the custom widget

5.  Using the widget in XML.  First of all you will need a new namespace when you refer to any property/attribute in your widget; second you have to use the full-qualified class name in the xml file. Here is a sample:

<?xml version=”1.0″ encoding=”utf-8″?>

app: friction=”.7f”



6 Responses to “Building mix-up custom Android component/widget using Java class and XML layout”

  1. Dimon Says:

    Hey man , maohao, ure right heres my fuckin’ example working
    package com.HelloGallery;

    import java.util.Map;

    import android.content.Context;
    import android.util.AttributeSet;
    import android.view.View;

    class DrawPanel extends View {
    public DrawPanel(Context context) {

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

    public DrawPanel(Context context, AttributeSet attrs, int defStyle){
    super(context, attrs, defStyle);

    public void onDraw(Canvas canvas) {
    //Bitmap _scratch = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
    //canvas.drawBitmap(_scratch, 10, 10, null);

  2. FadeOut Says:


    First of all, THANKS A LOT for this MORE THAN VERY USERFULL tutorial!!! Has been looking for answers for over 2 days on a crash. You solved it in 5 minutes!!! YEAH!!!! WAY TO GO !

    I wan’t to know if you can Paste an XML example for step 2… I don’t understant the root thingy!

    Thanks again


  3. Kalle Says:

    Thanks for the tip!

    A slight adjustment, though:

    To get the layout inflation to work in the graphic layout editor you need to do

    LayoutInflater.from(getContext()).inflate(R.layout.myhomebrewedComp, this);

    since the context when running in the editor isn’t an Activity.

  4. Custom Composite Android Component | The android ship Says:

    […] For example, a list that will always be small. For further explanation, please visit maohao at: is a working example of my version. The first code below,two_text_components.xml, has root […]

  5. free android apps download Says:

    free android apps download…

    […]Building mix-up custom Android component/widget using Java class and XML layout « :maohao:[…]…

  6. Being Android Says:

    Being Android…

    […]Building mix-up custom Android component/widget using Java class and XML layout « :maohao:[…]…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: