Adding selectableItemBackground and also coloring background

Question

I have added the selectableItemBackground on CardView that displays on recyclerview. each CardView show text and image. each Card is can be selected, and in order to add ripple effect when clicked I have added:

android:background="?attr/selectableItemBackground"

The problem is that now I cant set the background color. those two lines together show an error:

android:background="?attr/selectableItemBackground"
android:background="#FFFFFF"

How can I color the layout background and also add the ripple effect with selectableItemBackground.

complete card_view.xml code:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="2dp"
    card_view:cardCornerRadius="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:orientation="vertical">
        <!--CANT ADD THIS: android:background="#FFFFFF"-->

        <TextView
            android:id="@+id/singleTextLine"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="3dp"
            android:text="Test"
            android:textSize="30dp" />

        <ImageView
            android:id="@+id/singleImage"
            android:layout_width="fill_parent"
            android:layout_height="125dp"
            android:layout_gravity="center_horizontal"
            android:layout_margin="3dp" />

    </LinearLayout>
</android.support.v7.widget.CardView>

The problem is that I can't color the background in white while combining the ?attr/selectableItemBackground for ripple effect and then it looks like this:

Answer 1

You have 2 options:

1: Add parent linear layout:

parent layout has backgroundcolor and child layout has ripple efect

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:orientation="vertical">

       <TextView
            android:id="@+id/singleTextLine"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="3dp"
            android:text="Test"
            android:textSize="30dp" />

        <ImageView
            android:id="@+id/singleImage"
            android:layout_width="fill_parent"
            android:layout_height="125dp"
            android:layout_gravity="center_horizontal"
            android:layout_margin="3dp" />


    </LinearLayout>
</LinearLayout>

2 : Opton: Create drawable resource:bg_ripple.xml

one in folder drawable

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

another in folder drawable-v21

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/gray">
    <item android:drawable="@color/white" />
</ripple>

Then set as background this resource to your layout:

android:background="@drawable/bg_ripple"

Answer 2

Now we can achieve this in a better way.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF" //ACTUAL BACKGROUND
    android:foreground="?selectableItemBackground" //RIPPLE EFFECT
    android:orientation="vertical">

Answer 3

one more easy way is that put one more FrameLayout(setting background color) and includes original TextView

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/category_numbers">
<TextView
    android:id="@+id/numbers"
    style="@style/CategoryStyle"
    android:background="?android:selectableItemBackground"
    android:text="@string/category_numbers" />
</FrameLayout>