Apply Material ripple to ViewPager item

Question

I would like to add a Material design ripple effect to the Views shown by a ViewPager. My team has been able to do that in other parts of our app by setting ?attr/selectableItemBackground as the background of a View. However, when I assign that as the background of the View returned by my ViewPager's adapter, the effect doesn't seem to work. Has anyone gotten that to work?

From experience, it seems that ViewPagers consume events that prevent certain interactions with their children. For example, ViewPager items don't get onClick() events and you have to work around that in other ways. I wonder if there isn't a similar issue here, where the ViewPager is consuming events that are needed for the ripple to work.

Answer 1

You simply have to put your xml view into a FrameLayout like this:

old layout:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/viewpager_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:scaleType="centerCrop"/>

        <ProgressBar
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:indeterminateDrawable="@drawable/progress_medium_holo"
        android:visibility="gone" />

    </RelativeLayout>

new layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:foreground="?android:attr/selectableItemBackground"
    android:selectable="true">

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

        <ImageView
          android:id="@+id/viewpager_image"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:contentDescription="@string/app_name"
          android:scaleType="centerCrop"/>

        <ProgressBar
          android:id="@+id/loading"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerInParent="true"
          android:layout_gravity="center"
          android:indeterminateDrawable="@drawable/progress_medium_holo"
          android:visibility="gone" />

    </RelativeLayout>

</FrameLayout>

Answer 2

The view pager is intended for swiping, so if you want to click it, you need to specify that, either programmatically, or in the XML file. For instance, add these attributes to the layout of the item of your view pager, not the view pager itself.

android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"