Question

I’m trying to create a button-like component, with a left-aligned ImageView and then 2 TextViews to the right of the ImageView, stacked one above the other and formatted differently, like the following example:.

 __________________________
|                          |
| |-----|  Bold Main Text  | 
| |Image|                  |
| |-----|  Small Sub Text  |
|__________________________|

I also want the ImageView to change depending on the click state of the outer container, much like a standard button would do with a selectable resource associated with it. So that when I click anywhere in the outer box the image selectable state is changed.

I know I can use a Button, setting the ‘drawableLeft’ property to create a single line of text associated with an Image as a button, but it seems I can only have a single item of text using this strategy.

Has anyone implemented any UI components like this in the past?

Thanks!

Answer 1

You can add android:duplicateParentState="true" to the ImageView widget. Also you need to make the ImageView‘s parent clickable and focusable.

The RelativeLayout in the following code will act as a Button:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout:height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:duplicateParentState="true"
            android:src="@drawable/icon" />
        <TextView
            android:id="@+id/text1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/image"
            android:layout_alignTop="@+id/image"
            android:layout_alignWithParentIfMissing="true"
            android:duplicateParentState="true" />
        <TextView
            android:id="@+id/text2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"            
            android:layout_toRightOf="@+id/image"
            android:layout_below="@+id/text1"
            android:layout_alignWithParentIfMissing="true"
            android:duplicateParentState="true" />
    </RelativeLayout>
</LinearLayout>