Ripple effect on Buttons placed over KenBurnsView doesn't work

[aritraroy]

I have the KenBurnsView and a button over it in a FrameLayout. Now, I am using a Ripple Effect on the button when clicked.

Previously before using KenBurnsView (I just had a simple ImageView) the ripple used to draw over the ImageView.

But now as I replaced the ImageView with this, the ripple draws below it. How can this be solved?

[flavioarfaria]

Hey aritraroy,

Could you provide a simple code example please?

Thanks

[aritraroy]

I have a layout with a KenBurnsView and an ImageView over it (just a toggle button). When I click on the button a Ripple is generated but is drawn below the KenBurnsView.

Previously, when I had an Image view in replacement to the KenBurnsView the Ripple was drawn above the ImageView on the top.

Here is my layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background"
    android:clickable="true"
    android:orientation="vertical">


    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="@dimen/nav_drawer_header_height">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.flaviofaria.kenburnsview.KenBurnsView
                android:id="@+id/header_cover"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/cover_1" />

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

                <ImageView
                    android:id="@+id/header_toggle"
                    android:layout_width="50dp"
                    android:layout_height="30dp"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginBottom="10dp"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    android:src="@drawable/toggle_down" />

            </RelativeLayout>

        </FrameLayout>

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/nav_toggle_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></RelativeLayout>

</LinearLayout>

This is my ripple drawable XML:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white"
    android:drawSelectorOnTop="true"> <!-- ripple color -->

</ripple>

This is how I am adding the ripple:

toggle.setBackground(getResources().getDrawable(R.drawable.ripple));

What is the problem because of which the Ripple gets drwan below the KenBurnsView? It used to work perfectly when there was an ImageView in place of the KenBurnsView?

[aritraroy]

I updated the comment. Any help would be really appreciated?

[flavioarfaria]

I couldn't reproduce it. I'm not really sure what you're trying to achieve. To me, it doesn't make sense to set a ripple as the background of an image. You could, however, try to wrap the toggle in a FrameLayout and set the ripple to android:foreground of this FrameLayout.

[aritraroy]

Okay, that's a good solution. I would be surely trying that out. Thanks for your help.