¿Cómo crear animación de estrellas en Android?

En este artículo, vamos a crear una animación de estrellas utilizando una biblioteca de estrellas animadas. Aquí crearemos un archivo dibujable de fondo y especificaremos el color para la animación. La animación de estrellas que hemos creado es fácil de crear ya que estamos usando una biblioteca.

Implementación paso a paso

Paso 1: Crear un nuevo Proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.  

Paso 2: agregue la dependencia y el repositorio de JitPack

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘com.sofakingforever.libraries:animated-stars-android:1.1.4@aar’

Agregue el repositorio de JitPack a su archivo de compilación. Agréguelo a su root build.gradle al final de los repositorios dentro de la sección allprojects{ }.

todos los proyectos {

 repositorios {

   …

   maven { URL «http://dl.bintray.com/sofakingforever/libraries» }

     }

}

Después de agregar esta dependencia, sincronice su proyecto y ahora avanzaremos hacia su implementación.  

Paso 3: trabajar con el archivo colors.xml

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

Paso 4: trabajar con el archivo array.xml

Cree un archivo array.xml en la carpeta de valores. Haga clic derecho, luego haga clic en Nuevo > Archivo de recursos de valores y luego cree un archivo con una array de nombres .

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

Paso 5: trabajar con el archivo background.xml . Cree esto para agregar en segundo plano.

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

Paso 6: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

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

Paso 7: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

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()
    }
}

Producción: