Skip to content
Related Articles

Related Articles

Improve Article
How to Create Star Animation in Android?
  • Last Updated : 18 Apr, 2021

In this article, we are going to create star animation using an animated-star library. Here we will be creating a background drawable file and will specify the color for the animation. The star animation we have created is easy to create since we are using a library. 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. 

Create Star Animation in Android Sample GIF

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: Add dependency and JitPack Repository



Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.   

implementation ‘com.sofakingforever.libraries:animated-stars-android:1.1.4@aar’

Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.

allprojects {

 repositories {

   …

   maven { url “http://dl.bintray.com/sofakingforever/libraries” }

     }

}

After adding this dependency sync your project and now we will move towards its implementation.  

Step 3: Working with the colors.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="star_color_1">#ffffff</color>
    <color name="star_color_2">#25Adff</color>
    <color name="star_color_3">#FFC100</color>
    <color name="star_color_4">#FF3800</color>


</resources>

Step 4: Working with the array.xml file

Create an array.xml file in the values folder. Right-Click, then click on New > Values Resources File and then create a file with a name array.



<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer-array name="star_colors">
        <!-- This is how you can configure the ratio of star colors-->
        <item>@color/star_color_1</item>
        <item>@color/star_color_1</item>
        <item>@color/star_color_1</item>
        <item>@color/star_color_1</item>
        <item>@color/star_color_2</item>
        <item>@color/star_color_3</item>
    </integer-array>
    <integer-array name="meteorites_colors">
        <item>@color/star_color_2</item>
        <item>@color/star_color_4</item>
        <item>@color/star_color_3</item>
    </integer-array>
</resources>

Step 5: Working with the background.xml file. Create this for adding in the background.

XML




<?xml version="1.0" encoding="utf-8"?>
<shape 
    android:shape="rectangle">
    <gradient
        android:angle="270"
        android:endColor="#4D0C66"
        android:startColor="#000A2F"
        android:type="linear" />
</shape>

Step 6: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity">
  
    <com.sofakingforever.stars.AnimatedStarsView
        android:id="@+id/stars"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:starsView_bigStarThreshold="10dp"
        app:starsView_maxStarSize="16dp"
        app:starsView_meteoritesColors="@array/meteorites_colors"
        app:starsView_meteoritesEnabled="true"
        app:starsView_meteoritesInterval="2000"
        app:starsView_minStarSize="1dp"
        app:starsView_starColors="@array/star_colors"
        app:starsView_starCount="50" />
      
</LinearLayout>

Step 7: 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 androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
  
class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
  
    override fun onStart() {
        super.onStart()
        stars.onStart()
    }
  
    override fun onStop() {
        stars.onStop()
        super.onStop()
    }
}

Output:

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 :