Desvanecimiento de entrada/salida de Android en Kotlin

En Android , las animaciones son las imágenes que se agregan para hacer que la interfaz de usuario sea más interactiva, clara y atractiva. Las animaciones Fade In y Fade out se utilizan para modificar la apariencia de cualquier vista durante un intervalo de tiempo determinado para que el usuario pueda ser notificado sobre los cambios que se están produciendo en nuestra aplicación. 
En este artículo, discutiremos cómo crear una animación Fade In/Out en Kotlin.

Atributos XML Descripción
Android: duración Se utiliza para especificar la duración de la animación.
Android: de Alpha Es el valor alfa inicial para la animación, 
donde 1,0 significa completamente opaco y 0,0 significa completamente transparente .
android:toAlfa Es el valor alfa final.
Android: identificación Establece una identificación única de la vista

El primer paso es crear un nuevo proyecto en Android Studio. Para ello sigue estos pasos:
 

  • Haga clic en Archivo, luego en Nuevo y luego en Nuevo proyecto y asigne el nombre que desee.
  • Luego, seleccione Compatibilidad con el idioma Kotlin y haga clic en el botón siguiente.
  • Seleccione SDK mínimo, lo que necesite
  • Seleccione Actividad vacía y luego haga clic en finalizar.

Después de eso, tenemos que diseñar nuestro diseño. Para eso necesitamos trabajar con el archivo XML. Ve a app > res > layout y pega el siguiente código:
 

Modificar archivo activity_main.xml

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" android:orientation="vertical">
 
    <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="GeeksForGeeks"
            android:layout_centerInParent="true"
            android:textSize="30sp"
            android:textStyle="bold" />
 
    <Button
            android:id="@+id/fade_in"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:text="Fade In"
            android:layout_marginTop="140dp"
            android:layout_marginLeft="100dp" />
    <Button
            android:id="@+id/fade_out"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="140dp"
            android:layout_toRightOf="@+id/fade_in"
            android:text="Fade Out"
            android:textAllCaps="false" />
 
</RelativeLayout>

Añadir carpeta de animación

En esta carpeta, agregaremos los archivos XML que se utilizarán para producir las animaciones. Para que esto suceda, vaya a app/res , haga clic con el botón derecho y luego seleccione Android Resource Directory y asígnele el nombre anim
Nuevamente, haga clic con el botón derecho en esta carpeta anim y seleccione Archivo de recursos de animación y asígnele el nombre fade_in . Del mismo modo, cree también fade_out.xml y pegue el siguiente código.
fade_in.xml 
 

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="2000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

fade_out.xml 
 

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />
</set>

Modificar el archivo MainActivity.kt

Abra app/src/main/java/yourPackageName/MainActivity.kt y realice los siguientes cambios:
 

Java

package com.geeksforgeeks.myfirstKotlinapp
 
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.View
import android.view.animation.AnimationUtils
import kotlinx.android.synthetic.main.activity_main.*
 
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        //setting button onClickListener
        fade_in.setOnClickListener {
        textView.visibility = View.VISIBLE
        //loading our custom made animations
        val animation = AnimationUtils.loadAnimation(this, R.anim.fade_in)
        //starting the animation
        textView.startAnimation(animation)
    }
    fade_out.setOnClickListener {
        val animation = AnimationUtils.loadAnimation(this, R.anim.fade_out)
        textView.startAnimation(animation)
        //textview will be invisible after the specified amount
        // of time elapses, here it is 1000 milliseconds
        Handler().postDelayed({
            textView.visibility = View.GONE
        }, 1000)
    }
}
}

Archivo AndroidManifest.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="i.apps.fadeinout">
 
    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
 
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Ejecutar como emulador:

Publicación traducida automáticamente

Artículo escrito por Abhishek7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *