- Notifications
You must be signed in to change notification settings - Fork43
🤯 A slider widget rich in emoji and highly customisable.
License
bernaferrari/EmojiSlider
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
Sample app | Sample usage |
---|---|
![]() | ![]() |
A custom made SeekBarheavily inspired bythis great widget from Instagram.
Add a dependency to yourbuild.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.
- Customize with xml using custom handy attributes.
- Customize in your activity, fragment or dialog.
- Creating new widget programmatically.
Up | Down |
---|---|
![]() | ![]() |
Place theEmojiSlider
in your layout.
<com.bernaferrari.emojislider.EmojiSliderandroid: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"?><FrameLayoutxmlns: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.EmojiSliderandroid:id="@+id/slider"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="72dp"/><Viewandroid: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
To track the current position of the slider, set thepositionListener
, 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
andstopTrackingListener
. Examples below:
slider.startTrackingListener = { /* action on slider touched */ }slider.stopTrackingListener = { /* action on slider released */ }
Here is a random example in Kotlin:
// Kotlinval slider= findViewById<EmojiSlider>(R.id.slider)slider.sliderParticleSystem= slider_particle_systemslider.position=0.25fslider.averagePosition=0.75fslider.allowReselection=trueslider.colorStart=Color.REDslider.colorEnd=Color.YELLOWslider.setResultDrawable(profilePictureBitmap)
Here is a random example in Java:
// JavafinalEmojiSliderslider =findViewById(R.id.slider);slider.setStartTrackingListener(newFunction0<Unit>() {@OverridepublicUnitinvoke() {Log.d("D","setBeginTrackingListener");returnUnit.INSTANCE; }});slider.setStopTrackingListener(newFunction0<Unit>() {@OverridepublicUnitinvoke() {Log.d("D","setEndTrackingListener");returnUnit.INSTANCE; }});// Or Java 8 lambdaslider.setPositionListener(pos -> {Log.d("D","setPositionListener");returnUnit.INSTANCE;});
Check the sample app for more. The sample app even shows how to use Glide to load a Bitmap into a round drawable.
All customizable attributes for EmojiSlider:
Attribute Name | Default Value | Description |
---|---|---|
app:emoji | 😍 | The emoji which will be used on the slider |
app:progress_value | 0.25f | Initial position for the progress in range from 0.0 to 1.0. |
app:average_progress | 0.50f | Initial position for the average value in range from 0.0 to 1.0. |
app:bar_progress_color_start | @color/slider_gradient_start | Color of the start (left side) of the progress bar. |
app:bar_progress_color_end | @color/slider_gradient_end | Color of the end (right side) of the progress bar |
app:bar_track_color | @color/slider_track | Color of the bar's track. |
app:thumb_size_percent_on_pressed | 0.9 | Thumb size automatically shrinks to 90% (0.9) its original size when a touch is detected. This allows to choose another value between 0.0 and 1.0. |
app:allow_reselection | false | Should the slider behave like the original Emoji Slider or like a SeekBar? When true, it behaves like a SeekBar, so average/profile/result will not be shown. |
app:is_touch_disabled | false | Allow to disable touch input. |
app:should_display_tooltip | true | Allow to disable the tooltip when a value is selected. |
app:tooltip_text | @string/average_answer | The "average answer" text, translated into 40 languages. You can overwrite it using this. |
app:tooltip_dismiss_timer | 2500 | The tooltip auto hide after some period, in milliseconds. Choose -1 to disable this timer. |
app:should_display_average | true | Allow to disable the average circle when a value is selected. If this is disabled, tooltip will not be shown even if it is enabled. |
app:should_display_average | false | Allow to disable the round circle that shows up when a value is selected (usually with user's profile picture). |
app:register_touches_outside_thumb | true | The original Emoji Slider only registers touch inside the thumb. The SeekBar register on the bar, too. This allows to choose which best suits you. |
app:particle_direction | up | Should the floating emoji go up or down after finger leaves the bar? |
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.
- Facebook'sRebound
- BubbleView
Floating | Value Selected |
---|---|
![]() | ![]() |
Sample | Sample |
---|---|
![]() | ![]() |
Issues and Pull Requests are welcome.You can reporthere.
Copyright 2018 Bernardo Ferrari.
Licensed to the Apache Software Foundation (ASF) under one or more contributorlicense agreements. See the NOTICE file distributed with this work foradditional information regarding copyright ownership. The ASF licenses thisfile to you under the Apache License, Version 2.0 (the "License"); you may notuse this file except in compliance with the License. You may obtain a copy ofthe License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, softwaredistributed under the License is distributed on an "AS IS" BASIS, WITHOUTWARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See theLicense for the specific language governing permissions and limitations underthe License.
About
🤯 A slider widget rich in emoji and highly customisable.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.