Awesome

Sample app	Sample usage

Emoji Slider

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

💻 Installation

Add a dependency to your build.gradle:

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

It is fully stable, but there might be some changes to the API, like improved naming, or some small changes on functions. You can use it fine already.

Download the sample app to experience it.

🤯 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

Reporting Issues

Issues and Pull Requests are welcome. You can report here.

License

Copyright 2018 Bernardo Ferrari.

Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.