Skip to content
Related Articles

Related Articles

Improve Article
How to Create Shine Effect in Android?
  • Last Updated : 23 Feb, 2021

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: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"?>
    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"?>
    <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"?>
    <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.

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :