Awesome
<a href="https://www.ramotion.com/agency/app-development/?utm_source=gthb&utm_medium=repo&utm_campaign=fluid-slider-android"><img src="https://github.com/Ramotion/folding-cell/blob/master/header.png"></a>
<a href="https://github.com/Ramotion/fluid-slider-android"> <img align="left" src="https://github.com/Ramotion/fluid-slider-android/blob/master/Fluid_slider.gif" width="480" height="360" /></a> <p><h1 align="left">FLUID SLIDER [KOTLIN]</h1></p> <h4>A slider widget with a popup bubble displaying the precise value selected</h4><p><h6>We specialize in the designing and coding of custom UI for Mobile Apps and Websites.</h6> <a href="https://www.ramotion.com/agency/app-development/?utm_source=gthb&utm_medium=repo&utm_campaign=fluid-slider-android"> <img src="https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png" width="187" height="34"></a> </p> <p><h6>Stay tuned for the latest updates:</h6> <a href="https://goo.gl/rPFpid" > <img src="https://i.imgur.com/ziSqeSo.png/" width="156" height="28"></a></p>
Inspired by Virgil Pana shot
</br>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
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 ofstart
andend
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 form0.0
to1.0
.size
- Height of slider. Can besmall
(40dp) andnormal
(56dp).
This library is a part of a <a href="https://github.com/Ramotion/android-ui-animation-components-and-libraries"><b>selection of our best UI open-source projects.</b></a>
Third Party Bindings
React Native
You may now use this library with React Native via the module here
🗂 Check this library on other language:
<a href="https://github.com/Ramotion/fluid-slider"> <img src="https://github.com/ramotion/navigation-stack/raw/master/Swift@2x.png" width="178" height="81"></a>📄 License
Fluid Slider Android is released under the MIT license. See LICENSE for details.
This library is a part of a <a href="https://github.com/Ramotion/android-ui-animation-components-and-libraries"><b>selection of our best UI open-source projects</b></a>
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.
<a href="https://play.google.com/store/apps/details?id=com.ramotion.showroom" > <img src="https://raw.githubusercontent.com/Ramotion/react-native-circle-menu/master/google_play@2x.png" width="104" height="34"></a> <a href="https://www.ramotion.com/agency/app-development/?utm_source=gthb&utm_medium=repo&utm_campaign=fluid-slider-android"> <img src="https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png" width="187" height="34"></a>