android selector for clickable layout with imageview

Question

guys if i have such layout

<?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="match_parent"
    android:background="@drawable/deals_list_item_bckg"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="15dp"
        android:background="@drawable/deals_list_item_background"
        android:clickable="true"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="85dp"
            android:layout_height="50dp"
            android:scaleType="fitXY"
            android:src="@drawable/btn_unpressed" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|right"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="10dp"
                android:text="My Account"
                android:textSize="16sp" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

the result is

is it any way to write selector that will be change only imageView's img when state is pressed

like this

or show me plz how can i do such button, because the problem is that the right part of button also need background image, and left part is image view that must change it image when pressed on right part (layout)

Answer 1

Unless you plan on adding a ton of views to that button layout at runtime...its overly complicated for what you need it to do. Here's a much simpler version that should suite you fine:

<?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="50dp"
android:layout_margin="15dp"
android:clickable="true"
android:orientation="horizontal">

<ImageView
    android:layout_width="85dp"
    android:layout_height="match_parent"
    android:scaleType="fitXY"
    android:duplicateParentState="true"
    android:src="@drawable/btn_background" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical|right"
    android:background="@drawable/your_grey_bar"
    android:paddingRight="10dp"
    android:text="My Account"
    android:textSize="16sp" />
</LinearLayout>

Then in res/drawable you'll want to define btn_background.xml as follows:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/btn_default_disabled_focused" android:state_focused="true" android:state_enabled="false"/>
<item android:drawable="@drawable/btn_default_focused" android:state_focused="true" android:state_enabled="true"/>
<item android:drawable="@drawable/btn_default_disabled" android:state_enabled="false"/>
<item android:drawable="@drawable/btn_default_pressed" android:state_pressed="true"/>
<item android:drawable="@drawable/btn_default_normal" />

</selector>

The trick here is that the LinearLayout is made clickable. That way the user can click anywhere on the 'button'. Then have the ImageView duplicate it's parent state. Which means whenever the LinearLayout changes it's state (Eg, enabled, focused, pressed, etc), the ImageView will also receive it. Whereby the selector drawable will do its thing and update for you.

Answer 2

use the Android provided style as below

<ImageView
    android:src="@drawable/sky_image"
    style="@style/Widget.AppCompat.ActionButton"
    ...
/>

and you will get the tint effect onClick

source