javaandroidxmllistviewripple

Create Ripple Effect on ListView Item for API < & > 21


I have the below XML and am trying to create a ripple effect onClick. The background of each item in the ListView is black, so ideally the ripple effect would generate some sort of grey color:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:orientation="vertical">

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/white" />


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@color/black"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/placeholder" />

    <TextView
        android:id="@+id/latest_item_question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textSize="12sp" />

</LinearLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/white" />

The code creates the following. Note that I want to cover pre and post Lollipop:

enter image description here


Solution

  • Try create two background one ripple and other without ripple for api pre Lollipop create in drawable

    ripple_gray.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Non focused states -->
        <item android:state_pressed="true">
            <shape xmlns:android="http://schemas.android.com/apk/res/android" >
                <corners android:radius="3dp"/>
                <solid android:color="@android:color/white"/>
            </shape>
        </item>
    
        <item>
            <shape xmlns:android="http://schemas.android.com/apk/res/android" >
                <corners android:radius="3dp"/>
                <solid android:color="@android:color/black"/>
            </shape>
        </item>
    </selector>
    

    create in drawable-v21 ripple_gray.xml

    <?xml version="1.0" encoding="utf-8"?>
       <ripple xmlns:android="http://schemas.android.com/apk/res/android"
          android:color="@android:color/white">
       <item android:drawable="@android:color/black"/>
    </ripple>
    

    change in your XML layout background using ripple_gray created and add id

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackground"
        android:orientation="vertical">
    
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/white" />
    
    <LinearLayout
        android:id="@+id/viewId"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@drawable/ripple_gray"
        android:orientation="horizontal">
    
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/placeholder" />
    
    <TextView
        android:id="@+id/latest_item_question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textSize="12sp" />
    </LinearLayout>
    
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/white" />
    
    </LinearLayout>
    

    in your ACtivity in onCreate() or where you need

    findViewById(R.id.viewId).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                
            }
        });