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>