how to set a selector for a child in LinearLayout

Question

I want to create this effect

Initially

and when pressed to be shown like this.

I Know that the first thing that comes to mind is a selector. But each child is a LinearLayout out with a background set to white with an ImageView and with a TextView. So I guess I shoud set a selector for the whole child. A thing that I don't know if and how it can be done. So if you have any ideas please give me some help. This is the xml of the layout:

<LinearLayout
                    android:id="@+id/line_1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_above="@+id/line_2"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:baselineAligned="false"
                    android:gravity="center_vertical" >

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:layout_weight="1"
                        android:background="#FFFFFF"
                        android:gravity="center_horizontal"
                        android:clickable="true"
                        android:orientation="vertical" >

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="50dp"
                                android:clickable="true"
                                android:src="@drawable/sights_selector" />

                            <TextView
                                android:id="@+id/corfu_textView"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:text="Sights"
                                android:gravity="center"
                                android:textSize="10sp" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:layout_weight="1"
                        android:background="#FFFFFF"
                        android:gravity="center_horizontal"
                        android:orientation="vertical" >

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="50dp"
                                android:src="@drawable/activities_selector" />

                           <TextView
                               android:id="@+id/epirus_textView"
                               android:layout_width="match_parent"
                               android:layout_height="wrap_content"
                               android:gravity="center"
                               android:text="Activities"
                               android:textSize="10sp" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="1dp"
                        android:layout_weight="1"
                        android:background="#FFFFFF"
                        android:gravity="center_horizontal"
                        android:orientation="vertical" >

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="50dp"
                                android:src="@drawable/accomodation_selector" />

                            <TextView
                                android:id="@+id/vlora_textView"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:text="Accomodation"
                                android:gravity="center"
                                android:textSize="10sp" />

                    </LinearLayout>

                   <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center_horizontal"
                        android:layout_weight="1"
                        android:background="#FFFFFF"
                        android:orientation="vertical">

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="50dp"
                                android:src="@drawable/villages_selector" />

                            <TextView
                                android:id="@+id/vlora_textView"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:text="Villages"
                                android:gravity="center"
                                android:textSize="10sp" />

                    </LinearLayout>

                </LinearLayout>

Answer 1

Create a folder drawable under res

and create selector of your images like selector1.xml

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

    <item android:drawable="@drawable/home_selected" android:state_selected="true"></item>
    <item android:drawable="@drawable/home_unselect" android:state_selected="false"></item>

</selector>

and paste to states of the imageView in hdpi or mdpi .

and set the Layout background like

android:background="@drawable/selector"

it will automatically do what you want without any programming.

when the LinearLayout is selected the drawable home_selected will be shown and when it is not selected the home_unselected.png will be displayed. Inside the selector you can also change other attributes