Android Animation Button – How to Add Animation Effect

Last Updated on February 24, 2021

Hi and welcome to another tutorial from Codingdemos, today you will learn how to create Android animation button using a 3rd party library called ShineButton. Open Android Studio and let’s get started 🙂

Android buttons with animation

Android buttons with animation. (Large preview)

In this tutorial you will be using a 3rd party library called ShineButton to create those cool Android button animations.

In this tutorial we will be using the following:

  • Android Studio version 4.1.2

  • Minimum SDK API 23

1- Open Android Studio.

Android studio 4.1.2 welcome screen

Android studio 4.1.2 welcome screen. (Large preview)

2- Open build.gradle (module:app) and add ShineButton library in the dependencies.


implementation 'com.sackcentury:shinebutton:1.0.0'

3- Now sync your project by clicking on Sync Now.

Android studio sync project

Android studio sync project. (Large preview)

4- Next open activity_main.xml and add the following code.


< EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Enter your comment..."/ >

I’ve added this EditText as an example as if you are building a comment/review screen for your app.

5- Next, will add the first ShineButton and that is the smile button.


< com.sackcentury.shinebuttonlib.ShineButton
    android:id="@+id/btnSmile"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:src="@android:color/darker_gray"
    app:btn_color="@android:color/darker_gray"
    app:btn_fill_color="@android:color/holo_green_dark"
    app:siShape="@raw/smile" />

Here you set the color of the button to Dark Gray, while you set the fill color as Dark Green. app:btn_fill_color is the attribute that you use to color the button after tapping on it.
app:siShape=”@raw/smile” is the attribute that allows you to choose the type of icon that you want to set for the button.

6- Now let’s add the like button.


< com.sackcentury.shinebuttonlib.ShineButton
    android:id="@+id/btnLike"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:src="@android:color/darker_gray"
    app:btn_color="@android:color/darker_gray"
    app:btn_fill_color="@android:color/holo_red_dark"
    app:siShape="@raw/like" />

Here you’ve changed the fill color to Dark Red, and you’ve set the button icon to like.

7- Let’s add the heart button.


< com.sackcentury.shinebuttonlib.ShineButton
    android:id="@+id/btnHeart"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:src="@android:color/darker_gray"
    app:btn_color="@android:color/darker_gray"
    app:btn_fill_color="@android:color/holo_blue_dark"
    app:siShape="@raw/heart" />

Here you’ve set the fill color to Dark Blue, and you’ve set the button icon to heart.

8- Finally, let’s add the star button.


< com.sackcentury.shinebuttonlib.ShineButton
    android:id="@+id/btnStar"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:src="@android:color/darker_gray"
    app:btn_color="@android:color/darker_gray"
    app:btn_fill_color="@android:color/holo_orange_dark"
    app:siShape="@raw/star" />

Here you’ve set the fill color to Dark Orange, and the button icon to star.

9- Let’s build and run the app to see the output.

Android custom buttons

Android custom buttons. (Large preview)

10- Let’s change the appearance of the layout by centering the buttons and give margins between each other. Will add the following code to every ShineButton view.


android:layout_gravity="center"
android:layout_marginTop="10dp"

11- Build and run the app to see the result.

Android custom button with animation

Android custom button with animation. (Large preview)

Android button animation effect

Android button with animation effect. (Large preview)

Customizing ShineButton View

In this section, you will learn how to apply certain types of customization to the ShineButton.

12- Let’s add a flash effect to the ShineButton view so that when the user taps on the button, it will show the flash effect. Add the following code inside the view.


app:enable_flashing="true"

13- Now build and run the app to see the result.

Android button flash animation effect

Android button flash animation effect. (Large preview)

14- You can add a random animation effect to the ShineButton view so that when the user taps on the button, it will show a random animation color effect. Add the following code inside the view.


app:allow_random_color="true"

15- Build and run the app.

Android button random animation effect

Android button random animation effect. (Large preview)

16- You can customize the flash animation effect by setting a number of how many light effects that you want to see when the user taps on the button.


app:shine_count="20"

17- Let’s see the final output.

Android color animation effect

Increase the number of color animation effect. (Large preview)

There are many other types of customizations that you can apply to the ShineButton view.

18- Here is the full of code of activity_main.xml file.


< ?xml version="1.0" encoding="utf-8"? >
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity" >

  < EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="Enter your comment..."
    android:inputType="text" />

  < com.sackcentury.shinebuttonlib.ShineButton
    android:id="@+id/btnSmile"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:src="@android:color/darker_gray"
    app:allow_random_color="false"
    app:btn_color="@android:color/darker_gray"
    app:btn_fill_color="@android:color/holo_green_dark"
    app:siShape="@raw/smile" />

  < com.sackcentury.shinebuttonlib.ShineButton
    android:id="@+id/btnLike"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:src="@android:color/darker_gray"
    app:allow_random_color="false"
    app:btn_color="@android:color/darker_gray"
    app:btn_fill_color="@android:color/holo_red_dark"
    app:siShape="@raw/like" />

  < com.sackcentury.shinebuttonlib.ShineButton
    android:id="@+id/btnHeart"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:src="@android:color/darker_gray"
    app:allow_random_color="false"
    app:btn_color="@android:color/darker_gray"
    app:btn_fill_color="@android:color/holo_blue_dark"
    app:siShape="@raw/heart" />

  < com.sackcentury.shinebuttonlib.ShineButton
    android:id="@+id/btnStar"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:src="@android:color/darker_gray"
    app:allow_random_color="false"
    app:btn_color="@android:color/darker_gray"
    app:btn_fill_color="@android:color/holo_orange_dark"
    app:siShape="@raw/star" />
< /LinearLayout>

19- I hope you find this tutorial helpful and if you have any questions please post them in the comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>