Slide To Act

• Demo
• Building/Testing

• Contributing
• Honorable Mentions
• License

Getting Started 👣

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

<pre><code class="lang-groovy">dependencies { implementation &quot;com.ncorti:slidetoact:0.11.0&quot; }</code></pre>

Or you can download the .AAR artifact directly from Maven Central.

Example 🚸

<pre><code class="lang-xml">&lt;com.ncorti.slidetoact.SlideToActView android:id=&quot;@+id/example&quot; android:layoutwidth=&quot;matchparent&quot; android:layoutheight=&quot;wrapcontent&quot; app:text=&quot;Example&quot; /&gt;</code></pre>

And bind them inside your Java/Kotlin code: <pre><code class="lang-java">SlideToActView sta = (SlideToActView) findViewById(R.id.example);</code></pre>

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

Attributes

<pre><code class="lang-xml">&lt;com.ncorti.slidetoact.SlideToActView android:id=&quot;@+id/examplegrayon_green&quot; android:layoutwidth=&quot;matchparent&quot; android:layoutheight=&quot;wrapcontent&quot; android:elevation=&quot;6dp&quot; app:area_margin=&quot;4dp&quot; app:animati app:outer_color=&quot;@color/green&quot; app:inner_color=&quot;@color/grey&quot; app:border_radius=&quot;2dp&quot; app:text=&quot;Testing all the custom attributes&quot; app:text_size=&quot;12sp&quot; app:slider_height=&quot;80dp&quot; app:slider_locked=&quot;false&quot; app:bounce_ /&gt;</code></pre>

<p align="center"><img src="assets/areamargin1.png" alt="areamargin1" width="40%"/> <img src="assets/areamargin2.png" alt="areamargin2" width="40%"/></p>

<pre><code class="lang-xml">&lt;FrameLayout android:layoutwidth=&quot;matchparent&quot; android:layoutheight=&quot;wrapcontent&quot; android:clipChildren=&quot;false&quot;&gt;

&lt;com.ncorti.slidetoact.SlideToActView android:layoutwidth=&quot;matchparent&quot; android:layoutheight=&quot;wrapcontent&quot; app:area_margin=&quot;-8dp&quot;/&gt;</code></pre>

to obtain this behavior:

<p align="center"><img src="assets/areamargin3.png" alt="areamargin3" width="40%"/></p>

In next image you can see how it looks like:

<p align="center"><img src="assets/iconmargin1.png" alt="iconmargin" width="40%"/> <img src="assets/iconmargin2.png" alt="iconmargin" width="40%"/></p>

<p align="center"><img src="assets/color1.png" alt="color1" width="40%"/> <img src="assets/color2.png" alt="color2" width="40%"/></p>

<p align="center"><img src="assets/borderradius1.png" alt="borderradius1" width="40%"/> <img src="assets/borderradius2.png" alt="borderradius2" width="40%"/></p>

<p align="center"><img src="assets/text.png" alt="slidertext" width="40%"/> <img src="assets/textappearance.png" alt="slidertextappearance" width="40%"/></p>

<p align="center"><img src="assets/sliderheight1.png" alt="sliderheight1" width="40%"/> <img src="assets/sliderheight2.png" alt="sliderheight2" width="40%"/></p>

<p align="center"> <img src="assets/lockedslider.gif" alt="lockedslider gif"/> </p>

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

<pre><code class="lang-java">SlideToActView sta = (SlideToActView) findViewById(R.id.slider); sta.setLocked(true);</code></pre>

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

<pre><code class="lang-kotlin">val sta = (SlideToActView) findViewById(R.id.slider); sta.animDuration = 600</code></pre>

<p align="center"> <img src="assets/reversedslider.gif" alt="reversedslider gif"/> </p>

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

<pre><code class="lang-java">SlideToActView sta = (SlideToActView) findViewById(R.id.slider); sta.setReversed(true);</code></pre>

<p align="center"> <img src="assets/customicon.png" alt="customicon" width="40%"/> </p>

<pre><code class="lang-xml">app:slidericon=&quot;@drawable/customicon&quot;</code></pre>

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

<pre><code class="lang-java">SlideToActView sta = findViewById(R.id.slider); sta.setSliderIcon(R.drawable.custom_icon);</code></pre>

<p align="center"> <img src="assets/completeicon.gif" alt="customcomplete_iconcon" width="40%"/> </p>

<pre><code class="lang-xml">app:completeicon=&quot;@drawable/slidetoactic_check&quot;</code></pre>

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

<pre><code class="lang-java">SlideToActView sta = findViewById(R.id.slider); sta.setCompleteIcon(R.drawable.customcompleteanimated);</code></pre>

<p align="center"> <img src="assets/slidericoncolor.png" alt="custom_icon" width="40%"/> </p>

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)

<pre><code class="lang-xml">app:bump_vibration=&quot;50&quot;</code></pre>

Note that the period of vibration is in milliseconds

You can achieve the same programmatically using the setter:

<pre><code class="lang-java">SlideToActView sta = (SlideToActView) findViewById(R.id.slider); sta.setBumpVibration(50);</code></pre>

In order for this feature to work, you need have the permission <pre><code class="lang-android">.permission.VIBRATE</code></pre> in your AndroidManifest.xml

<pre><code class="lang-xml">&lt;uses-permission android:name=&quot;android.permission.VIBRATE&quot;/&gt;</code></pre>

<p align="center"><img src="assets/elevation1.png" alt="elevation1" width="40%"/> <img src="assets/elevation2.png" alt="elevation2" width="40%"/></p>

<pre><code class="lang-xml">app:state_complete=&quot;true&quot;</code></pre>

Can be also set programmatically.

With full slide animation:

<pre><code class="lang-java">SlideToActView sta = (SlideToActView) findViewById(R.id.slider); sta.setCompleted(completed: true, withAnimation: true);</code></pre>

Without slide animation:

<pre><code class="lang-java">SlideToActView sta = (SlideToActView) findViewById(R.id.slider); sta.setCompleted(completed: true, withAnimation: false);</code></pre>

<p align="center"> <img src="assets/complete.png" alt="complete" width="40%"/> </p>

<p align="center"> <img src="assets/bounceonstart.gif" alt="bounce on start gif"/> </p>

Event callbacks