Animaciones deslizantes fluidas en Android

Aquí vamos a ver cómo podemos implementar Fluid Slider Animation en Android Studio usando Kotlin. La idea de usar esta escala deslizante en nuestras aplicaciones hace que nuestra interfaz de usuario se vea hermosa y más interactiva.

¿Qué es la animación deslizante fluida?

Un Fluid Slider es un widget de control deslizante con una burbuja emergente que muestra el valor exacto. Sus usos en diferentes aplicaciones pueden ser-

• Se puede usar para calificar una aplicación.
• Se puede utilizar para la cantidad de productos que los usuarios quieren comprar.
• Se puede usar en cualquier aplicación que use una escala para medir algo.

¿Qué vamos a construir en este artículo?

En este artículo, crearemos esta escala animada de Fluid Slider y luego mostraremos su valor en un botón en el que se puede hacer clic. A continuación se muestra un video de muestra de lo que vamos a construir en este artículo. Tenga en cuenta que vamos a hacer esta aplicación usando el lenguaje Kotlin.

Implementación paso a paso

Paso 1. Crea un nuevo proyecto

• Abra un nuevo proyecto.
• Estaremos trabajando en Actividad vacía con lenguaje como Kotlin. Deje todas las demás opciones sin cambios.
• Puede cambiar el nombre del proyecto a su conveniencia.
• Habrá dos archivos predeterminados llamados activity_main.xml y MainActivity.kt.

Si no sabe cómo crear un nuevo proyecto en Android Studio, puede consultar ¿Cómo crear/iniciar un nuevo proyecto en Android Studio?   

Paso 2. Agregar la dependencia requerida

Navegue a Gradle scripts> gradle.build (módulo) y use la siguiente dependencia en él:

implementation 'com.ramotion.fluidslider:fluid-slider:0.3.1'

Paso 3. Trabajando en el archivo activity_main.xml

Navegue a aplicación> res> diseño> archivo activity_main.xml y use el siguiente código en él-

<?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"
    tools:context=".MainActivity">
  
    <com.ramotion.fluidslider.FluidSlider
        android:id="@+id/slider"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintVertical_bias=".5"
        app:layout_constraintWidth_percent=".9"
        app:size="small"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is liquid slider"
        app:layout_constraintVertical_bias="1"
        app:layout_constraintHorizontal_bias="0"
        android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/slider"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/slider"
        app:layout_constraintTop_toTopOf="parent" />
  
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#6168E7"
        android:text="OK"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="@+id/slider"
        app:layout_constraintTop_toBottomOf="@+id/slider"
        app:layout_constraintVertical_bias=".1" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4. Trabajando en el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y use el siguiente código en él:

package com.example.fluidslideranimations
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView
import com.ramotion.fluidslider.FluidSlider
  
class MainActivity : AppCompatActivity() {
    val max =100
    val min= 0
    val total:Int =max-min
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        val slider = findViewById<FluidSlider>(R.id.slider)
        val textView=findViewById<TextView>(R.id.text_view)
        val button=findViewById<Button>(R.id.button)
  
        slider.positionListener={pos-> slider.bubbleText="${min+ (total*pos).toInt()}"}
        slider.position=0.3f
        slider.startText="$min"
        slider.endText="$max"
  
        button.setOnClickListener {
            val s=slider.bubbleText.toString()
            button.setText(s)
        }
        slider.beginTrackingListener={textView.visibility=View.INVISIBLE}
        slider.endTrackingListener={textView.visibility=View.VISIBLE}
    }
}

Aquí está el resultado final de nuestra aplicación.

Producción: