Using one pic to simulate a clicking button

README.md

Interduction

How to do

First way

First step

Create a xml named btn_single_selector.xml in drawable folder.

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/ic_btn_back_normal" />
    <item android:drawable="@drawable/ic_btn_back_normal" />
</selector>

Second step

Create a ColorDrawable named image_color.xml in color folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#fac300" />
    <item android:color="#00000000" />
</selector>

Final step

Set a imageview to your layout xml file.

<ImageView 
        android:layout_width="@dimen/image_size"
        android:layout_height="@dimen/image_size"
        android:layout_margin="5dp"
        android:tint="@color/image_color"
        android:src="@drawable/btn_single_seletor"
        android:clickable="true"/>

Easier way

First step

Create a bitmap.xml and we don't have to set the tint properties. :)

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_btn_back_normal"
    android:tint="#fac300" />

Second step

Just add a selector btn_selector.xml is done!

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/bitmap" />
    <item android:drawable="@drawable/ic_btn_back_normal" />
</selector>

Final step

We can set the selector.xml to ImageView or Button component.

<ImageView
            android:layout_width="@dimen/image_size"
            android:layout_height="@dimen/image_size"
            android:layout_margin="5dp"
            android:src="@drawable/btn_notint_seletor"
            android:clickable="true"/>

<Button
            android:layout_width="@dimen/image_size"
            android:layout_height="@dimen/image_size"
            android:layout_margin="5dp"
            android:background="@drawable/btn_notint_seletor"/>

The best way 👍

We can just omit the First step. Let two files become a file for reducing size. This is very elegant writing.

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <bitmap android:src="@drawable/ic_btn_back_normal" android:tint="#fac300" />
    </item>
    <item android:drawable="@drawable/ic_btn_back_normal" />
</selector>

!NOTE! ⚠

The best way's src cannot use svg file. It seems like just only can use png or jpg file.