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](https://dribbble.com/virgilpana) [shot](https://dribbble.com/shots/3868232-Fluid-Slider)
[](http://twitter.com/Ramotion)
[](https://www.codacy.com/app/dvg4000/fluid-slider-android?utm_source=github.com&utm_medium=referral&utm_content=Ramotion/fluid-slider-android&utm_campaign=Badge_Grade)
[](https://paypal.me/Ramotion)
## Requirements
- Android 4.1 Jelly Bean (API lvl 16) or greater
- Your favorite IDE
## Installation
Just download the package from [here](http://central.maven.org/maven2/com/ramotion/fluidslider/fluid-slider/0.3.1/fluid-slider-0.3.1.aar) and add it to your project classpath, or just use the maven repo:
Gradle:
```groovy
implementation 'com.ramotion.fluidslider:fluid-slider:0.3.1'
```
SBT:
```scala
libraryDependencies += "com.ramotion.fluidslider" % "fluid-slider" % "0.3.1"
```
Maven:
```xml
com.ramotion.fluidslider
fluid-slider
0.3.1
aar
```
## 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(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
// Kotlin
val max = 45
val min = 10
val total = max - min
val slider = findViewById(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() {
@Override
public Unit invoke() {
Log.d("D", "setBeginTrackingListener");
return Unit.INSTANCE;
}
});
slider.setEndTrackingListener(new Function0() {
@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](https://github.com/facebook/react-native) via the module [here](https://github.com/prscX/react-native-fluidic-slider)
## 🗂 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.
