Fluid Slider Animations in Android

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: