Fluid Slider Animations in Android
Last Updated :
23 Jul, 2025
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}
}
}
Here is the final output of our application.
Output:
Similar Reads
Liquid Swipe Animation in Android Liquid Swipe animation is used to slide the page like water which show different design and pattern on the screen. It creates a floating state. Liquid Swipe animation is a significantly trending design procedure. Movement can help keep clients inspired by your UI design longer and more motivated to
5 min read
Slide Animation in Android with Kotlin Animations in Android allow UI elements to perform aesthetic moves across the screen. Animations can be implemented from a third party as well as developed from scratch. Despite the source, animations can be applied to any kind of view or UI element. Typically, we have demonstrated a slide animation
3 min read
Android Animations in Kotlin Animation is a method in which a collection of images are combined in a specific way and processed then they appear as moving images. Building animations make on-screen objects seem to be alive. Android has quite a few tools to help you create animations with relative ease. so in this article we wil
5 min read
Wave Animation in Android Wave Animation is one of the most commonly used features in Android app. You can see this animation in most of the shopping apps, music player apps, and many more. Using this Wave Animation makes the User Experience attractive. In this article, we are going to see how to implement Wave Animation in
2 min read
Flip Card Animation in Android In this article, we are going to see how to build a Flip Card Animation app in Android Studio. Animation makes our app more attractive, convincing, and user-friendly. A sample GIF is given below to get an idea about what we are going to do in this article. Please note that we will be using Kotlin as
4 min read
Pulse Animation View in Android In this article, we are going to see the Pulse Animation feature. This feature can be used if we are downloading something from the server. Then till the time, it is downloading we can add this feature. A sample GIF is given below to get an idea about what we are going to do in this article. Note th
4 min read