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.
En este artículo, discutiremos cómo crear una animación Slide Up/Down en Kotlin.
| Atributos XML | Descripción |
|---|---|
| Android: duración | Se utiliza para especificar la duración de la animación. |
| android:desdeYDelta | Es el cambio en la coordenada Y que se aplicará al inicio de la animación. |
| android:toYDelta | Es el cambio en la coordenada Y que se aplicará al final de la animación. |
| 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 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/slide_up" android:layout_width="100dp" android:layout_height="wrap_content" android:text="Slide Up" android:layout_marginTop="140dp" android:layout_marginLeft="100dp" /> <Button android:id="@+id/slide_down" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_marginTop="140dp" android:layout_toRightOf="@+id/slide_up" android:text="Slide Down" 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 .
De nuevo, haga clic con el botón derecho en esta carpeta anim y seleccione Archivo de recursos de animación y asígnele el nombre slide_up . Del mismo modo, cree también slide_down.xml y pegue el siguiente código.
deslizar_hacia arriba.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="1000" android:fromYDelta="0" android:toYDelta="-100%" /> </set>
deslizar_abajo.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="1000" android:fromYDelta="-100%" android:toYDelta="0" /> </set>
Modificar el archivo MainActivity.kt
Abra app/src/main/java/yourPackageName/MainActivity.kt y realice los siguientes cambios:
package com.geeksforgeeks.myfirstKotlinapp
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
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 buttons onClickListener
slide_down.setOnClickListener {
//adding our custom made animation xml file
val animation = AnimationUtils.loadAnimation(
this, R.anim.fade_out)
//appending animation to textView
textView.startAnimation(animation)
}
slide_up.setOnClickListener {
val animation = AnimationUtils.loadAnimation(
this, R.anim.fade_in)
textView.startAnimation(animation)
}
}
}
Archivo AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="i.apps.slideup"> <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>