Fluid Slider for Android

Inspired by Virgil Pana shot

Check this library on other platforms:

Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

The Android mockup available here.

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.0'

SBT:

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

Maven:

<dependency>
  <groupId>com.ramotion.fluidslider</groupId>
  <artifactId>fluid-slider</artifactId>
  <version>0.3.0</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 and endTrackingListener. 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.

License

​ Fluid Slider for Android is released under the MIT license. See LICENSE for details.

Get the Showroom App for Android to give it a try

Try our UI components in our mobile app. Contact us if interested.

Follow us for the latest updates: