Add support for customising the tick (complete) icon (cortinico#124)

Co-authored-by: Nicola Corti <[email protected]>
prepared911 · Jul 8, 2020 · e339895 · e339895
1 parent 5240dca
commit e339895
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@ A simple *Slide to Unlock* **Material** widget for **Android**, written in [**Ko
         * [``animation_duration``](#animation_duration)
         * [``slider_reversed``](#slider_reversed)
         * [``slider_icon``](#slider_icon)
+        * [``complete_icon``](#complete_icon)
         * [``bump_vibration``](#bump_vibration)
         * [``rotate_icon``](#rotate_icon)
         * [``android:elevation``](#androidelevation)
@@ -229,6 +230,24 @@ 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_icon``attribute to a drawable resource.
+
+<p align="center">
+  <img src="assets/complete_icon.gif" alt="custom_complete_iconcon" width="40%"/>
+</p>
+
+```xml
+app:complete_icon="@drawable/slidetoact_ic_check"
+```
+
+You can also set a custom complete icon programmatically with the provided setter.
+
+```java
+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.

diff --git a/assets/complete_icon.gif b/assets/complete_icon.gif
diff --git a/example/src/main/java/com/ncorti/slidetoact/example/SampleActivity.java b/example/src/main/java/com/ncorti/slidetoact/example/SampleActivity.java
@@ -68,28 +68,25 @@ protected void onCreate(Bundle savedInstanceState) {
                 View.OnClickListener listener = new View.OnClickListener() {
                     @Override
                     public void onClick(final View v) {
-                        switch(v.getId()) {
+                        switch (v.getId()) {
                             case R.id.button_android_icon:
                                 slider.setSliderIcon(R.drawable.ic_android);
                                 break;
                             case R.id.button_cloud_icon:
                                 slider.setSliderIcon(R.drawable.ic_cloud);
                                 break;
+                            case R.id.button_complete_icon:
+                                slider.setCompleteIcon(R.drawable.custom_complete_animated);
+                                break;
                             default:
                                 break;
                         }
                     }
                 };
 
-                slider.setOnSlideResetListener(new SlideToActView.OnSlideResetListener() {
-                    @Override
-                    public void onSlideReset(SlideToActView view) {
-                        slider.setSliderIcon(R.drawable.custom_icon);
-                    }
-                });
-
                 findViewById(R.id.button_android_icon).setOnClickListener(listener);
                 findViewById(R.id.button_cloud_icon).setOnClickListener(listener);
+                findViewById(R.id.button_complete_icon).setOnClickListener(listener);
                 break;
             case R.id.button_reversed_slider:
                 setContentView(R.layout.content_reversed_slider);
@@ -105,7 +102,6 @@ public void onSlideReset(SlideToActView view) {
                 break;
         }
         mSlideList = getSlideList();
-
     }
 
     private List<SlideToActView> getSlideList() {

diff --git a/example/src/main/res/animator/animator_custom_complete.xml b/example/src/main/res/animator/animator_custom_complete.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="600"
+    android:propertyName="rotation"
+    android:repeatMode="restart"
+    android:valueFrom="0"
+    android:valueTo="360"
+    android:valueType="floatType" />
diff --git a/example/src/main/res/drawable/custom_complete_animated.xml b/example/src/main/res/drawable/custom_complete_animated.xml
@@ -0,0 +1,6 @@
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:drawable="@drawable/custom_complete_icon">
+    <target
+        android:name="progress"
+        android:animation="@animator/animator_custom_complete" />
+</animated-vector>
diff --git a/example/src/main/res/drawable/custom_complete_icon.xml b/example/src/main/res/drawable/custom_complete_icon.xml
@@ -0,0 +1,17 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <group
+        android:name="progress"
+        android:pivotX="12"
+        android:pivotY="12"
+        android:rotation="360"
+        android:scaleX="-1">
+        <path
+            android:fillColor="#FFFFFF"
+            android:pathData="M19,8l-4,4h3c0,3.31 -2.69,6 -6,6 -1.01,0 -1.97,-0.25 -2.8,-0.7l-1.46,1.46C8.97,19.54 10.43,20 12,20c4.42,0 8,-3.58 8,-8h3l-4,-4zM6,12c0,-3.31 2.69,-6 6,-6 1.01,0 1.97,0.25 2.8,0.7l1.46,-1.46C15.03,4.46 13.57,4 12,4c-4.42,0 -8,3.58 -8,8H1l4,4 4,-4H6z" />
+    </group>
+
+</vector>
diff --git a/example/src/main/res/layout/content_custom_icon.xml b/example/src/main/res/layout/content_custom_icon.xml
@@ -3,6 +3,7 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
+
     <LinearLayout
         android:id="@+id/slide_container"
         android:layout_width="match_parent"
@@ -13,8 +14,8 @@
         <com.ncorti.slidetoact.SlideToActView
             android:id="@+id/slide_custom_icon"
             style="@style/SlideToActView.Example"
-            app:text="Custom Icon"
-            app:slider_icon="@drawable/custom_icon"/>
+            app:slider_icon="@drawable/custom_icon"
+            app:text="Custom Icon" />
 
         <Button
             android:id="@+id/button_android_icon"
@@ -28,5 +29,10 @@
             android:layout_height="wrap_content"
             android:text="@string/use_cloud_icon" />
 
+        <Button
+            android:id="@+id/button_complete_icon"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/complete_custom_icon" />
     </LinearLayout>
 </ScrollView>
diff --git a/example/src/main/res/values/strings.xml b/example/src/main/res/values/strings.xml
@@ -18,4 +18,5 @@
     <string name="welcome_body">Press the following buttons to checkout different SlideToActView and understand each parameter. You can reset the sliders pressing the Reset button in the Toolbar. Enjoy :)</string>
     <string name="use_android_icon">Use Android icon</string>
     <string name="use_cloud_icon">Use Cloud icon</string>
+    <string name="complete_custom_icon">Complete custom icon</string>
 </resources>
diff --git a/slidetoact/src/main/java/com/ncorti/slidetoact/SlideToActView.kt b/slidetoact/src/main/java/com/ncorti/slidetoact/SlideToActView.kt
@@ -203,9 +203,18 @@ class SlideToActView @JvmOverloads constructor(
     private lateinit var mDrawableArrow: Drawable
 
     /** Tick drawable, is actually an AnimatedVectorDrawable */
-    private val mDrawableTick: Drawable
+    private var mDrawableTick: Drawable
     private var mFlagDrawTick: Boolean = false
 
+    var completeIcon: Int = 0
+        set(value) {
+            field = value
+            if (field != 0) {
+                mDrawableTick = loadAnimatedVectorDrawableCompat(value)
+                invalidate()
+            }
+        }
+
     /* -------------------- PAINT & DRAW -------------------- */
     /** Paint used for outer elements */
     private val mOuterPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG)
@@ -264,6 +273,8 @@ class SlideToActView @JvmOverloads constructor(
         val actualTextColor: Int
         val actualIconColor: Int
 
+        val actualCompleteDrawable: Int
+
         mTextView = TextView(context)
         mTextPaint = mTextView.paint
 
@@ -353,6 +364,7 @@ class SlideToActView @JvmOverloads constructor(
                     hasValue(R.styleable.SlideToActView_outer_color) -> actualOuterColor
                     else -> defaultOuter
                 }
+                actualCompleteDrawable = getResourceId(R.styleable.SlideToActView_complete_icon, 0)
 
                 mIconMargin = getDimensionPixelSize(
                     R.styleable.SlideToActView_icon_margin,
@@ -380,17 +392,10 @@ class SlideToActView @JvmOverloads constructor(
             mAreaHeight.toFloat()
         )
 
-        // Due to bug in the AVD implementation in the support library, we use it only for API < 21
-        mDrawableTick = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-            context.resources.getDrawable(
-                R.drawable.slidetoact_animated_ic_check,
-                context.theme
-            ) as AnimatedVectorDrawable
+        mDrawableTick = if (actualCompleteDrawable != 0) {
+            loadAnimatedVectorDrawableCompat(actualCompleteDrawable)
         } else {
-            AnimatedVectorDrawableCompat.create(
-                context,
-                R.drawable.slidetoact_animated_ic_check
-            )!!
+            loadAnimatedVectorDrawableCompat(R.drawable.slidetoact_animated_ic_check)
         }
 
         mTextPaint.textAlign = Paint.Align.CENTER
@@ -837,6 +842,15 @@ class SlideToActView @JvmOverloads constructor(
         animSet.start()
     }
 
+    private fun loadAnimatedVectorDrawableCompat(value: Int): Drawable {
+        // Due to bug in the AVD implementation in the support library, we use it only for API < 21
+        return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            context.resources.getDrawable(value, context.theme) as AnimatedVectorDrawable
+        } else {
+            AnimatedVectorDrawableCompat.create(context, value)!!
+        }
+    }
+
     /**
      * Private method to start the Tick AVD animation, with the proper library based on API level.
      */

diff --git a/slidetoact/src/main/res/values/attrs.xml b/slidetoact/src/main/res/values/attrs.xml
@@ -16,16 +16,17 @@
         <attr name="border_radius" format="dimension" />
         <attr name="slider_height" format="dimension" />
         <attr name="animation_duration" format="integer" />
-        <attr name="bump_vibration" format="integer"/>
+        <attr name="bump_vibration" format="integer" />
         <attr name="slider_locked" format="boolean" />
         <attr name="slider_reversed" format="boolean" />
         <attr name="slider_icon" format="reference" />
-        <attr name="slider_icon_color" format="color"/>
+        <attr name="slider_icon_color" format="color" />
         <attr name="rotate_icon" format="boolean" />
         <attr name="animate_completion" format="boolean" />
         <attr name="text_appearance" format="reference" />
+        <attr name="complete_icon" format="reference" />
     </declare-styleable>
     <declare-styleable name="SlideToActViewTheme">
-        <attr name="slideToActViewStyle" format="reference"/>
+        <attr name="slideToActViewStyle" format="reference" />
     </declare-styleable>
 </resources>