{"id":27767946,"url":"https://github.com/bernaferrari/emojislider","last_synced_at":"2025-04-29T19:56:15.732Z","repository":{"id":47871961,"uuid":"142616550","full_name":"bernaferrari/EmojiSlider","owner":"bernaferrari","description":"🤯 A slider widget rich in emoji and highly customisable.","archived":false,"fork":false,"pushed_at":"2020-04-26T17:53:24.000Z","size":8121,"stargazers_count":605,"open_issues_count":4,"forks_count":44,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-29T19:56:09.611Z","etag":null,"topics":["android","android-kotlin","android-library","androidx","kotlin","library","seekbar","slider"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bernaferrari.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-27T19:33:18.000Z","updated_at":"2025-04-15T16:10:49.000Z","dependencies_parsed_at":"2022-09-21T13:01:38.928Z","dependency_job_id":null,"html_url":"https://github.com/bernaferrari/EmojiSlider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2FEmojiSlider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2FEmojiSlider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2FEmojiSlider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2FEmojiSlider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bernaferrari","download_url":"https://codeload.github.com/bernaferrari/EmojiSlider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251574671,"owners_count":21611387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-kotlin","android-library","androidx","kotlin","library","seekbar","slider"],"created_at":"2025-04-29T19:56:15.267Z","updated_at":"2025-04-29T19:56:15.720Z","avatar_url":"https://github.com/bernaferrari.png","language":"Kotlin","readme":"| Sample app | Sample usage |\n|:-:|:-:|\n| ![First](assets/ig_slider.gif?raw=true) | ![Sec](assets/sample_2.gif?raw=true) |\n\nEmoji Slider\n============\n\n[![Download](https://api.bintray.com/packages/bernaferrari/EmojiSlider/com.bernaferrari.emojislider/images/download.svg) ](https://bintray.com/bernaferrari/EmojiSlider/com.bernaferrari.emojislider/_latestVersion)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/674103f4378e4b5db0867b62566ce8d1)](https://www.codacy.com/project/bernaferrari/EmojiSlider/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=bernaferrari/EmojiSlider\u0026amp;utm_campaign=Badge_Grade_Dashboard)\n\nA custom made SeekBar **heavily** inspired by [this great widget from Instagram](https://instagram-press.com/blog/2018/05/10/introducing-the-emoji-slider/).\n\n## 💻 Installation\nAdd a dependency to your `build.gradle`:\n```groovy\ndependencies {\n    implementation 'com.bernaferrari.emojislider:emojislider:0.3.2'\n}\n```\nIt 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.\n\n[**Download the sample app to experience it.**](assets/sample.apk?raw=true)\n\n## 🤯 Features\n- Customize with xml using custom handy attributes.\n- Customize in your activity, fragment or dialog.\n- Creating new widget programmatically.\n\n## 😍 Reselection Enabled Sample\n\n| Up | Down |\n|:-:|:-:|\n| ![First](assets/up_reselection.gif?raw=true) | ![Sec](assets/down_reselection.gif?raw=true) |\n\n## ❕ Basic Usage\nPlace the `EmojiSlider` in your layout.\n```groovy\n\u003ccom.bernaferrari.emojislider.EmojiSlider\n    android:id=\"@+id/slider\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"/\u003e\n```\n\n**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.\nExample:\n\n```groovy\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cFrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\u003e\n\n    \u003ccom.bernaferrari.emojislider.EmojiSlider\n        android:id=\"@+id/slider\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:padding=\"72dp\" /\u003e\n\n    \u003cView\n        android:id=\"@+id/slider_particle_system\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\" /\u003e\n\n\u003c/FrameLayout\u003e\n```\n\n```kotlin\n   findViewById\u003cEmojiSlider\u003e(R.layout.slider).sliderParticleSystem = slider_particle_system\n```\n\n## ❔ Usage\nTo track the current position of the slider, set the `positionListener`, as shown below:\n```\nval slider = findViewById\u003cEmojiSlider\u003e(R.id.slider)\nslider.positionListener = { p -\u003e Log.d(\"MainActivity\", \"current position is: $p\" )}\n```\n\nYou can also track the beginning and completion of the movement of the slider, using the following properties:\n`startTrackingListener` and `stopTrackingListener`. Examples below:\n```\nslider.startTrackingListener = { /* action on slider touched */ }\nslider.stopTrackingListener = { /* action on slider released */ }\n```\n\nHere is a random example in Kotlin:\n```kotlin\n// Kotlin\nval slider = findViewById\u003cEmojiSlider\u003e(R.id.slider)\nslider.sliderParticleSystem = slider_particle_system\nslider.position = 0.25f\nslider.averagePosition = 0.75f\nslider.allowReselection = true\nslider.colorStart = Color.RED\nslider.colorEnd = Color.YELLOW\nslider.setResultDrawable(profilePictureBitmap)\n\n```\n\nHere is a random example in Java:\n```java\n// Java\nfinal EmojiSlider slider = findViewById(R.id.slider);\nslider.setStartTrackingListener(new Function0\u003cUnit\u003e() {\n    @Override\n    public Unit invoke() {\n        Log.d(\"D\", \"setBeginTrackingListener\");\n        return Unit.INSTANCE;\n    }\n});\n\nslider.setStopTrackingListener(new Function0\u003cUnit\u003e() {\n    @Override\n    public Unit invoke() {\n        Log.d(\"D\", \"setEndTrackingListener\");\n        return Unit.INSTANCE;\n    }\n});\n\n// Or Java 8 lambda\nslider.setPositionListener(pos -\u003e {\n    Log.d(\"D\", \"setPositionListener\");\n    return Unit.INSTANCE;\n});\n```\n\n**Check the sample app for more.** The sample app even shows how to use Glide to load a Bitmap into a round drawable.\n\n## 🎨 Customization and Attributes\n\nAll customizable attributes for EmojiSlider:\n\u003ctable\u003e\n    \u003cth\u003eAttribute Name\u003c/th\u003e\n    \u003cth\u003eDefault Value\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:emoji\u003c/td\u003e\n        \u003ctd\u003e😍\u003c/td\u003e\n        \u003ctd\u003eThe emoji which will be used on the slider\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:progress_value\u003c/td\u003e\n        \u003ctd\u003e0.25f\u003c/td\u003e\n        \u003ctd\u003eInitial position for the progress in range from 0.0 to 1.0.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:average_progress\u003c/td\u003e\n        \u003ctd\u003e0.50f\u003c/td\u003e\n        \u003ctd\u003eInitial position for the average value in range from 0.0 to 1.0.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:bar_progress_color_start\u003c/td\u003e\n        \u003ctd\u003e@color/slider_gradient_start\u003c/td\u003e\n        \u003ctd\u003eColor of the start (left side) of the progress bar.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:bar_progress_color_end\u003c/td\u003e\n        \u003ctd\u003e@color/slider_gradient_end\u003c/td\u003e\n        \u003ctd\u003eColor of the end (right side) of the progress bar\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:bar_track_color\u003c/td\u003e\n        \u003ctd\u003e@color/slider_track\u003c/td\u003e\n        \u003ctd\u003eColor of the bar's track.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:thumb_size_percent_on_pressed\u003c/td\u003e\n        \u003ctd\u003e0.9\u003c/td\u003e\n        \u003ctd\u003eThumb size automatically shrinks to 90% (0.9) its original size when a touch is detected. This allows to\n            choose another value between 0.0 and 1.0.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:allow_reselection\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n        \u003ctd\u003eShould the slider behave like the original Emoji Slider or like a SeekBar? When true, it behaves like a\n            SeekBar, so average/profile/result will not be shown.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:is_touch_disabled\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n        \u003ctd\u003eAllow to disable touch input.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:should_display_tooltip\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n        \u003ctd\u003eAllow to disable the tooltip when a value is selected.\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n         \u003ctd\u003eapp:tooltip_text\u003c/td\u003e\n         \u003ctd\u003e@string/average_answer\u003c/td\u003e\n         \u003ctd\u003eThe \"average answer\" text, translated into 40 languages. You can overwrite it using this.\u003c/td\u003e\n     \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:tooltip_dismiss_timer\u003c/td\u003e\n        \u003ctd\u003e2500\u003c/td\u003e\n        \u003ctd\u003eThe tooltip auto hide after some period, in milliseconds. Choose -1 to disable this timer.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:should_display_average\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n        \u003ctd\u003eAllow to disable the average circle when a value is selected. If this is disabled, tooltip will not be shown\n            even if it is enabled.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:should_display_average\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n        \u003ctd\u003eAllow to disable the round circle that shows up when a value is selected (usually with user's profile\n            picture).\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:register_touches_outside_thumb\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n        \u003ctd\u003eThe original Emoji Slider only registers touch inside the thumb. The SeekBar register on the bar, too. This\n            allows to choose which best suits you.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eapp:particle_direction\u003c/td\u003e\n        \u003ctd\u003eup\u003c/td\u003e\n        \u003ctd\u003eShould the floating emoji go up or down after finger leaves the bar?\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\nOf 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**](https://github.com/bernaferrari/EmojiSlider/issues).\n\n## 📃 Libraries Used\n* Facebook's [Rebound](https://github.com/facebook/rebound)\n* [BubbleView](https://github.com/cpiz/BubbleView)\n\n## 🦁 Screenshots\n\n| Floating | Value Selected |\n|:-:|:-:|\n| ![First](assets/custom_1.png?raw=true) | ![Sec](assets/custom_2.png?raw=true) |\n\n| Sample | Sample |\n|:-:|:-:|\n| ![Third](assets/main_1.png?raw=true) | ![Fourth](assets/main_2.png?raw=true) |\n\n### Reporting Issues\n\nIssues and Pull Requests are welcome.\nYou can report [here](https://github.com/bernaferrari/EmojiSlider/issues).\n\nLicense\n-------\n\nCopyright 2018 Bernardo Ferrari.\n\nLicensed to the Apache Software Foundation (ASF) under one or more contributor\nlicense agreements.  See the NOTICE file distributed with this work for\nadditional information regarding copyright ownership.  The ASF licenses this\nfile to you under the Apache License, Version 2.0 (the \"License\"); you may not\nuse this file except in compliance with the License.  You may obtain a copy of\nthe License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\nWARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the\nLicense for the specific language governing permissions and limitations under\nthe License.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernaferrari%2Femojislider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbernaferrari%2Femojislider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernaferrari%2Femojislider/lists"}