Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cardview ripple effect doesn't work

Min SDK is 21. When I click on a cardview in my recycler adapter, the ripple effect doesn't happen and just goes to the next screen. The recyclerview is inside a fragment.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:id="@+id/entire_card"
        android:layout_width="match_parent"
        android:layout_height="265dp"
        android:layout_margin="8dp"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardUseCompatPadding="true"
        app:cardCornerRadius="2dp"
        >


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ProgressBar
                android:id="@+id/progressbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_centerHorizontal="true"
                android:paddingTop="120dp"
                android:visibility="visible"/>


            <ImageView
                android:id="@+id/pet_image"
                android:layout_width="match_parent"
                android:layout_height="210dp"
                android:layout_alignParentTop="true"
                android:scaleType="centerCrop"
                android:src="@drawable/placeholder"
                android:visibility="gone"
                 />

            <TextView
                android:id="@+id/pet_description"
                android:layout_width="fill_parent"
                android:layout_height="55dp"
                android:layout_below="@+id/pet_image"
                android:padding="10dp"
                android:textColor="#FFFFFF"
                android:visibility="gone"
                android:textSize="20sp"
                android:background="@color/primaryColour"
                />

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

</LinearLayout>

Adapter code where I have my onClick for each item.

public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView petInfo;
        public ImageView imgURL;
        public ProgressBar progressBar;

        private Context itemContext;
        public ViewHolder(View v){
            super(v);
            imgURL = (ImageView) v.findViewById(R.id.pet_image);
            petInfo = (TextView) v.findViewById(R.id.pet_description);
            progressBar = (ProgressBar) v.findViewById(R.id.progressbar);

            itemContext = v.getContext();

            v.setOnClickListener(this);
        }

        @Override
        public void onClick(View v){

            Intent intent= new Intent(itemContext, DetailCardLayout.class);
            Integer position = getAdapterPosition();
            intent.putExtra("CARDVIEW_POSITION", position);
            v.getContext().startActivity(intent);

        }
    }
like image 887
DessertsAndStuff Avatar asked Feb 18 '17 17:02

DessertsAndStuff


People also ask

How do I add ripple effect to CardView?

Adding Ripple Effect To enable this behavior, add the following attributes to your CardView . Using the android:foreground="? android:attr/selectableItemBackground" property on a CardView enables the ripple effect to originate from the touch origin.

When should I use CardView?

CardView is a new widget in Android that can be used to display any sort of data by providing a rounded corner layout along with a specific elevation. CardView is the view that can display views on top of each other. The main usage of CardView is that it helps to give a rich feel and look to the UI design.

What is elevation in CardView?

Before Lollipop, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

What is ripple effect in Android?

The touch feedback in Android is a must whenever the user clicks on the item or button ripple effect when clicking on the same, gives confidence to the user that the button has been clicked so that they can wait for the next interaction of the app.


2 Answers

Your card view contains relative layout which covers the card view surface, so write ripple effect in relative layout.

<android.support.v7.widget.CardView 
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardPreventCornerOverlap="false"
    app:cardElevation="2dp"
    app:cardUseCompatPadding="false"
    app:cardCornerRadius="2dp"
    android:layout_marginBottom="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginLeft="8dp"
    >
    <RelativeLayout
        android:id="@+id/rl_bookmark"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"> ...
like image 172
Inam Ur Rehman Avatar answered Oct 07 '22 01:10

Inam Ur Rehman


Try to Add

android:clickable="true"

to your card view xml

like image 2
Atef H. Avatar answered Oct 07 '22 00:10

Atef H.