Fluid Slider Android โ€” A slider widget with a popup bubble displaying the precise value selected

Programming language: Kotlin
License: MIT License
Tags: Android     Kotlin     View     Transition     Animation     Library    



A slider widget with a popup bubble displaying the precise value selected

We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Stay tuned for the latest updates:

Inspired by Virgil Pana shot

Twitter Codacy Badge Donate


  • Android 4.1 Jelly Bean (API lvl 16) or greater
  • Your favorite IDE


โ€‹ Just download the package from here and add it to your project classpath, or just use the maven repo:


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


libraryDependencies += "com.ramotion.fluidslider" % "fluid-slider" % "0.3.1"



Basic usage

Place the FluidSlider in your layout.

To track the current position of the slider, set the positionListener, as shown below:

val slider = findViewById<FluidSlider>(R.id.fluidSlider)
slider.positionListener = { p -> Log.d("MainActivity", "current position is: $p" )}

You can also track the beginning and completion of the movement of the slider, using the following properties: beginTrackingListener andendTrackingListener. Example below:

slider.beginTrackingListener = { /* action on slider touched */ }
slider.endTrackingListener = { /* action on slider released */ }

Here is simple example, how to change FluidSlider range.

// Kotlin
val max = 45
val min = 10
val total = max - min

val slider = findViewById<FluidSlider>(R.id.fluidSlider)
slider.positionListener = { pos -> slider.bubbleText = "${min + (total  * pos).toInt()}" }
slider.position = 0.3f
slider.startText ="$min"
slider.endText = "$max"

// Java
final FluidSlider slider = findViewById(R.id.fluidSlider);
slider.setBeginTrackingListener(new Function0<Unit>() {
    public Unit invoke() {
        Log.d("D", "setBeginTrackingListener");
        return Unit.INSTANCE;

slider.setEndTrackingListener(new Function0<Unit>() {
    public Unit invoke() {
        Log.d("D", "setEndTrackingListener");
        return Unit.INSTANCE;

// Or Java 8 lambda
slider.setPositionListener(pos -> {
    final String value = String.valueOf( (int)((1 - pos) * 100) );
    return Unit.INSTANCE;

Here are the attributes you can specify through XML or related setters:

  • bar_color - Color of slider.
  • bubble_color - Color of circle "bubble" inside bar.
  • bar_text_color - Color of start and end texts of slider.
  • bubble_text_color - Color of text inside "bubble".
  • start_text - Start (left) text of slider.
  • end_text - End (right) text of slider.
  • text_size - Text size.
  • duration - Duration of "bubble" rise in milliseconds.
  • initial_position - Initial positon of "bubble" in range form 0.0 to 1.0.
  • size - Height of slider. Can be small (40dp) and normal (56dp).

This library is a part of a selection of our best UI open-source projects.

Third Party Bindings

### React Native You may now use this library with React Native via the module here

๐Ÿ—‚ Check this library on other language:

๐Ÿ“„ License

Fluid Slider Android is released under the MIT license. See [LICENSE](./LICENSE) for details.

This library is a part of a selection of our best UI open-source projects

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

๐Ÿ“ฑ Get the Showroom App for Android to give it a try

Try this UI component and more like this in our Android app. Contact us if interested.

*Note that all licence references and agreements mentioned in the Fluid Slider for Android README section above are relevant to that project's source code only.