FLUID SLIDER [KOTLIN]

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

Requirements

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

Installation

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

Gradle:

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

SBT:

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

Maven:

<dependency>
  <groupId>com.ramotion.fluidslider</groupId>
  <artifactId>fluid-slider</artifactId>
  <version>0.3.1</version>
  <type>aar</type>
</dependency>

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>() {
    @Override
    public Unit invoke() {
        Log.d("D", "setBeginTrackingListener");
        return Unit.INSTANCE;
    }
});

slider.setEndTrackingListener(new Function0<Unit>() {
    @Override
    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) );
    slider.setBubbleText(value);
    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 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.