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