Question

I have a custom component that is a combination of LinearLayout + ImageViewx2 + TextView. The custom component is clickable, and I’d like to show give the user visual feedback when they click on it by flashing orange background similar to a button. I created the following drawable hoping to use different styles based on the internal state of the component. Here is the drawable:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_pressed="true" android:drawable="@drawable/sunshine_gradient" />
   <item android:state_focused="true" android:drawable="@drawable/winter_background" />
   <item android:drawable="@drawable/component_background" />
</selector>

I also defined a style that references the drawable:

<style name="navigation_item" parent="android:Theme.Dialog">
    <item name="android:background">@drawable/navigation_item</item>
</style>

Then assigned that to the component using:

<?xml version="1.0" encoding="utf-8"?>

<merge xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_height="wrap_content"
   android:layout_width="fill_parent"
   android:padding="5dp"
   android:orientation="horizontal"
   android:clickable="true"
   style="@style/navigation_item">

<ImageView android:id="@+id/navigationIcon"
           android:layout_height="wrap_content"
           android:layout_width="wrap_content"
           android:layout_marginRight="5dp"/>

<TextView android:id="@+id/navigationTitle"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:layout_weight="1.0"
          android:singleLine="true"
          style="@style/favoriteTitle"
          android:layout_marginRight="5dp"/>

<ImageView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/right_arrow"/>
</merge>

My component code is:

public class NavigationItem extends LinearLayout {

public NavigationItem(Context context, AttributeSet attrs) {
    super(context, attrs);
    setOrientation(HORIZONTAL);
    setGravity(Gravity.CENTER);
    setWeightSum(1.0f);
    setClickable(true);

    LayoutInflater.from(context).inflate(R.layout.navigation_item, this, true);

    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.NavigationItem, 0, 0 );

    String title = array.getString(R.styleable.NavigationItem_title);
    if( title == null ) title = "";
    ((TextView)findViewById(R.id.navigationTitle)).setText(title);

    Drawable icon = array.getDrawable(R.styleable.NavigationItem_icon);
    if( icon != null ) {
        ((ImageView)findViewById(R.id.navigationIcon)).setImageDrawable(icon);
    }

    array.recycle();
}

}

It appears the component is picking up the drawable since it does have @drawable/component_background by default. It doesn’t work when I click on it. I don’t see the state change to pressed or focus. Can this be done on default LinearLayout?

Answer 1

Looks like I’m going to answer this one myself. Turns out the merge tag can’t specify style attribute on that tag. So by specifying the style on the usage of NavigationItem in XML or in the code makes this all work out.