Animación de ondas en Android

Wave Animation es una de las funciones más utilizadas en la aplicación de Android. Puede ver esta animación en la mayoría de las aplicaciones de compras, aplicaciones de reproducción de música y muchas más. El uso de esta Wave Animation hace que la experiencia del usuario sea atractiva. En este artículo vamos a ver cómo implementar Wave Animation en Android. qué

Aplicaciones de la animación de ondas

• Úselo para dar un efecto animado decorativo en una aplicación de Android.
• Wave Animation se usa en la mayoría de las aplicaciones en la pantalla de bienvenida.
• Puede ver esta animación Wave en la mayoría de las aplicaciones de música.

Atributos de la animación de ondas

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 .

Paso 2: agregue la dependencia de la biblioteca Wave Animation en el archivo build.gradle

Luego navegue a los scripts de gradle y luego al nivel build.gradle (Módulo) . Agregue la siguiente línea en el archivo build.gradle en la sección de dependencias.

implementación ‘com.scwang.wave:MultiWaveHeader:1.0.0’

ahora haga clic en Sincronizar ahora sincronizará todos sus archivos en build.gradle().

Paso 3: crea una nueva animación de onda en tu archivo activity_main.xml

Vaya a la aplicación > res > diseño para abrir el archivo activity_main.xml . A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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">
  
    <!--code for wave animation-->
    <com.scwang.wave.MultiWaveHeader
        android:id="@+id/waveHeader"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        app:mwhCloseColor="#41E64E"
        app:mwhStartColor="#15AC20"
        app:mwhWaveHeight="60dp" />
  
    <!--Text displayed on wave-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Hello! Geeks for Geeks"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:textStyle="bold" />
  
</RelativeLayout>

Ahora haga clic en la opción de ejecución , tomará algún tiempo construir Gradle . Después de eso, obtendrá la salida en su dispositivo como se indica a continuación.

Producción: