Have different icons for ImageView when not enabled

Question

In my app I have a slider which slides between 2 different linear layouts where there are located the language image buttons as shown below. I want these icons to be in grayscale, and colored only when tapped by the user. I have all the icons in grayscale version, I'm just missing that xml line. Thank you for your time

EDIT I forgot to post the xml for the linear 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="60dp"
android:gravity="center_horizontal" >

        <ImageView
            android:id="@+id/galika"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/gallika"
            android:layout_weight="1" />

        <ImageView
            android:id="@+id/germanika"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/germanika"
            android:layout_weight="1" />

        <ImageView
            android:id="@+id/ellinika"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/ellinika"
            android:layout_weight="1" />

        <ImageView
            android:id="@+id/agglika"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/agglika"
            android:layout_weight="1" />

 </LinearLayout>

Answer 1

You can use selector as ImageViews src.

selector_flag.xml :

 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/pressed_flag" android:state_pressed="true"/>
    <item android:drawable="@drawable/normal_flag"/>
</selector>

Then just set this as ImageViews src

ImageView iv = new ImageView(context);
iv.setImageDrawable(getResources().getDrawable(R.drawable.selector_flag))

Answer 2

Use a selector to concrete the states:

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

You also may define other drawables or other shapes on the different states.

Answer 3

Create a xml name, say flag_icon.xml and put this in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/color_version_image" android:state_pressed="true"/>
    <item android:drawable="@drawable/greyscale_version_image"/>

</selector>

Now this xml will act as image selector. set this xml as drawable in your ImageButton as...

android:background="@drawable/flag_icon"

if you want set programmatically then try this...

ImageButton iv = findViewById(R.drawable.your_imagebutton_id);
iv.setImageDrawable(getResources().getDrawable(R.drawable.flag_icon))