Agitador de vistas de Android en Kotlin

View Shaker es una animación de Android en la que la interfaz de usuario de la pantalla vibra durante un intervalo de tiempo específico. Podemos implementar este agitador de vistas en las vistas específicas de la aplicación. View Shaker proporciona diferentes efectos de animación que podemos agregar a nuestras vistas, como rebote, desvanecimiento, flotación y otros. En este artículo, veremos cómo implementar este agitador de vistas dentro de nuestra aplicación de Android usando Kotlin. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Nota : Para implementar View Shaker en la aplicación de Android en Java. Consulte el siguiente artículo: Ver Shaker en Android usando Java 

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

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: Agregar dependencia en build.gradle

Vaya a Gradle Scripts > build.gradle y agregue la siguiente dependencia en la sección de dependencias. 

implementation 'com.daimajia.easing:library:2.0@aar'
implementation 'com.daimajia.androidanimations:library:2.3@aar'

Después de agregar esta dependencia, simplemente sincronice su proyecto para instalarlo. 

Paso 3: agregar imágenes a la carpeta dibujable 

Copia tu imagen. Navega a aplicación > res > carpeta dibujable y pega tu imagen en la carpeta dibujable. 

Paso 4: 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 . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <!--on below line we are creating a text view-->
    <TextView
        android:id="@+id/idTVData"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:gravity="center"
        android:padding="6dp"
        android:text="Geeks for Geeks"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />
 
    <!--on below line we are creating our image view-->
    <ImageView
        android:id="@+id/idIVimage"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@id/idTVData"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:src="@drawable/android" />
 
    <!--on below line we are creating one more text view-->
    <TextView
        android:id="@+id/idTVAndroid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idIVimage"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:padding="8dp"
        android:text="Android development"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />
 
</RelativeLayout>

Paso 5: 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.

package com.gtappdevelopers.kotlingfgproject
 
import android.os.Bundle
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.daimajia.androidanimations.library.Techniques
import com.daimajia.androidanimations.library.YoYo
 
class MainActivity : AppCompatActivity() {
   
    // on below line we are creating
    // variables for text view and image view
    lateinit var androidTV: TextView
    lateinit var dataTV: TextView
    lateinit var androidIV: ImageView
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // initializing variables of list view with their ids.
        androidIV = findViewById(R.id.idIVimage)
        androidTV = findViewById(R.id.idTVAndroid)
        dataTV = findViewById(R.id.idTVData)
 
        // on below line we are adding on
        // click listener for our image view.
        androidIV.setOnClickListener {
           
            // on the below line we are adding a shake
            // animation for our image view.
            YoYo.with(Techniques.Shake)
                // on below line we are setting
                // duration for our animation.
                .duration(500)
                 
                // on below line we are setting repeat
                // duration for our animation
                .repeat(2)
                 
                // on below line we are specifying view
                // on which we have to add this animation
                .playOn(androidIV)
                 
            // on below line we are adding shake
            // animation for our image view.
            YoYo.with(Techniques.Shake)
                // on below line we are setting
                // duration for our animation.
                .duration(500)
                 
                // on below line we are setting
                // repeat duration for our animation
                .repeat(2)
                 
                // on below line we are specifying view
                // on which we have to add this animation
                .playOn(androidTV)
                 
            // on below line we are adding shake
            // animation for our image view.
            YoYo.with(Techniques.Shake)
             
                // on below line we are setting
                // duration for our animation.
                .duration(500)
                 
                // on below line we are setting
                // repeat duration for our animation
                .repeat(2)
                 
                 // on below line we are specifying view
                 // on which we have to add this animation
                .playOn(dataTV)
        }
 
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: