CODEWITHSUNDEEP
androidmaterial-designandroid-recyclerviewandroid-cardview
Yuval Levy
Yuval Levy

Reputation: 2516

Adding selectableItemBackground and also coloring background

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: enter image description here

Upvotes: 9

Views: 9040

Answers (3)

Johnett Mathew
Johnett Mathew

Reputation: 327

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

Upvotes: 4

Hoya Hsu
Hoya Hsu

Reputation: 11

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>

Upvotes: 1

Matej Scolopax
Matej Scolopax

Reputation: 199

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"

Upvotes: 16

Related Questions