Fluid Slider Animations in Android

Last Updated : 18 Feb, 2022

Here we are going to see how we can implement Fluid Slider Animation in android studio using Kotlin. The idea to use this slider scale in our applications makes our UI look beautiful and more interactive.

What is Fluid Slider Animation?

A Fluid Slider is a slider widget with a popup bubble displaying the precise value. Its uses in different applications can be-

Can be used for rating an app.
Can be used for the quantity of products users want to purchase.
Can be used in any application which uses a scale to measure something.

What we are going to build in this article?

In this article, we will be making this Fluid Slider animated scale and then displaying its value on a clickable button. A sample video is shown below of what we are going to build in this article. Note that we are going to make this application using Kotlin language.

Step by Step Implementation

Step 1. Create a new project

Open a new project.
We will be working on Empty Activity with language as Kotlin. Leave all other options unchanged.
You can change the name of the project at your convenience.
There will be two default files named activity_main.xml and MainActivity.kt.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?

Step 2. Adding required dependency

Navigate to Gradle scripts > gradle.build(module) file and use the following dependency in it-

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

Step 3. Working on activity_main.xml file

Navigate to app > res > layout > activity_main.xml file and use the following code in it-

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"
    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>

Step 4. Working on MainActivity.kt file

Go to MainActivity.kt file and use the following code in it-

Kotlin

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} 
    } 
}