A slider widget rich in emoji and highly customisable

Emoji Slider

A custom made SeekBar heavily inspired by this great widget from Instagram.

Sample app	Sample usage

? Installation

Add a dependency to your build.gradle:

dependencies {
    implementation 'com.bernaferrari.emojislider:emojislider:0.3'
}

It is fully stable, but there might be some changes to the API, like improved naming, or some small changes on functions.
This is the reason it is only 0.3 - this only means it is the third public version, but you can use it fine already.

? Features

• Customize with xml using custom handy attributes.
• Customize in your activity, fragment or dialog.
• Creating new widget programmatically.

? Reselection Enabled Sample

Up	Down

❕ Basic Usage

Place the EmojiSlider in your layout.

<com.bernaferrari.emojislider.EmojiSlider
    android:id="@+id/slider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

Important: if you want to have the emoji floating above the slider when it is pressed/dragged, you need to supply a view, preferably on the foreground, to be drawn and tell the slider who the view is.
Example:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.bernaferrari.emojislider.EmojiSlider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="72dp" />

    <View
        android:id="@+id/slider_particle_system"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

   findViewById<EmojiSlider>(R.layout.slider).sliderParticleSystem = slider_particle_system

❔ Usage

To track the current position of the slider, set the positionListener, as shown below:

val slider = findViewById<EmojiSlider>(R.id.slider)
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:
startTrackingListener and stopTrackingListener. Examples below:

slider.startTrackingListener = { /* action on slider touched */ }
slider.stopTrackingListener = { /* action on slider released */ }

Here is a random example in Kotlin:

// Kotlin
val slider = findViewById<EmojiSlider>(R.id.slider)
slider.sliderParticleSystem = slider_particle_system
slider.position = 0.25f
slider.averagePosition = 0.75f
slider.allowReselection = true
slider.colorStart = Color.RED
slider.colorEnd = Color.YELLOW
slider.setResultDrawable(profilePictureBitmap)

Here is a random example in Java:

// Java
final EmojiSlider slider = findViewById(R.id.slider);
slider.setStartTrackingListener(new Function0<Unit>() {
    @Override
    public Unit invoke() {
        Log.d("D", "setBeginTrackingListener");
        return Unit.INSTANCE;
    }
});

slider.setStopTrackingListener(new Function0<Unit>() {
    @Override
    public Unit invoke() {
        Log.d("D", "setEndTrackingListener");
        return Unit.INSTANCE;
    }
});

// Or Java 8 lambda
slider.setPositionListener(pos -> {
    Log.d("D", "setPositionListener");
    return Unit.INSTANCE;
});

Check the sample app for more. The sample app even shows how to use Glide to load a Bitmap into a round drawable.

? Customization and Attributes

All customizable attributes for EmojiSlider:

Of course, some attributes might have better names than others and documentation might not be perfect. If you find anything wrong or weird, let me know.

? Libraries Used

• Facebook's Rebound
• BubbleView

? Screenshots

Floating	Value Selected

Sample	Sample

GitHub