Repository files navigation

A simpleSlide to UnlockMaterial widget forAndroid, written inKotlin 🇰.

• Getting Started
• Example
• Features
  • Attributes
    • area_margin
    • inner_color &outer_color
    • border_radius
    • text,text_size,text_style,text_appearance
    • slider_height
    • slider_locked
    • animation_duration
    • slider_reversed
    • slider_icon
    • complete_icon
    • bump_vibration
    • rotate_icon
    • android:elevation
    • state_complete
    • bounce_on_start
  • Event callbacks
• Demo
• Building/Testing
  • CircleCI
  • TravisCI
  • Building locally
  • Testing
• Contributing
• Honorable Mentions
• License

Slide To Act is distributed throughMaven Central. To use it you need to add the followingGradle dependency to yourandroid app gradle file (NOT the root file):

dependencies {   implementation"com.ncorti:slidetoact:0.11.0"}

Or you can download the .AAR artifactdirectly from Maven Central.

After setting up the Gradle dependency, you can useSlideToActView widgets inside yourXML Layout files

<com.ncorti.slidetoact.SlideToActViewandroid:id="@+id/example"android:layout_width="match_parent"android:layout_height="wrap_content"app:text="Example" />

And bind them inside yourJava/Kotlin code:

SlideToActViewsta = (SlideToActView)findViewById(R.id.example);

• 100% Vectorial, no .png or other assets provided.
• Fancy animations! 🦄
• API >= 14 compatible (since v0.2.0)
• Easy to integrate (just a gradle compile line).
• Integrated with yourapp theme 🖼.
• Worksout of the box, no customization needed.
• Written inKotlin (but you don't need Kotlin to use it)!
• UX Friendly 🐣, button will bump to complete if it's over the 80% of the slider (see the following gif).

By the default, everySlideToActView widget fits to your app using thecolorAccent and thecolorBackground parameters from your theme. You can customize yourSlideToActView using the followingcustom attributes.

<com.ncorti.slidetoact.SlideToActViewandroid:id="@+id/example_gray_on_green"android:layout_width="match_parent"android:layout_height="wrap_content"android:elevation="6dp"app:area_margin="4dp"app:animation_duration="250"app:outer_color="@color/green"app:inner_color="@color/grey"app:border_radius="2dp"app:text="Testing all the custom attributes"app:text_size="12sp"app:slider_height="80dp"app:slider_locked="false"app:bounce_on_start="true" />

Use thearea_marging attribute to control themargin of the inner circular button from the outside area. If not set, this attribute defaults to8dp.

You can also use anegative value to have the inner circular button bigger than the slider. To achieve this effect you also need to setandroid:clipChildren="false" on the parent layout, like:

<FrameLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:clipChildren="false">    <com.ncorti.slidetoact.SlideToActViewandroid:layout_width="match_parent"android:layout_height="wrap_content"app:area_margin="-8dp"/>

to obtain this behavior:

The attributeicon_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.

This is especially useful when you want to make the height of the slider smaller (seeslider_height). In this case, if you don't adjust theicon_margin the image can be too much tiny. By default, theicon_margin is set to 16dp.

In next image you can see how it looks like:

Use theouter_color attribute to control thecolor of the external area and thecolor of the arrow icon. If not set, this attribute defaults tocolorAccent from your theme.

Use theinner_color attribute to control thecolor of the inner circular button, thecolor of the tick icon and thecolor of the text. If not set, this attribute defaults tocolorBackground from your theme.

Use theborder_radius attribute to control theradius of theinner circular button and of theexternal area. Aborder_radius set to0dp will result in a square slider. If not set, this attribute will render your slider as acircle (default behavior).

Use thetext attribute to control thetext of your slider. If not set, this attribute defaults toSlideToActView.

Use thetext_size attribute to control thesize of thetext of your slider. Atext_size set to0sp will result in hiding the text. If not set, this attribute defaults to16sp.

Use thetext_style attribute to control thestyle of your text. Accepted values arenormal,bold anditalic.

Use thetext_appearance attribute to provide an AndroidTextAppearance style to fully customize your Text.Please use this attribute if you want to use acustom font or set the text to beall caps.

Use theslider_height attribute to control thedesired height of the widget. If not set, the widget will try to render with72dp of height.

Use theslider_locked attribute tolock the slider (this is a boolean attribute). When a slider is locked, will always bump the button to the beginning (default is false).

You can also toggle this attribute programmatically with the provided setter.

SlideToActViewsta = (SlideToActView)findViewById(R.id.slider);sta.setLocked(true);

Use theanimation_duration attribute toset the duration of the complete and reset animation (in milliseconds).

You can also set animation duration programmatically with the provided setter.

val sta= (SlideToActView) findViewById(R.id.slider);sta.animDuration=600

Use theslider_reversed attribute toreverse 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).

You can also toggle this attribute programmatically with the provided setter.

SlideToActViewsta = (SlideToActView)findViewById(R.id.slider);sta.setReversed(true);

You can set a custom icon by setting theslider_iconattribute to a drawable resource.

app:slider_icon="@drawable/custom_icon"

You can also set a custom icon programmatically with the provided setter.

SlideToActViewsta =findViewById(R.id.slider);sta.setSliderIcon(R.drawable.custom_icon);

You can also disable the rotation by setting therotate_icon attribute to false.

You can set a custom complete icon by setting thecomplete_iconattribute to a drawable resource.

app:complete_icon="@drawable/slidetoact_ic_check"

You can also set a custom complete icon programmatically with the provided setter.

SlideToActViewsta =findViewById(R.id.slider);sta.setCompleteIcon(R.drawable.custom_complete_animated);

You can set a custom color for the icon by setting theslider_icon_color attribute.

This attribute defaults to theouter_color if set. Ifouter_color is not set, this attribute defaults tocolorAccent from your theme.

You 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)

app:bump_vibration="50"

Note that the period of vibration is in milliseconds

You can achieve the same programmatically using the setter:

SlideToActViewsta = (SlideToActView)findViewById(R.id.slider);sta.setBumpVibration(50);

In order for this feature to work, you need have the permissionandroid.permission.VIBRATE in your AndroidManifest.xml

<uses-permissionandroid:name="android.permission.VIBRATE"/>

Use theandroid:elevation attribute to set theelevation of the widget. The widgets will take care of providing the properViewOutlineProvider during the whole animation (a.k.a. The shadow will be drawn properly).

Usestate_complete attribute to createSlideToActView in complete state.

app:state_complete="true"

Can be also set programmatically.

With full slide animation:

SlideToActViewsta = (SlideToActView)findViewById(R.id.slider);sta.setCompleted(completed:true,withAnimation:true);

Without slide animation:

SlideToActViewsta = (SlideToActView)findViewById(R.id.slider);sta.setCompleted(completed:true,withAnimation:false);

You can enable a bounce animation for the slider when the view is first rendered by setting thebounce_on_start attribute to true (default is false)Also you can set the duration of the bounce animation by setting thebounce_duration attribute (default is 2000)and repeat count by setting thebounce_repeat attribute (default is INFINITE)

You can use theOnSlideCompleteListener and theOnSlideResetListener to simply interact with the widget. If you need to perform operations during animations, you can provide anOnSlideToActAnimationEventListener. With the latter, you will be notified of every animation start/stop.

You can try theEvent Callbacks in theDemo app to better understand where every callback is called.

Wonna see the widget in action? Just give a try to theExample App, it's inside theexample folder.

Otherwise, you can justdownload theAPK from a CircleCI build, and try it on a real device/emulator.

This projects is built withCircle CI. The CI environment takes care of building the library .AAR, the example app and to run theEspresso tests.Artifacts are exposed at the end of every build (both the .AAR and the .APK of the example app).

TravisCI builds are also running but they are consideredLegacy. I'm probably going to dismiss it soon or later.

Before building, make sure you have the followingupdated components from the Android SDK:

• tools
• platform-tools
• build-tools-25.0.3
• android-25
• extra-android-support
• extra-android-m2repository
• extra-google-m2repository

Then just clone the repo locally and build the .AAR with the following command:

git clone git@github.com:cortinico/slidetoact.gitcd slidetoact/./gradlew slidetoact:assemble

The assembled .AAR will be inside theslidetoact/build/outputs/aar folder.

Once you're able to build successfully, you can run Espresso tests locally with the following command.

./gradlew clean build connectedCheck

Make sure your tests are all green ✅ locally before submitting PRs.

Looking for contributors! Don't be shy. 😁 Feel free to open issues/pull requests to help me improve this project.

• When reporting a new Issue, make sure to attachScreenshots,Videos orGIFs of the problem you are reporting.
• When submitting a new PR, make sure tests are all green. Write new tests if necessary.

• flutter-slide-to-act - A porting of this widget for Flutter

This project is licensed under the MIT License - see theLicense file for details