All Projects β†’ cortinico β†’ Slidetoact

cortinico / Slidetoact

Licence: mit
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin πŸ“±πŸŽ¨πŸ¦„

Programming Languages

kotlin
9241 projects

Projects that are alternatives of or similar to Slidetoact

Ibackdrop
A library to simply use Backdrop in your project (make it easy). Read more ->
Stars: ✭ 137 (-82.5%)
Mutual labels:  material-design, material, android-development, material-ui, android-ui, material-components
Materialdrawer
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.
Stars: ✭ 11,498 (+1368.45%)
Mutual labels:  hacktoberfest, material-design, android-development, material-ui, android-ui, material-components
Bottomsheet
BottomSheet dialog library for Android
Stars: ✭ 219 (-72.03%)
Mutual labels:  material-design, android-development, material-ui, android-ui, material-components
Mediapicker
Easy customizable picker for all your needs in Android application
Stars: ✭ 105 (-86.59%)
Mutual labels:  material-design, android-development, material-ui, android-ui, material-components
Android Iconics
Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Stars: ✭ 4,916 (+527.84%)
Mutual labels:  material-design, material, android-development, material-ui, material-components
Fancyshowcaseview
An easy-to-use customisable show case view with circular reveal animation.
Stars: ✭ 1,662 (+112.26%)
Mutual labels:  material-design, android-development, material-ui, android-ui
Materialdialog Android
πŸ“±Android Library to implement animated, 😍beautiful, 🎨stylish Material Dialog in android apps easily.
Stars: ✭ 602 (-23.12%)
Mutual labels:  hacktoberfest, material-design, material-ui, android-ui
Material Admin
Free Material Admin Template
Stars: ✭ 219 (-72.03%)
Mutual labels:  material-design, material, material-ui, material-components
Cardview
Material Design Cards ? How cool is that !
Stars: ✭ 101 (-87.1%)
Mutual labels:  material-design, material, android-development, material-ui
Vuetify
πŸ‰ Material Component Framework for Vue
Stars: ✭ 33,085 (+4125.42%)
Mutual labels:  hacktoberfest, material-design, material, material-components
Mahapps.metro.iconpacks
Awesome icon packs for WPF and UWP in one library
Stars: ✭ 1,157 (+47.77%)
Mutual labels:  hacktoberfest, material-design, material, material-ui
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-85.95%)
Mutual labels:  material-design, material, material-ui, material-components
media-picker
Easy customizable picker for all your needs in Android application
Stars: ✭ 167 (-78.67%)
Mutual labels:  material-ui, android-development, material-components, android-ui
Material-Backdrop-Android
Material Backdrop
Stars: ✭ 106 (-86.46%)
Mutual labels:  material-ui, android-development, material-components, android-ui
Alerter
An Android Alerting Library
Stars: ✭ 5,213 (+565.77%)
Mutual labels:  material-design, android-development, material-ui, android-ui
Materialfavoritebutton
Animated favorite/star/like button
Stars: ✭ 586 (-25.16%)
Mutual labels:  material-design, material, material-ui, android-ui
Cyanea
A theme engine for Android
Stars: ✭ 1,319 (+68.45%)
Mutual labels:  material-design, material, material-ui, material-components
Datingapp
Dating UI kit is used for online meet up with girls and boys . The screen contains more than 30 icons and most of all required elements required to design an application like this. The XML and JAVA files contains comments at each and every point for easy understanding. Everything was made with a detail oriented style and followed by today's web trends. Clean coded & Layers are well-organized, carefully named, and grouped.
Stars: ✭ 97 (-87.61%)
Mutual labels:  material-design, android-development, material-ui, android-ui
Nytimes App
πŸ—½ A Simple Demonstration of the New York Times App πŸ“± using Jsoup web crawler with MVVM Architecture πŸ”₯
Stars: ✭ 246 (-68.58%)
Mutual labels:  hacktoberfest, material-design, android-development, material-ui
Materiallettericon
Material first letter icon like lollipop contacts icon. Letter(s) on a shape drawn on canvas.
Stars: ✭ 255 (-67.43%)
Mutual labels:  material-design, material, material-ui, android-ui

Slide To Act

CircleCI Download Android Weekly License Twitter Awesome Kotlin Badge

A simple Slide to Unlock Material widget for Android, written in Kotlin πŸ‡°.

sample-slidetoact gif

Getting Started πŸ‘£

Slide To Act is distributed through JCenter. To use it you need to add the following Gradle dependency to your android app gradle file (NOT the root file):

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

Or you can download the .AAR artifact directly from Bintray.

Example 🚸

After setting up the Gradle dependency, you can use SlideToActView widgets inside your XML Layout files

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

And bind them inside your Java/Kotlin code:

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

Features 🎨

  • 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 your app theme πŸ–Ό.
  • Works out of the box, no customization needed.
  • Written in Kotlin (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).

ux_friendly gif

Attributes

By 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.

<com.ncorti.slidetoact.SlideToActView
    android: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" />

area_margin

Use 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.

area_margin_1 area_margin_2

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

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="false">

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

to obtain this behavior:

area_margin_3

icon_margin

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

This 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.

In next image you can see how it looks like:

icon_margin icon_margin

inner_color & outer_color

Use 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.

Use 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.

color_1 color_2

border_radius

Use 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).

border_radius_1 border_radius_2

text, text_size, text_style, text_appearance

Use the text attribute to control the text of your slider. If not set, this attribute defaults to SlideToActView.

Use 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.

Use the text_style attribute to control the style of your text. Accepted values are normal, bold and italic.

Use the text_appearance attribute to provide an Android TextAppearance style to fully customize your Text. Please use this attribute if you want to use a custom font or set the text to be all caps.

slider_text slider_text_appearance

slider_height

Use 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.

slider_height_1 slider_height_2

slider_locked

Use 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).

locked_slider gif

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

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

animation_duration

Use the animation_duration attribute to set 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

slider_reversed

Use 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).

reversed_slider gif

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

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

slider_icon

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

custom_icon

app:slider_icon="@drawable/custom_icon"

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

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

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

complete_icon

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

custom_complete_iconcon

app:complete_icon="@drawable/slidetoact_ic_check"

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

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

slider_icon_color

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

custom_icon

This attribute defaults to the outer_color if set. If outer_color is not set, this attribute defaults to colorAccent from your theme.

bump_vibration

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:

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

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

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

android:elevation

Use 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).

elevation_1 elevation_2

Event callbacks

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

You can try the Event Callbacks in the Demo app to better understand where every callback is called.

event_log

Demo πŸ“²

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

Otherwise, you can just download the APK from a CircleCI build, and try it on a real device/emulator.

example_app gif

Building/Testing βš™οΈ

CircleCI CircleCI

This projects is built with Circle CI. 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).

TravisCI Build Status

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

Building locally

Before building, make sure you have the following updated 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 [email protected]:cortinico/slidetoact.git
cd slidetoact/
./gradlew slidetoact:assemble

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

Testing

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.

Contributing 🀝

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 attach Screenshots, Videos or GIFs of the problem you are reporting.
  • When submitting a new PR, make sure tests are all green. Write new tests if necessary.

Honorable mentions πŸŽ–

License πŸ“„

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].