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:

במקום להוסיף את זה בתור `background` תוסיף אותו בתור `foreground` ככה: android:background="#ffffff" android:foreground="?android:selectableItemBackground" — J El, Oct 02 '21 at 21:52

Matej Scolopax · Answer 1 · 2016-08-23T11:43:20.780

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"

Does the first option provide a ripple effect on pre API 21 devices ?? That is, Android 4.x,x — Noah, Oct 03 '21 at 00:25

score 3 · Answer 2 · answered Jun 14 '19 at 10:30

3

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">

answered Jun 14 '19 at 10:30

Johnett Mathew

307
1
10
20

1

This worked way easy as compared to other solutions – Maverick Sep 30 '20 at 07:14
This is good but only applicable for API 23+ – YaMiN May 19 '21 at 15:08
My app still supports Android 4.0, so I can't actually use this – Noah Oct 02 '21 at 23:49
Did you try @Matej Scolopax answer? – Johnett Mathew Oct 07 '21 at 05:44

score 1 · Answer 3 · answered Jul 12 '17 at 03:27

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>

Adding selectableItemBackground and also coloring background

3 Answers3