Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ripple effect over imageview

To describe my problem i created small example.

I have linearlayout with imageview and textview. For linearlayout i've set ripple drawable as background. But when i click or long click on linearlayout ripple animation shows under imageview. How show animation over imageview ?

main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/ripple"
        android:clickable="true"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:src="@mipmap/index" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is ripple test"
            android:textColor="#FF00FF00" />
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

drawable-v21/ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FFFF0000">   
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF000000"/>
        </shape>
    </item>    
</ripple>

drawable/ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FFFF0000" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FFFF0000" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FF000000" />
        </shape>
    </item>    
</selector>

screenshot how it looks now: enter image description here

like image 316
Anton111111 Avatar asked Dec 28 '16 14:12

Anton111111


People also ask

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

Add the ripple like this

android:foreground="?android:attr/selectableItemBackground"

based on this answer https://stackoverflow.com/a/35753159/2736039

like image 168
Ultimo_m Avatar answered Sep 28 '22 08:09

Ultimo_m


Add android:background="@null" for the ImageView

like image 33
Ajay Sivan Avatar answered Sep 28 '22 08:09

Ajay Sivan