Implementar Acercar o Alejar en Android

Las animaciones Acercar y Alejar se utilizan para ampliar y reducir el tamaño de una vista en las aplicaciones de Android , respectivamente. Los desarrolladores suelen utilizar este tipo de animaciones para proporcionar una naturaleza dinámica a las aplicaciones. Los usuarios también sienten los cambios que ocurren en la aplicación al ver este tipo de animaciones. 

Atributos XML de la etiqueta de escala

Las características de las animaciones Acercar y Alejar se definen en los archivos XML mediante el uso de etiquetas de escala . 

Cómo agregar animación de acercamiento/alejamiento en Android

El siguiente ejemplo demuestra los pasos necesarios para implementar la animación Acercar y Alejar en un archivo de imagen. Se agregará un archivo de imagen en la actividad usando ImageView .

Nota: Los siguientes pasos se realizan en Android Studio versión 4.0 
 

Paso 1: Crear nuevo proyecto 

1. Haga clic en Archivo, luego en Nuevo => Nuevo proyecto.
2. Seleccione el idioma como Kotlin.
3. Seleccione el SDK mínimo según su necesidad.

Paso 2: Modifique el archivo activity_main.xml
A continuación se muestra el código del archivo activity_main.xml para agregar TextView , ImageView y dos botones en una actividad.

Nombre de archivo: actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="#168BC34A"
    tools:context=".MainActivity" >
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:fontFamily="@font/roboto"
        android:text="@string/heading"
        android:textAlignment="center"
        android:textColor="@android:color/holo_green_light"
        android:textSize="36sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.060000002" />
 
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="179dp"
        android:layout_height="172dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.31"
        app:srcCompat="@drawable/logo" />
 
    <Button
        android:id="@+id/zoomInButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#AB4CAF50"
        android:fontFamily="@font/roboto"
        android:padding="5dp"
        android:text="@string/zoomInButtonText"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/zoomOutButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintVertical_bias="0.76" />
 
    <Button
        android:id="@+id/zoomOutButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#AB4CAF50"
        android:fontFamily="@font/roboto"
        android:padding="5dp"
        android:text="@string/zoomOutButtonText"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.77"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintVertical_bias="0.76" />
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: Defina el archivo XML para la animación Zoom In y Zoom Out de la imagen
. Cree un nuevo directorio en la carpeta res de la aplicación haciendo clic con el botón derecho en res => Nuevo => Directorio de recursos de Android . Seleccione el tipo de recurso como anim y el nombre del directorio también debe ser anim . En este directorio, cree 2 archivos de recursos de animación, a saber, zoom_in y zoom_out . Estos 2 archivos son el archivo XML que contiene los detalles de la animación. A continuación se muestra el código para el archivo.

Nombre de archivo: zoom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter = "true">
 
    <scale
        xmlns:android = "http://schemas.android.com/apk/res/android"
        android:duration = "1000"
        android:fromXScal = "1"
        android:fromYScale = "1"
        android:pivotX = "50%"
        android:pivotY = "50%"
        android:toXScale = "2"
        android:toYScale = "2"/>
 
</set>

Nombre de archivo: zoom_out.xm

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter = "true">
 
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration = "2500"
        android:fromXScale = "1"
        android:fromYScale = "1"
        android:pivotX = "50%"
        android:pivotY = "50%"
        android:toXScale = ".2"
        android:toYScale = ".2" />
 
</set>

El atributo android:fillAfter bajo la etiqueta set se usa para corregir el tamaño final del archivo de imagen hasta que ocurra cualquier otra animación. 
 

Paso 4: Modifique el archivo MainActivity.kt
A continuación se muestra el código para que el archivo MainActivity.kt cargue e inicie la animación en el widget ImageView de acuerdo con el botón en el que hizo clic el usuario.

Nombre de archivo: MainActivity.kt

package com.example.zomminout
  
import android.os.Bundle
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
  
  
class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // assigning id of the button
        // which zoom in the image
        val buttonZoomIn: Button = findViewById(R.id.zoomInButton)
  
        // assigning id of the button
        // which zoom out the image
        val buttonZoomOut: Button = findViewById(R.id.zoomOutButton)
  
        // assigning id of imageview on
        // which zoom in/out will be performed
        val image: ImageView = findViewById(R.id.imageView)
  
        // actions to be performed when
        // "Zoom In" button is clicked
        buttonZoomIn.setOnClickListener() {
  
            // loading the animation of
            // zoom_in.xml file into a variable
            val animZoomIn = AnimationUtils.loadAnimation(this,
                                                R.anim.zoom_in)
            // assigning that animation to
            // the image and start animation
            image.startAnimation(animZoomIn)
        }
  
        // actions to be performed when
        // "Zoom Out" button is clicked
        buttonZoomOut.setOnClickListener() {
  
            // loading the animation of
            // zoom_out.xml file into a variable
            val animZoomOut = AnimationUtils.loadAnimation(this,
                                                R.anim.zoom_out)
  
            // assigning that animation to
            // the image and start animation
            image.startAnimation(animZoomOut)
        }
    }
}

Paso 5: Modificar el archivo strings.xml
Todas las strings que se utilizan en la actividad se enumeran en este archivo.

Nombre de archivo: strings.xml

<resources>
    <string name="app_name">ZoomInOut</string>
    <string name="heading">Zoom In/Out in Android</string>
    <string name="zoomOutButtonText">Zoom Out</string>
    <string name="zoomInButtonText">Zoom In</string>
</resources>

Salida: ejecutar en el emulador