How to Create Shine Effect in Android?

Shine Effect is used to give an ImageView, Button, or a View a better animation look. It is very easy to implement. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language.

Step by Step Implementation

Step 1: Create a new project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language

Step 2: Working with the activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="80dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/bg_circular"
            android:gravity="center"
            android:weightSum="6">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:src="@drawable/ic_baseline_add_24" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="Create"
                android:textColor="@color/white"
                android:textSize="20sp" />

        </LinearLayout>

        <!--This is the view which we will be animating
            in order to show shine effect-->
        <View
            android:id="@+id/shine"
            android:layout_width="30dp"
            android:layout_height="85dp"
            android:background="@drawable/bg_shine"
            android:rotation="20" />

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Create bg_circular.xml inside the drawable folder we will use it as the background of the Linear Layout

Refer to the How to Create Drawable Resource XML File in Android Studio.

XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="40dp"/>

    <solid
        android:color="#308D46"/>
</shape>

Step 4: Create bg_shine.xml inside the drawable folder we will use this as the background of our animating view

XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:centerColor="#AAffffff"
        android:endColor="#00ffffff"
        android:startColor="#00ffffff"/>
</shape>

Step 5: Create left_right.xml inside the anim folder of res. We will use this animation to show it in our View

Refer to this article How to Create Anim Folder & Animation File in Android Studio.

Folder Structure:

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="100%p"
        android:duration="1500"
        />
</set>

Step 6: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

import android.os.Bundle
import android.view.View
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    // Initialize the view
    lateinit var shine: View

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // attach it with the id of view
        // that we will animate
        shine = findViewById(R.id.shine)
        shineAnimation()
    }

    private fun shineAnimation() {
        // attach the animation layout Using AnimationUtils.loadAnimation
        val anim = AnimationUtils.loadAnimation(this, R.anim.left_right)
        shine.startAnimation(anim)
        // override three function There will error
        // line below the object
        // click on it and override three functions
        anim.setAnimationListener(object : Animation.AnimationListener {
            // This function starts the
            // animation again after it ends
            override fun onAnimationEnd(p0: Animation?) {
                shine.startAnimation(anim)
            }

            override fun onAnimationStart(p0: Animation?) {}

            override fun onAnimationRepeat(p0: Animation?) {}

        })
    }
}

Output:

Github repo here.