How to combine effects for custom views in a recycler view?

Viewed 35

I have a a RecyclerView with rows that look like this. I would like to give it a ripple effect when it's tapped on.

enter image description here

The recycleview can have two types of rows. Hence I populate the types programatically:

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DefaultViewHolder {
        val layoutInflater = LayoutInflater.from(parent.context)
        val inflatedView: View = when (viewType) {
            ProductType.PRODUCT.ordinal -> layoutInflater.inflate(R.layout.row_product, parent, false)
            else -> layoutInflater.inflate(R.layout.row_product_trial, parent, false)
        }
        return DefaultViewHolder(inflatedView)
    }

row_product.xml from above looks like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/premium_buttons"
    android:clickable="true"
    android:focusable="true">

    <TextView tools:text="One Week" />

    <TextView tools:text="1.99" />

</LinearLayout>

premium_buttons.xml is responsible for the shadow and rounded corners:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#CABBBBBB" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="1dp"
        android:right="3dp"
        android:top="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

So how do I get a ripple effect when it's clicked on? Keep in mind I'm supporting API 19. So I need a custom highlight for devices below 21 and ripple above 21.

so I have a custom_ripple.xml for API 19

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/accent" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

And the same template for version 21 and above:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/accent">

    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

But how can I combine my default shadowed white version by default and show custom_ripple when it's tapped?

Many Thanks

0 Answers
Related