Custom Widget composed of other existing views

Question

I would like to create a widget with the following layout:

<LinearLayout orientation="horizontal">
<CheckBox />
<EditText />
<SeekBar />
</LinearLayout>

When the seekbar gets moved it should check the checkbox and update the editbox with the current seekbar value.

I am using something similar over and over again in an application and getting tired of re-implementing the same thing.

What is the best way to encapsulate all this into its own class for reuse?

public class SeekChoice extends LinearLayout {



    public SeekChoice(Context context) {
        super(context);
        LayoutInflater inflater = (LayoutInflater) context.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
        LinearLayout ll = (LinearLayout) inflater.inflate(R.id.widget_item, null);
        this.addView(ll);
    }
}


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" 
    android:id="@+id/widget_item"
    >


    <CheckBox
        android:id="@+id/checkBox_item_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item Name" />



    <EditText
        android:id="@+id/editText_item_count"
        android:layout_width="82dp"
        android:layout_height="wrap_content"
        android:enabled="false"
        android:ems="10" >

    </EditText>


    <SeekBar
        android:id="@+id/seekBar_item_count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

</LinearLayout>

Then in my layout I put:

<com.example.lobsternav.widget.SeekChoice
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

The exception is as follows:

09-09 20:23:08.759: E/AndroidRuntime(21888): FATAL EXCEPTION: main
09-09 20:23:08.759: E/AndroidRuntime(21888): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.lobsternav/com.example.lobsternav.MarkActivity}: android.view.InflateException: Binary XML file line #344: Error inflating class com.example.lobsternav.widget.SeekChoice
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2059)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2084)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.app.ActivityThread.access$600(ActivityThread.java:130)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1195)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.os.Handler.dispatchMessage(Handler.java:99)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.os.Looper.loop(Looper.java:137)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.app.ActivityThread.main(ActivityThread.java:4745)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at java.lang.reflect.Method.invokeNative(Native Method)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at java.lang.reflect.Method.invoke(Method.java:511)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:786)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at dalvik.system.NativeStart.main(Native Method)
09-09 20:23:08.759: E/AndroidRuntime(21888): Caused by: android.view.InflateException: Binary XML file line #344: Error inflating class com.example.lobsternav.widget.SeekChoice
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.view.LayoutInflater.createView(LayoutInflater.java:596)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:687)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:256)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.app.Activity.setContentView(Activity.java:1867)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at com.example.lobsternav.MarkActivity.onCreate(MarkActivity.java:85)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.app.Activity.performCreate(Activity.java:5008)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1079)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2023)
09-09 20:23:08.759: E/AndroidRuntime(21888):    ... 11 more
09-09 20:23:08.759: E/AndroidRuntime(21888): Caused by: java.lang.NoSuchMethodException: <init> [class android.content.Context, interface android.util.AttributeSet]
09-09 20:23:08.759: E/AndroidRuntime(21888):    at java.lang.Class.getConstructorOrMethod(Class.java:460)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at java.lang.Class.getConstructor(Class.java:431)
09-09 20:23:08.759: E/AndroidRuntime(21888):    at android.view.LayoutInflater.createView(LayoutInflater.java:561)
09-09 20:23:08.759: E/AndroidRuntime(21888):    ... 24 more

craziness... It throws an exception if I dont have the following constructor defined:

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


}

I guess all the constructors from LinearLayout need to be defined and need to call the super constructor?

score 4 · Accepted Answer · answered Sep 10 '12 at 23:30

Finally have this working.

My Java Code:

package com.example.lobsternav.widget;

import java.util.ArrayList;
import java.util.List;

import com.example.lobsternav.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.SeekBar;
import android.widget.RelativeLayout.LayoutParams;
import android.widget.SeekBar.OnSeekBarChangeListener;

public  class SeekChoice extends LinearLayout implements OnSeekBarChangeListener, OnCheckedChangeListener{

    CheckBox checkbox = null;
    EditText editBox =null;
    SeekBar seekbar = null;

    boolean isChecked = false;
    int curValue = 0;
    List <String> mappings = new ArrayList<String>();
    int startRange = 0;
    int endRange = 50;
    int defaultValue = 0;

    private void init(Context context)
    {
        this.setOrientation(LinearLayout.HORIZONTAL);
        LayoutInflater inflater = (LayoutInflater) context.getSystemService( Context.LAYOUT_INFLATER_SERVICE );

        LinearLayout layout = (LinearLayout)inflater.inflate(R.layout.item_widget, null);
        layout.setOrientation(LinearLayout.HORIZONTAL);
        layout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT));


        checkbox = (CheckBox)layout.findViewById(R.id.checkBox_item_name);
        checkbox.setOnCheckedChangeListener(this);
        //this.addView(checkbox);

        editBox = (EditText)layout.findViewById(R.id.editText_item_count);
        editBox.setEnabled(false);
        editBox.setText(getMappedValue(defaultValue));

        int ems = (new Integer(endRange)).toString().length()+1;
        editBox.setEms(ems);
        //this.addView(editBox);

        seekbar = (SeekBar)layout.findViewById(R.id.seekBar_item_count);
        seekbar.setMax(endRange);
        seekbar.setProgress(defaultValue);
        //seekbar.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT));
        seekbar.setOnSeekBarChangeListener(this);
        //this.addView(seekbar);    
        this.addView(layout);

    }


    public void readAttributes(Context context, AttributeSet attrs)
    {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SeekChoice);
        this.startRange = a.getInteger(R.styleable.SeekChoice_startRange, 0);
        this.endRange = a.getInteger(R.styleable.SeekChoice_endRange, 100);
        this.defaultValue = a.getInteger(R.styleable.SeekChoice_defaultValue, 0);
        this.isChecked = a.getBoolean(R.styleable.SeekChoice_isChecked, false);
        a.recycle();
    }

    public SeekChoice(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        readAttributes( context,  attrs);
        init(context);

    }

    public SeekChoice(Context context, AttributeSet attrs) {
        super(context, attrs);
        readAttributes( context,  attrs);
        init(context);

    }
    public SeekChoice(Context context) {
        super(context);
        init(context);
    }

    public SeekChoice(Context context,int startRange, int endRange, int defaultValue) {
        super(context);
        init(context);
    }
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) 
    {
        this.editBox.setText("" + getMappedValue(progress));

        if (progress > 0)
        {
            this.checkbox.setChecked(true);
            isChecked = true;
        }

    }


    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // TODO Auto-generated method stub

    }


    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        // TODO Auto-generated method stub

    }




    public int getStartRange() {
        return startRange;
    }


    public void setStartRange(int startRange) {
        this.startRange = startRange;
    }


    public int getEndRange() {
        return endRange;
    }


    public void setEndRange(int endRange) {
        this.endRange = endRange;
    }


    public int getDefaultValue() {
        return defaultValue;
    }


    public void setDefaultValue(int defaultValue) {
        this.defaultValue = defaultValue;
    }


    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) 
    {

        this.isChecked = isChecked;

        if (isChecked == false)
        {
            this.seekbar.setProgress(0);
        }

        this.editBox.setText("" + getMappedValue(0));
    }



    public String getMappedValue(int current)
    {
        if (current < this.getMappings().size())
        {
            return this.getMappings().get(current);
        }



        return "" + current;


    }

    public List<String> getMappings() {
        return mappings;
    }


    public void setMappings(List<String> mappings) {
        this.mappings = mappings;
    }

    public void addMappings(String mapping) {
        this.mappings.add(mapping);
    }
    public boolean isChecked() {
        return isChecked;
    }


    public String getCurrentValue()
    {
        return this.editBox.getText().toString();
    }
    public void setChecked(boolean isChecked) {
        this.isChecked = isChecked;
    }


}

The layout I inflate in the constructor:

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

   <CheckBox
        android:id="@+id/checkBox_item_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item Name" />



    <EditText
        android:id="@+id/editText_item_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:enabled="false"
        android:ems="10" >

    </EditText>


    <SeekBar
        android:id="@+id/seekBar_item_count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</LinearLayout>

/res/values/attr.xml (for passing custom attributes to the widget):

<?xml version="1.0" encoding="utf-8"?>
<resources>
       <declare-styleable name="SeekChoice">
            <attr name="startRange" format="integer"/>
            <attr name="endRange" format="integer"/>
            <attr name="defaultValue" format="integer"/>                
            <attr name="isChecked" format="boolean"/>       




       </declare-styleable>

</resources>

The Layout file where I include the widget:

    <RelativeLayout android:layout_width="fill_parent"
        android:layout_height="match_parent" 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:custom="http://schemas.android.com/apk/res/com.example.lobsternav">
.....
.....

<com.example.lobsternav.widget.SeekChoice
android:layout_width="match_parent"
android:layout_height="wrap_content"
custom:defaultValue="10"
/>

.....
.....

</RelativeLayout>

Things that wasted my time so Ill share with everyone:

1). Make sure to add all the constructors of the class you are overriding

2). The namespace (in my example it is "xmlns:custom="http://schemas.android.com/apk/res/com.example.lobsternav") must be the package name where your R resides and not the package where the widget resides.

3). in the attr.xml file the tag declare-styleable does not autocomplete in the eclipse xml editor so it does not look like a valid tag - but IT IS. I read 2 other posts saying to use this but the android eclipse plug in was not showing this as a valid tag under resources so I almost didnt try using the tag.

score 0 · Answer 2 · answered Sep 09 '12 at 12:01

0

Option #1: Don't package it into a custom widget, but rather into a fragment.

Option #2: Create a subclass of LinearLayout that sets its orientation to horizontal and inflates a layout file into itself containing what you have above with a merge tag replacing the LinearLayout (or adding its children directly in Java code, if you prefer and do not need layout-level customizablility). The LinearLayout can then wire up the event listeners in its children and whatnot.

answered Sep 09 '12 at 12:01

CommonsWare

986,068
189
2,389
2,491

I was attempting the second option but was getting some exceptions. I will post the code and the exception in the original post. – George Sep 10 '12 at 01:18
@George: Here is an example of a custom `LinearLayout`, if that is what you mean: http://stackoverflow.com/a/12318422/115145 – CommonsWare Sep 10 '12 at 11:00

Custom Widget composed of other existing views

2 Answers2