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

6 files changed, 230 insertions, 0 deletions

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