Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

Fluid Slider Animations in Android

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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 > 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 version="1.0" encoding="utf-8"?>
        app:layout_constraintTop_toTopOf="parent" />
        android:text="This is liquid slider"
        app:layout_constraintTop_toTopOf="parent" />
        app:layout_constraintVertical_bias=".1" />

Step 4. Working on MainActivity.kt file

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


package com.example.fluidslideranimations
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?) {
        val slider = findViewById<FluidSlider>(
        val textView=findViewById<TextView>(
        val button=findViewById<Button>(
        slider.positionListener={pos-> slider.bubbleText="${min+ (total*pos).toInt()}"}
        button.setOnClickListener {
            val s=slider.bubbleText.toString()

Here is the final output of our application.


My Personal Notes arrow_drop_up
Last Updated : 18 Feb, 2022
Like Article
Save Article
Similar Reads