Perform ripple effect for long clicks

user_10007253 0
Viewed 1554

I'm currently implementing an app which has a RecyclerView in which there are several custom views. From each one of these views the user can open a context menu (which requires a long click) but it's quite hard to figure out as generally, they will just perform a simple click and then think there is nothing more to it. But if I manage to give some UI feedback it could be much clearer. The idea is a simple ripple animation that highlights the background an which wouldn't complete from a simple click but which would go all the way for a long click action.

As I have been stuck on this for two days I have done my research and actually found some SO questions asking the same thing, for example this one from Cheok Yan Cheng is very well written and he even posted a video showing the desired effect (my question is pretty much the exact same) but there are no good answers as the first one says that we should use ?attr/selectableItemBackground but the given effect is different from the one I'm aiming for and I tried the second one, it doesn't do anything for a simple click as you start the animation in onLongClick.

EDIT :

Note that the expected behavior cannot be achieved from ?attr/selectableItemBackground nor by creating a ripple xml file and then set it as the background as these will give a normal onClick animation and a different longClick animation from the desired one again, look at this video to see what the desired effect is.

rippledrawable android-animation android
3 Answers

Try to follow these steps, it might help:

Step1:

Create ripple.xml in drawable: (This is for Android >= v21)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <color android:color="@android:color/transparent" /> 
    </item>
</ripple>

In this line <color android:color="@android:color/transparent" /> will make your button transparent.

Step2:

in your item.xml where I used ConstraintLayout:

<Button
     android:id="@+id/btnItemClickOnRecyclerView"
     android:layout_width="0dp"
     android:layout_height="0dp"
     android:layout_centerInParent="true"
     android:layout_marginTop="16dp"
     android:background="@drawable/ripple"
     android:paddingBottom="4dp"
     android:text="@string/view_details"
     android:textColor="@color/White"
     android:textSize="14sp"
     android:textStyle="bold"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent"
     app:layout_constraintBottom_toBottomOf="parent" />

And That's it.

Since your button will be fully covering your Item and it will hover on top of other view, it will act like an item.

To implement longClick listener on the button, make sure you register it in holder and then holder.button.setOnLongClick......

Try it, If any doubts please comment.

user_97632530

Make a xml file named ripple.xml then set the ripple.xml as the foreground of your view. It will work like a charm!!!

<?xml version="1.0" encoding="utf-8"?>
<!-- An white rectangle ripple. -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#3fce29"
    tools:targetApi="lollipop">
    <item
        android:id="@android:id/mask"
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="#3fce29"/>
        </shape>
    </item>
</ripple>
user_93828700

Try this first make ripple effect xml

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/light_gray"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="@color/light_gray"/>
    </shape>
</item>
</ripple>

than your adapter decalr xml parent layout like LinearLayout or if use RelativLayout set background as below

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ripple"
>......
user_77797120
Related