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.fluidslidergroupId>
<artifactId>fluid-sliderartifactId>
<version>0.3.1version>
<type>aartype>
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
(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 ofstartandendtexts 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.0to1.0.size- Height of slider. Can besmall(40dp) andnormal(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.
11 Jan 5, 2023
4 Oct 26, 2022
0 Jan 14, 2022
22 Oct 26, 2022
536 Nov 22, 2022
4 Oct 4, 2022
3 May 28, 2022
0 Feb 12, 2022
381 Nov 20, 2022
459 Nov 10, 2022
3.4k Dec 14, 2022
915 Nov 8, 2022
25 Nov 22, 2022
47 Nov 16, 2022
36k Dec 31, 2022
576 Dec 30, 2022
669 Nov 11, 2022
4k Jan 5, 2023
535 Nov 18, 2022
964 Dec 28, 2022