several controls in one with drawable background (

Question

Hi I am trying to accomplish the following:

I have a control that supposed to render 3 android standard controls: imageview and a textview. I am trying to wrap them up in one control with gradient background , so it looks like one button.

Here is what I tried: in the layout file for the control I added a button

<Button android:id="@+id/btnCustomButton" android:layout_width="214dp" android:drawable="@drawable/custom_button" android:background="@drawable/custom_button_background" android:gravity="center_horizontal" android:layout_height="39dp" />

in the custom_button.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:height="33dp" android:width="214dp">
   <ImageView
  android:gravity="left|center_horizontal" android:id="@+id/btn_icon" android:layout_width="fill_parent"  android:layout_height="27dp" />

   <TextView android:id="@+id/txtLabel" android:textSize="15px" android:textColor="@color/main_text_black" android:text="Search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:singleLine="true" />
</shape

in the custom_button_background.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="15dp" android:state_pressed="true">
            <shape android:shape="rectangle">
              <gradient android:startColor="@color/gradient_hl_top" android:endColor="@color/gradient_hl_bottom" android:angle="270" />
            <stroke android:width="3dp" android:color="@color/main_text_black" />
            <corners android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
            </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
              <gradient android:startColor="@color/gradient_hl_top" android:endColor="@color/gradient_hl_bottom" android:angle="270" />
            <stroke android:width="3dp" android:color="@color/main_text_black" />
            <corners android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
            </shape>
    </item>
    <item>        
        <shape android:shape="rectangle">
              <gradient android:startColor="@color/_gradient_top" android:endColor="@color/gradient_bottom" android:angle="270" />
            <stroke android:width="3dp" android:color="@color/main_text_black" />
            <corners android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
            </shape>
    </item>
</selector>

I can't see the TextView printing "Search" but I see the gradient working. What am I doing wrong?

Answer 1

So here is how I did this:

1. I created a custom control with relative layout, set background of the layout to a selector custom_button_background.xml

2. Added ImageView and TextView inside the relative layout xml file of the custom control

3. Added on click listener to the control

The problem was that I was not able to see the highlight because the click was not handled.

The only problem I have right now is the ImageView has its own highlight state (different image) and needs a selector too. When I add a selector to it I cannot really see anything changes on the ImageView on click. Once I figure out the problem I will add the rest.