1

I created a button in Android like this, Button btn = new Button(getContext());

Initially, the button will be animated when I click on it. It becomes darker when I press on it, and it resumes to its original color when I release the button.

However, if I change the background color, such as btn.setBackgroundColor(Color.RED), the click animation will no longer there, and this really annoyed me.

What I want is simple, I just want to keep the click animation even I changed the button background color.


Updates:

Finally, I chose the library Material for my project in case anyone want to know.

There are several Material UI libraries on Github that backward support SDK version <21, however, it seemed that each of them has its own problems and bugs. Most of them support constructions of UI components using XML quite well, but they do not support construction in Java very well. For example, it seemed that the library I am using cannot construct Material style EditText programmatically in Java.

I tried RippleEffect, material-ripple and Material, and Material worked better in my case.

Tim
  • 123
  • 1
  • 2
  • 11
  • Create a XML for it. This person explains it well: [here](http://stackoverflow.com/a/7176006/4329778) – Stephen Apr 04 '17 at 19:21

2 Answers2

9

If you want to make a button with custom color and ripple effect, then you should use ripple drawable.

  1. Here is a ripple drawable, where button background color is RED and ripple color is WHITE. You can change color as per your needs.

ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#88FFFFFF"> <!-- Ripple color :: WHITE -->

    <item>
        <color android:color="#FF0000" /> <!-- Normal bg color :: RED -->
    </item>

    <!-- Make sure the ripple doesn't exceed the bounds -->
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>
  1. Put ripple_effect.xml file in your drawable folder.
  2. Use drawable ripple_effect as button background using android:background="@drawable/ripple_effect".

Here is your Button XML:

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_effect"
    android:text="Button">

</Button>

For Android api versions < 14

To achieve ripple effect, you can try balysv/material-ripple library.

  1. In your gradle, add below line :

compile 'com.balysv:material-ripple:1.0.2'

  1. Wrap your button with MaterialRippleLayout in your layout file.

  2. Addripple color using app:mrl_rippleColor="#88FFFFFF" and don't forget to use app:mrl_rippleOverlay="true" to show ripple effect over custom colored button

Here is your Button XML:

<com.balysv.materialripple.MaterialRippleLayout
    android:id="@+id/ripple"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:mrl_rippleColor="#88FFFFFF"
    app:mrl_rippleOverlay="true">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:text="Button">

    </Button>
</com.balysv.materialripple.MaterialRippleLayout>

OUTPUT:

enter image description here

Hope this will help~

Ferdous Ahamed
  • 21,438
  • 5
  • 52
  • 61
  • I forgot to mention that the minSdkVersion in my project is 16 (Android 4.1). Unfortunately, minSdkVersion 16 does not support ``. Is there any other way to implement this? – Tim Apr 04 '17 at 20:44
  • @Tim See my updated answer. For Android api versions < 14, you have to third party library. Its easy to use. Hope this will help you. – Ferdous Ahamed Apr 04 '17 at 21:05
  • ripple only available for api 21+ – Sinh Phan Apr 24 '20 at 04:25
0

if you want to make simple animation with press stat for your button go and make new xml file in drawble and past this code , and you can chose the color you prefer . after go the your button and set background with the name of your xml you created

`

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

    </item>

    <item>
        <shape>
            <solid android:color="@android:color/transparent"/>
            <corners android:radius="2dp"/>
            <stroke android:width="1dp" android:color="@color/amber"/>
        </shape>

    </item>
</selector>

`

jenos kon
  • 504
  • 4
  • 7