Perform ripple effect for long clicks

Question

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.

Have u check this https://stackoverflow.com/questions/35374861/ripple-effect-on-textview-long-click — AskNilesh, Aug 30 '18 at 09:38
So you want to perform a ripple effect on long press on RecyclerView item? — Ümañg ßürmån, Aug 30 '18 at 09:40
@NileshRathod I had seen it but didn't try it as the comment suggested it wouldn't work (and as I was kind of tired when I saw it). I'll give it a try right now — tom gautot, Aug 30 '18 at 09:40
@UmangBurman Exactly but you should check the stack overflow question I linked for the actual anymation, there is a youtube link — tom gautot, Aug 30 '18 at 09:42
Okay, I've gone through it.. I've some coding from my project and I'll tell you the steps.. Try implementing it, as it's a little hack thing so I'll tell you the steps.. Okay? — Ümañg ßürmån, Aug 30 '18 at 09:47
@UmangBurman I use LinearLayout but I could change it to constraint in no time — tom gautot, Aug 30 '18 at 09:52
In my project, it ripples if your click, but doesn't ripple if you long click but instead it animates and holds the ripple color then when you release it, it ripples.. Is it fine for you? — Ümañg ßürmån, Aug 30 '18 at 09:54
@UmangBurman not exactly, that actually is the basic behavior of `?android:attr/selectableItemBackground` or simply creating a ripple.xml file and giving it a custom color. — tom gautot, Aug 30 '18 at 09:58
but in my app, I used something like this `android:color="?android:colorControlHighlight"` in ripple.xml .. And I dont give the ripple.xml drawable to the item, instead I add a Transparent button which acts as an Item of Recycler View — Ümañg ßürmån, Aug 30 '18 at 10:00

score 1 · Answer 1 · answered Aug 30 '18 at 10:24

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.

Well, the animation is not the expected one. But it is a really nice trick that might be useful in other circumstances so thanks a lot for teaching me that! — tom gautot, Aug 30 '18 at 10:30

score 0 · Answer 2 · answered Aug 30 '18 at 09:41

0

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>

answered Aug 30 '18 at 09:41

Gourango Sutradhar

1,461
10
16

As the foreground? Are you sure? Also how does this address the long click? – Alex.F Aug 30 '18 at 09:46
Doesn't have the expected behavior: it feels just like the *selectableItemBackgournd* attribute from R.attr. Check the linked SO question from my question in which there is a link to a viedo showing the desired effect – tom gautot Aug 30 '18 at 09:47
to gain the same ripple as the video you need to use an external livrary from github named `android-ripple-background` – Gourango Sutradhar Aug 30 '18 at 09:52

score 0 · Answer 3 · answered Aug 30 '18 at 09:47

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"
>......

Pretty much same answer as below so: no it doesn't give me the expected behavior check the video in the link in the question to see the desired effect — tom gautot, Aug 30 '18 at 09:51

Perform ripple effect for long clicks

3 Answers3