implement custom 'start vpn' button design for initial provider setup

8 files changed, 248 insertions, 1 deletions

diff --git a/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java b/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java
index c7273613..2fcc036e 100644
--- a/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java
+++ b/app/src/main/java/se/leap/bitmaskclient/base/views/MainButton.java
@@ -2,10 +2,13 @@ package se.leap.bitmaskclient.base.views;
 
 import android.annotation.TargetApi;
 import android.content.Context;
+import android.graphics.PorterDuff;
+import android.graphics.drawable.Drawable;
 import android.util.AttributeSet;
 import android.view.LayoutInflater;
 import android.widget.RelativeLayout;
 
+import androidx.annotation.DrawableRes;
 import androidx.appcompat.widget.AppCompatImageView;
 import androidx.core.content.ContextCompat;
 
@@ -56,4 +59,16 @@ public class MainButton extends RelativeLayout {
             button.setTag(isOn ? "button_circle_stop" : "button_circle_start");
         }
     }
+
+    public void setCustomDrawable(@DrawableRes int drawableResource) {
+       // Drawable drawable = ContextCompat.getDrawable(getContext(), drawableResource);
+        Drawable drawable = getContext().getDrawable(drawableResource);
+        if (drawable == null) {
+            return;
+        }
+
+        drawable.setColorFilter(ContextCompat.getColor(getContext(), R.color.colorPrimaryLight), PorterDuff.Mode.MULTIPLY);
+        button.setImageDrawable(drawable);
+        button.setTag("button_setup_circle_custom");
+    }
 }
diff --git a/app/src/main/java/se/leap/bitmaskclient/providersetup/fragments/SetupSuccessFragment.java b/app/src/main/java/se/leap/bitmaskclient/providersetup/fragments/SetupSuccessFragment.java
index eb775e2a..448e357a 100644
--- a/app/src/main/java/se/leap/bitmaskclient/providersetup/fragments/SetupSuccessFragment.java
+++ b/app/src/main/java/se/leap/bitmaskclient/providersetup/fragments/SetupSuccessFragment.java
@@ -8,6 +8,7 @@ import android.view.ViewGroup;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
+import se.leap.bitmaskclient.R;
 import se.leap.bitmaskclient.databinding.FSetupSuccessBinding;
 
 public class SetupSuccessFragment extends BaseSetupFragment {
@@ -28,9 +29,10 @@ public class SetupSuccessFragment extends BaseSetupFragment {
 
         binding.mainButton.setOnClickListener(v -> {
             setupActivityCallback.onSetupFinished();
-            binding.mainButton.updateState(false, true);
             binding.mainButton.setEnabled(false);
+            binding.mainButton.setCustomDrawable(R.drawable.button_setup_circle_progress);
         });
+        binding.mainButton.setCustomDrawable(R.drawable.button_setup_circle_start);
 
         return binding.getRoot();
     }
diff --git a/app/src/main/res/drawable/button_setup_circle_progress.xml b/app/src/main/res/drawable/button_setup_circle_progress.xml
new file mode 100644
index 00000000..be45d207
--- /dev/null
+++ b/app/src/main/res/drawable/button_setup_circle_progress.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/button_setup_circle_progress_pressed" android:state_pressed="true">
+    </item>
+    <item android:drawable="@drawable/button_setup_circle_progress_released">
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_setup_circle_progress_pressed.xml b/app/src/main/res/drawable/button_setup_circle_progress_pressed.xml
new file mode 100644
index 00000000..9f0021ef
--- /dev/null
+++ b/app/src/main/res/drawable/button_setup_circle_progress_pressed.xml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <!--  <item>
+          <shape android:shape="rectangle">
+              <solid android:color="@color/white"/>
+              <size android:width="250dp" android:height="250dp"/>
+          </shape>
+      </item> -->
+    <item
+        android:left="-23dp"
+        android:right="-23dp"
+        android:top="-8dp"
+        android:bottom="-8dp"
+        >
+        <animated-rotate
+            android:drawable="@drawable/rotate_progress_image"
+            android:pivotX="50.0%"
+            android:pivotY="50.0%"
+            android:fromDegrees="0.0"
+            android:toDegrees="360.0"
+            >
+        </animated-rotate>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape android:shape="oval">
+            <solid android:color="@color/black"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="3dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.50"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:id="@+id/tintDrawable"
+        android:top="78dp"
+        android:bottom="72dp"
+        android:left="60dp"
+        android:right="60dp"
+        android:drawable="@drawable/ic_btn_on" />
+
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_setup_circle_progress_released.xml b/app/src/main/res/drawable/button_setup_circle_progress_released.xml
new file mode 100644
index 00000000..244ecf10
--- /dev/null
+++ b/app/src/main/res/drawable/button_setup_circle_progress_released.xml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <!-- <item>
+         <shape android:shape="rectangle">
+             <solid android:color="@color/white"/>
+             <size android:width="250dp" android:height="250dp"/>
+         </shape>
+     </item>-->
+
+    <item
+        android:left="-25dp"
+        android:right="-25dp"
+        android:top="-10dp"
+        android:bottom="-10dp"
+        >
+        <animated-rotate
+            android:drawable="@drawable/rotate_progress_image"
+            android:pivotX="50.0%"
+            android:pivotY="50.0%"
+            android:fromDegrees="0.0"
+            android:toDegrees="360.0"
+            >
+        </animated-rotate>
+    </item>
+    <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape android:shape="oval">
+            <solid android:color="@color/black800_dark"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="123dp"
+            android:useLevel="false"
+            android:thickness="15dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.55"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:id="@+id/tintDrawable"
+        android:top="75dp"
+        android:bottom="75dp"
+        android:left="60dp"
+        android:right="60dp"
+        android:drawable="@drawable/ic_btn_on"
+        />
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_setup_circle_start.xml b/app/src/main/res/drawable/button_setup_circle_start.xml
new file mode 100644
index 00000000..93665361
--- /dev/null
+++ b/app/src/main/res/drawable/button_setup_circle_start.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/button_setup_circle_start_pressed" android:state_pressed="true">
+    </item>
+    <item android:drawable="@drawable/button_setup_circle_start_released">
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_setup_circle_start_pressed.xml b/app/src/main/res/drawable/button_setup_circle_start_pressed.xml
new file mode 100644
index 00000000..a9ca0312
--- /dev/null
+++ b/app/src/main/res/drawable/button_setup_circle_start_pressed.xml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    >
+   <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape android:shape="oval">
+            <solid android:color="@color/black"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:top="18dp"
+        android:bottom="12dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="125dp"
+            android:useLevel="false"
+            android:thickness="3dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.50"
+                android:centerY="0.54"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:id="@+id/tintDrawable"
+        android:top="78dp"
+        android:bottom="72dp"
+        android:left="60dp"
+        android:right="60dp"
+        android:drawable="@drawable/ic_btn_on"
+        />
+</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/button_setup_circle_start_released.xml b/app/src/main/res/drawable/button_setup_circle_start_released.xml
new file mode 100644
index 00000000..70c82ec6
--- /dev/null
+++ b/app/src/main/res/drawable/button_setup_circle_start_released.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <!--<item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white"/>
+            <size android:width="250dp" android:height="250dp"/>
+        </shape>
+    </item>-->
+   <item
+       android:bottom="15dp"
+       android:top="15dp"
+        >
+        <shape android:shape="oval">
+           <solid android:color="@color/black800_dark"/>
+            <size android:width="250dp" android:height="250dp" />
+        </shape>
+    </item>
+    <item
+        android:bottom="15dp"
+        android:top="15dp"
+        >
+        <shape
+            android:shape="ring"
+            android:innerRadius="122dp"
+            android:useLevel="false"
+            android:thickness="15dp">
+            <gradient
+                android:type="radial"
+                android:gradientRadius="125dp"
+                android:centerX="0.51"
+                android:centerY="0.55"
+                android:startColor="#000000"
+                android:centerColor="#000000"
+                android:endColor="@color/transparent" />
+
+        </shape>
+    </item>
+    <item
+        android:id="@+id/tintDrawable"
+        android:top="75dp"
+        android:bottom="75dp"
+        android:left="60dp"
+        android:right="60dp"
+        android:drawable="@drawable/ic_btn_on" />
+</layer-list>
\ No newline at end of file