{"id":13428674,"url":"https://github.com/cortinico/slidetoact","last_synced_at":"2025-05-14T07:08:30.045Z","repository":{"id":38107136,"uuid":"58338361","full_name":"cortinico/slidetoact","owner":"cortinico","description":"A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄","archived":false,"fork":false,"pushed_at":"2025-05-06T19:10:56.000Z","size":7486,"stargazers_count":1211,"open_issues_count":36,"forks_count":165,"subscribers_count":22,"default_branch":"main","last_synced_at":"2025-05-06T20:24:11.636Z","etag":null,"topics":["android-development","android-library","android-ui","hacktoberfest","kotlin","kotlin-android","kotlin-library","material","material-components","material-design","material-ui","slider","slidetounlockview"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cortinico.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-05-09T00:47:18.000Z","updated_at":"2025-05-06T19:10:59.000Z","dependencies_parsed_at":"2023-10-05T05:58:59.663Z","dependency_job_id":"e2a94f8d-f736-46a6-9274-7af06c9b6d1a","html_url":"https://github.com/cortinico/slidetoact","commit_stats":{"total_commits":317,"total_committers":24,"mean_commits":"13.208333333333334","dds":"0.49842271293375395","last_synced_commit":"7e02cda94d75eacabe4fcfc8510d4216a4ddede6"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cortinico%2Fslidetoact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cortinico%2Fslidetoact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cortinico%2Fslidetoact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cortinico%2Fslidetoact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cortinico","download_url":"https://codeload.github.com/cortinico/slidetoact/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092776,"owners_count":22013290,"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-development","android-library","android-ui","hacktoberfest","kotlin","kotlin-android","kotlin-library","material","material-components","material-design","material-ui","slider","slidetounlockview"],"created_at":"2024-07-31T01:01:02.661Z","updated_at":"2025-05-14T07:08:29.972Z","avatar_url":"https://github.com/cortinico.png","language":"Kotlin","funding_links":[],"categories":["Libraries","Kotlin"],"sub_categories":[],"readme":"# Slide To Act\n\n[![CircleCI](https://circleci.com/gh/cortinico/slidetoact/tree/master.svg?style=shield)](https://circleci.com/gh/cortinico/slidetoact/tree/master)  [![Maven Central](https://maven-badges.herokuapp.com/maven-central/com.ncorti/slidetoact/badge.svg)](https://maven-badges.herokuapp.com/maven-central/com.ncorti/slidetoact) [![Android Weekly](https://img.shields.io/badge/Android%20Weekly-%23336-blue.svg)](http://androidweekly.net/issues/issue-336) [![License](https://img.shields.io/badge/license-MIT%20License-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Twitter](https://img.shields.io/badge/Twitter-@cortinico-blue.svg?style=flat)](http://twitter.com/cortinico) [![Awesome Kotlin Badge](https://kotlin.link/awesome-kotlin.svg)](https://github.com/KotlinBy/awesome-kotlin)\n\nA simple *Slide to Unlock* **Material** widget for **Android**, written in [**Kotlin**](https://github.com/JetBrains/kotlin) 🇰.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/slidetoact.gif\" alt=\"sample-slidetoact gif\"/\u003e\n\u003c/p\u003e\n\n* [Getting Started](#getting-started-)\n* [Example](#example-)\n* [Features](#features-)\n    * [Attributes](#attributes)\n        * [``area_margin``](#area_margin)\n        * [``inner_color`` \u0026 ``outer_color``](#inner_color--outer_color)\n        * [``border_radius``](#border_radius)\n        * [``text``, ``text_size``, ``text_style``, ``text_appearance``](#text-text_size-text_style-text_appearance)\n        * [``slider_height``](#slider_height)\n        * [``slider_locked``](#slider_locked)\n        * [``animation_duration``](#animation_duration)\n        * [``slider_reversed``](#slider_reversed)\n        * [``slider_icon``](#slider_icon)\n        * [``complete_icon``](#complete_icon)\n        * [``bump_vibration``](#bump_vibration)\n        * [``rotate_icon``](#rotate_icon)\n        * [``android:elevation``](#androidelevation)\n        * [``state_complete``](#state_complete)\n        * [``bounce_on_start``](#bounce_on_start)\n    * [Event callbacks](#event-callbacks)\n* [Demo](#demo-)\n* [Building/Testing](#buildingtesting-)\n    * [CircleCI](#circleci-)\n    * [TravisCI](#travisci-)\n    * [Building locally](#building-locally)\n    * [Testing](#testing)\n* [Contributing](#contributing-)\n* [Honorable Mentions](#honorable-mentions-)\n* [License](#license-)\n\n## Getting Started 👣\n\n**Slide To Act** is distributed through [Maven Central](https://search.maven.org/artifact/com.ncorti/slidetoact). To use it you need to add the following **Gradle dependency** to your **android app gradle file** (NOT the root file):\n\n```groovy\ndependencies {\n   implementation \"com.ncorti:slidetoact:0.11.0\"\n}\n```\n\nOr you can download the .AAR artifact [directly from Maven Central](https://search.maven.org/artifact/com.ncorti/slidetoact/0.11.0/aar).\n\n## Example 🚸\n\nAfter setting up the Gradle dependency, you can use ``SlideToActView`` widgets inside your **XML Layout files**\n\n```xml\n\u003ccom.ncorti.slidetoact.SlideToActView\n    android:id=\"@+id/example\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    app:text=\"Example\" /\u003e\n```\n\nAnd bind them inside your **Java/Kotlin** code:\n```java\nSlideToActView sta = (SlideToActView) findViewById(R.id.example);\n```\n\n## Features 🎨\n\n* **100% Vectorial**, no .png or other assets provided.\n* **Fancy animations!** 🦄\n* **API \u003e= 14** compatible (since v0.2.0)\n* Easy to integrate (just a gradle compile line).\n* Integrated with your **app theme** 🖼.\n* Works **out of the box**, no customization needed.\n* Written in **Kotlin** (but you don't need Kotlin to use it)!\n* **UX Friendly** 🐣, button will bump to complete if it's over the 80% of the slider (see the following gif).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/ux_friendly.gif\" alt=\"ux_friendly gif\"/\u003e\n\u003c/p\u003e\n\n### Attributes\n\nBy the default, every ``SlideToActView`` widget fits to your app using the ``colorAccent`` and the ``colorBackground`` parameters from your theme. You can customize your ``SlideToActView`` using the following **custom attributes**.\n\n```xml\n\u003ccom.ncorti.slidetoact.SlideToActView\n    android:id=\"@+id/example_gray_on_green\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:elevation=\"6dp\"\n    app:area_margin=\"4dp\"\n    app:animation_duration=\"250\"\n    app:outer_color=\"@color/green\"\n    app:inner_color=\"@color/grey\"\n    app:border_radius=\"2dp\"\n    app:text=\"Testing all the custom attributes\"\n    app:text_size=\"12sp\"\n    app:slider_height=\"80dp\"\n    app:slider_locked=\"false\"\n    app:bounce_on_start=\"true\" /\u003e\n```\n\n#### ``area_margin``\n\nUse the ``area_marging`` attribute to control the **margin of the inner circular button** from the outside area. If not set, this attribute defaults to **8dp**.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"assets/area_margin_1.png\" alt=\"area_margin_1\" width=\"40%\"/\u003e \u003cimg src=\"assets/area_margin_2.png\" alt=\"area_margin_2\" width=\"40%\"/\u003e\u003c/p\u003e\n\nYou can also use a **negative** value to have the inner circular button bigger than the slider. To achieve this effect you also need to set `android:clipChildren=\"false\"` on the parent layout, like:\n\n```xml\n\u003cFrameLayout\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:clipChildren=\"false\"\u003e\n\n    \u003ccom.ncorti.slidetoact.SlideToActView\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:area_margin=\"-8dp\"/\u003e\n```\n\nto obtain this behavior:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"assets/area_margin_3.png\" alt=\"area_margin_3\" width=\"40%\"/\u003e\u003c/p\u003e\n\n#### ``icon_margin``\n\nThe attribute ``icon_margin`` let you control the margin of the icon inside the circular button. This makes the icon bigger because can take up more space in the button. \n\nThis is especially useful when you want to make the height of the slider smaller (see ``slider_height``). In this case, if you don't adjust the ``icon_margin`` the image can be too much tiny. By default, the ``icon_margin`` is set to 16dp.\n\nIn next image you can see how it looks like:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"assets/icon_margin_1.png\" alt=\"icon_margin\" width=\"40%\"/\u003e \u003cimg src=\"assets/icon_margin_2.png\" alt=\"icon_margin\" width=\"40%\"/\u003e\u003c/p\u003e\n\n#### ``inner_color`` \u0026 ``outer_color``\n\nUse the ``outer_color`` attribute to control the **color of the external area** and the **color of the arrow icon**. If not set, this attribute defaults to **colorAccent** from your theme.\n\nUse the ``inner_color`` attribute to control the **color of the inner circular button**, the **color of the tick icon** and the **color of the text**. If not set, this attribute defaults to **colorBackground** from your theme.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"assets/color_1.png\" alt=\"color_1\" width=\"40%\"/\u003e \u003cimg src=\"assets/color_2.png\" alt=\"color_2\" width=\"40%\"/\u003e\u003c/p\u003e\n\n#### ``border_radius``\n\nUse the ``border_radius`` attribute to control the **radius** of the **inner circular button** and of the **external area**. A ``border_radius`` set to **0dp** will result in a square slider. If not set, this attribute will render your slider as a **circle** (default behavior).\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"assets/border_radius_1.png\" alt=\"border_radius_1\" width=\"40%\"/\u003e \u003cimg src=\"assets/border_radius_2.png\" alt=\"border_radius_2\" width=\"40%\"/\u003e\u003c/p\u003e\n\n#### ``text``, ``text_size``, ``text_style``, ``text_appearance``\n\nUse the ``text`` attribute to control the **text of your slider**. If not set, this attribute defaults to **SlideToActView**. \n\nUse the ``text_size`` attribute to control the **size** of the **text of your slider**. A ``text_size`` set to **0sp** will result in hiding the text. If not set, this attribute defaults to **16sp**.\n\nUse the ``text_style`` attribute to control the **style** of your text. Accepted values are ``normal``, ``bold`` and ``italic``.\n\nUse the ``text_appearance`` attribute to provide an Android `TextAppearance` style to fully customize your Text.\nPlease use this attribute if you want to use a **custom font** or set the text to be **all caps**.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"assets/text.png\" alt=\"slider_text\" width=\"40%\"/\u003e \u003cimg src=\"assets/text_appearance.png\" alt=\"slider_text_appearance\" width=\"40%\"/\u003e\u003c/p\u003e\n\n#### ``slider_height``\n\nUse the ``slider_height`` attribute to control the **desired height** of the widget. If not set, the widget will try to render with **72dp** of height.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"assets/slider_height_1.png\" alt=\"slider_height_1\" width=\"40%\"/\u003e \u003cimg src=\"assets/slider_height_2.png\" alt=\"slider_height_2\" width=\"40%\"/\u003e\u003c/p\u003e\n\n#### ``slider_locked``\n\nUse the ``slider_locked`` attribute to **lock the slider** (this is a boolean attribute). When a slider is locked, will always bump the button to the beginning (default is false).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/locked_slider.gif\" alt=\"locked_slider gif\"/\u003e\n\u003c/p\u003e\n\nYou can also toggle this attribute programmatically with the provided setter.\n\n```java\nSlideToActView sta = (SlideToActView) findViewById(R.id.slider);\nsta.setLocked(true);\n```\n\n#### ``animation_duration``\n\nUse the ``animation_duration`` attribute to **set the duration** of the complete and reset animation (in milliseconds).\n\nYou can also set animation duration programmatically with the provided setter.\n\n```kotlin\nval sta = (SlideToActView) findViewById(R.id.slider);\nsta.animDuration = 600\n```\n\n#### ``slider_reversed``\n\nUse the ``slider_reversed`` attribute to **reverse the slider** (this is a boolean attribute). When a slider is reversed, the cursor will appear on the right and will progress to the left. (default is false).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/reversed_slider.gif\" alt=\"reversed_slider gif\"/\u003e\n\u003c/p\u003e\n\nYou can also toggle this attribute programmatically with the provided setter.\n\n```java\nSlideToActView sta = (SlideToActView) findViewById(R.id.slider);\nsta.setReversed(true);\n```\n\n#### ``slider_icon``\n\nYou can set a custom icon by setting the ``slider_icon``attribute to a drawable resource.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/custom_icon.png\" alt=\"custom_icon\" width=\"40%\"/\u003e\n\u003c/p\u003e\n\n```xml\napp:slider_icon=\"@drawable/custom_icon\"\n```\n\nYou can also set a custom icon programmatically with the provided setter.\n\n```java\nSlideToActView sta = findViewById(R.id.slider);\nsta.setSliderIcon(R.drawable.custom_icon);\n```\n\nYou can also disable the rotation by setting the ``rotate_icon`` attribute to false.\n\n#### ``complete_icon``\nYou can set a custom complete icon by setting the ``complete_icon``attribute to a drawable resource.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/complete_icon.gif\" alt=\"custom_complete_iconcon\" width=\"40%\"/\u003e\n\u003c/p\u003e\n\n```xml\napp:complete_icon=\"@drawable/slidetoact_ic_check\"\n```\n\nYou can also set a custom complete icon programmatically with the provided setter.\n\n```java\nSlideToActView sta = findViewById(R.id.slider);\nsta.setCompleteIcon(R.drawable.custom_complete_animated);\n```\n\n#### ``slider_icon_color``\n\nYou can set a custom color for the icon by setting the ``slider_icon_color`` attribute.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/slider_icon_color.png\" alt=\"custom_icon\" width=\"40%\"/\u003e\n\u003c/p\u003e\n\nThis attribute defaults to the ``outer_color`` if set. If ``outer_color`` is not set, this attribute defaults to **colorAccent** from your theme.\n\n#### ``bump_vibration``\n\nYou can make the device vibrate when the cursor \"bumps\" to the end of the sliding path by setting the period of vibration through bump_vibration attribute in your layout XML (default is 0)\n\n```xml\napp:bump_vibration=\"50\"\n```\n\nNote that the period of vibration is in milliseconds\n\nYou can achieve the same programmatically using the setter:\n\n```java\nSlideToActView sta = (SlideToActView) findViewById(R.id.slider);\nsta.setBumpVibration(50);\n```\n\nIn order for this feature to work, you need have the permission ```android.permission.VIBRATE``` in your AndroidManifest.xml\n\n```xml\n\u003cuses-permission android:name=\"android.permission.VIBRATE\"/\u003e\n```\n\n#### ``android:elevation``\n\nUse the ``android:elevation`` attribute to set the **elevation** of the widget. The widgets will take care of providing the proper ``ViewOutlineProvider`` during the whole animation (a.k.a. The shadow will be drawn properly).\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"assets/elevation_1.png\" alt=\"elevation_1\" width=\"40%\"/\u003e \u003cimg src=\"assets/elevation_2.png\" alt=\"elevation_2\" width=\"40%\"/\u003e\u003c/p\u003e\n\n#### ``state_complete``\n\nUse ``state_complete`` attribute to create ``SlideToActView`` in complete state.\n\n```xml\napp:state_complete=\"true\"\n```\n\nCan be also set programmatically. \n\nWith full slide animation:\n\n```java\nSlideToActView sta = (SlideToActView) findViewById(R.id.slider);\nsta.setCompleted(completed: true, withAnimation: true);\n```\n\nWithout slide animation:\n\n```java\nSlideToActView sta = (SlideToActView) findViewById(R.id.slider);\nsta.setCompleted(completed: true, withAnimation: false);\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"assets/complete.png\" alt=\"complete\" width=\"40%\"/\u003e\n\u003c/p\u003e\n\n#### ``bounce_on_start``\n\nYou can enable a bounce animation for the slider when the view is first rendered by setting the ``bounce_on_start`` attribute to true (default is false)\nAlso you can set the duration of the bounce animation by setting the ``bounce_duration`` attribute (default is 2000)\nand repeat count by setting the ``bounce_repeat`` attribute (default is INFINITE)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/bounce_on_start.gif\" alt=\"bounce on start gif\"/\u003e\n\u003c/p\u003e\n\n\n### Event callbacks\n\nYou can use the ``OnSlideCompleteListener`` and the ``OnSlideResetListener`` to simply interact with the widget. If you need to perform operations during animations, you can provide an ``OnSlideToActAnimationEventListener``. With the latter, you will be notified of every animation start/stop.\n\nYou can try the **Event Callbacks** in the [Demo app](#demo) to better understand where every callback is called.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"assets/event_log.png\" alt=\"event_log\" width=\"40%\"/\u003e\u003c/p\u003e\n\n## Demo 📲\n\nWonna see the widget in action? Just give a try to the **Example App**, it's inside the [**example**](example/) folder. \n\nOtherwise, you can just [download the **APK** from a CircleCI build](https://45-58338361-gh.circle-artifacts.com/0/tmp/circle-artifacts.uQdJ7rB/outputs/apk/example-debug.apk), and try it on a real device/emulator. \n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/example_app.gif\" alt=\"example_app gif\"/\u003e\n\u003c/p\u003e\n\n## Building/Testing ⚙️\n\n### CircleCI [![CircleCI](https://circleci.com/gh/cortinico/slidetoact/tree/master.svg?style=shield)](https://circleci.com/gh/cortinico/slidetoact/tree/master)\n\nThis projects is built with [**Circle CI**](https://circleci.com/gh/cortinico/slidetoact/). The CI environment takes care of building the library .AAR, the example app and to run the **Espresso** tests. **Artifacts** are exposed at the end of every build (both the .AAR and the .APK of the example app).\n\n### TravisCI [![Build Status](https://travis-ci.org/cortinico/slidetoact.svg?branch=master)](https://travis-ci.org/cortinico/slidetoact)\n\n[**TravisCI**](https://travis-ci.org/cortinico/slidetoact) builds are also running but they are considered **Legacy**. I'm probably going to dismiss it soon or later.\n\n### Building locally\n\nBefore building, make sure you have the following **updated components** from the Android SDK:\n\n* tools\n* platform-tools\n* build-tools-25.0.3\n* android-25\n* extra-android-support\n* extra-android-m2repository\n* extra-google-m2repository\n\nThen just clone the repo locally and build the .AAR with the following command:\n\n```bash\ngit clone git@github.com:cortinico/slidetoact.git\ncd slidetoact/\n./gradlew slidetoact:assemble\n```\n\nThe assembled .AAR will be inside the **slidetoact/build/outputs/aar** folder.\n\n### Testing\n\nOnce you're able to build successfully, you can run Espresso tests locally with the following command.\n\n```bash\n./gradlew clean build connectedCheck \n```\n\nMake sure your tests are all green ✅ locally before submitting PRs.\n\n## Contributing 🤝\n\n**Looking for contributors! Don't be shy.** 😁 Feel free to open issues/pull requests to help me improve this project.\n\n* When reporting a new Issue, make sure to attach **Screenshots**, **Videos** or **GIFs** of the problem you are reporting.\n* When submitting a new PR, make sure tests are all green. Write new tests if necessary.\n\n## Honorable mentions 🎖\n\n* [flutter-slide-to-act](https://github.com/imtoori/flutter-slide-to-act) - A porting of this widget for Flutter\n\n## License 📄\n\nThis project is licensed under the MIT License - see the [License](License) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcortinico%2Fslidetoact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcortinico%2Fslidetoact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcortinico%2Fslidetoact/lists"}