How to make a radial reaction?

Question

Here, after button touch, it draws a circle under it. How to implent this?

Have a look at :- http://stackoverflow.com/a/24866786/1384010 — Adarsh Yadav, Aug 01 '15 at 16:28
Have a look at this http://stackoverflow.com/questions/26604134/how-to-achieve-ripple-animation-using-support-library-in-android — Ansal Ali, Aug 07 '15 at 11:51
What have you tried? SO is really not made for asking others to write your code for you. — Max von Hippel, Aug 07 '15 at 22:45
@MaxvonHippel I wanted to found any ready realizations. That's the situation when it's better to use libs — kandi, Aug 08 '15 at 17:35
In that case this question is asking for a library or code suggestion, which can is too broad for SO. — Max von Hippel, Aug 08 '15 at 22:00
How the question with video can be UNCLEAR??? I don't understand the SO.... — kandi, Sep 03 '15 at 16:41

Alexios Karapetsas · Answer 1 · 2016-05-16T14:14:47.793

It's called the ripple effect and it has been introduced together with the material designs. if you want to support and the pre-lollipop devices as well, you'll need two different implementations. To do so, open your res folder and create two additional folders. Name the first drawable(if it's doesn't already exists) and the second drawable-v21(will be used by devices running lollipop or later API). In the drawable-v21 folder, create a file which will be named add_button_selector.xml, and add the following code:

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

Now, in the drawable folder add the following three XML files:

add_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#00000000"/> 
</shape>

add_button_selected.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/buttonColorPressed"/>
</shape>

add_button_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/add_button_selected"/>
    <item android:state_pressed="true" android:drawable="@drawable/add_button_selected"/>
    <item android:drawable="@drawable/add_button"/>
</selector>

Now into your layout file that the button exists, update its code with the following lines:

<Button
        ....
        android:background="@drawable/add_button_selector"
        android:stateListAnimator="@null"
        />

The button will be transparent at the beginning and it will match your background color. The buttonColorPressed it's gonna be the darker grey color, that will be appeared when you click on it. So, you can set it yourself into the one that fits the best. However, in your case you I think that you just need to add opacity(alpha) on the transparent background.Therefore you can try to set the buttonColorPressed as #20000000 i.e:

Replace:

android:color="@color/buttonColorPressed"

With

android:color="#20000000"

However, the code above in the pre-lollipop devices is not gonna have the animation sense of the ripple effect as in lollipop devices. In this case you might need to include in your project the following library: https://github.com/balysv/material-ripple, which will help you integrate easily the animated effect.

It doesn't seem to be animated, does it? – kandi Aug 02 '15 at 11:36 — kandi, Aug 02 '15 at 11:36
@danpetruk Please have a look on my updated answer. – Alexios Karapetsas Aug 03 '15 at 17:33 — Alexios Karapetsas, Aug 03 '15 at 17:33

score 0 · Answer 2 · answered Aug 08 '15 at 12:20

0

A simple was to do this is to use the ?attr version that will match your current OS version.

android:background="?attr/actionBarItemBackground"

or(when not in the actionbar)

android:background="?selectableItemBackgroundBorderless"

answered Aug 08 '15 at 12:20

Mark Hetherington

1,612
14
24

How to make a radial reaction?

2 Answers2