implement transition animation between connected and disconnected state for RiseupVPn

7 files changed, 158 insertions, 73 deletions

diff --git a/app/src/custom/res/animator/state_transition_connceted_disconnected.xml b/app/src/custom/res/animator/state_transition_connceted_disconnected.xml
new file mode 100644
index 00000000..751d2da5
--- /dev/null
+++ b/app/src/custom/res/animator/state_transition_connceted_disconnected.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+
+</set>
\ No newline at end of file
diff --git a/app/src/custom/res/drawable/state_connected.xml b/app/src/custom/res/drawable/state_connected.xml
index c9854d69..e0a9005f 100644
--- a/app/src/custom/res/drawable/state_connected.xml
+++ b/app/src/custom/res/drawable/state_connected.xml
@@ -3,13 +3,25 @@
     android:viewportHeight="220"
     android:width="166dp"
     android:height="220dp">
-    <path
-        android:pathData="M75.7916 211.927C37.7611 190.779 9.33369 157.386 2.89166 126.295C1.07036 117.505 0.998811 115.374 1.00089 69.9755L1.0025 26.6083L4.76437 24.1851C20.6619 13.9449 37.4788 7.09821 54.6105 3.64229C89.5868 -3.41322 125.875 3.66238 158.333 24.8539L161 26.5952V70.1783C161 115.754 160.927 117.944 159.119 126.65C152.713 157.49 128.092 187.572 91.7515 208.96C81.1937 215.174 81.5205 215.113 75.7916 211.927Z"
-        android:fillColor="#739B4C" />
-    <path
-        android:pathData="M81.0089 1.00082C72.1811 0.99767 63.3554 1.87831 54.6114 3.64218C37.4796 7.09809 20.6622 13.9447 4.76468 24.185L1.00318 26.608L1.00002 69.9756C0.998421 115.374 1.06949 117.505 2.89058 126.295C9.3326 157.386 37.76 190.778 75.7905 211.927H75.7913C78.2626 213.301 79.6075 214.092 81.1849 214.051V1.00327C81.1259 1.00314 81.0673 1 81.008 1L81.0089 1.00082Z"
-        android:fillColor="#81A55D" />
-    <path
-        android:pathData="M84.9756 57.0972C84.9756 57.0972 82.861 53.0004 82.72 52.4353C82.5789 51.87 81.4512 46.0784 81.4512 46.0784L82.861 43.5356L85.9625 38.8737L90.4738 35.3421L91.6016 34.9182L102.457 30.8212L103.444 29.8325L102.316 28.1374L100.765 27.2897L97.9194 26.5591L90.79 25.8286L85.2576 25.8754L81.4512 26.7231L78.0677 25.4516L73.8383 24.8863L67.6353 24.745L64.5337 24.6038L59.3176 26.5814L51.4227 35.7638L50.4359 39.2954L49.872 42.4034L47.1934 48.1953L45.5016 53.7047L44.6558 59.638V60.9094L40.5674 67.1251L38.3118 71.787V78.4266L39.0166 92.1295L40.2854 97.0739L42.8231 101.595L46.0656 104.561L47.4753 110.353L52.8325 122.219L59.1766 129.847L59.5993 130.271L61.855 141.713L54.1012 155.841L51.667 157.727L49.8423 159.204L46.7131 159.118L44.9676 160.019L42.8502 160.109L41.5709 161.384L38.8317 160.972L36.1229 160.841L34.0333 162.489L33.7324 164.937L35.1214 163.365L37.4581 162.685L37.7028 164.932L41.3952 163.678L43.5126 163.588L47.2482 164.035C47.2482 164.035 50.4869 163.823 51.0475 163.762C51.6081 163.702 55.0481 164.037 55.0481 164.037L57.5708 163.763L58.9086 164.328L60.7 163.849L62.6442 164.774L65.4473 164.469L65.809 162.583L65.7021 161.6L67.6158 162.244L69.1701 163.496L70.1791 164.949L70.1202 163.108L68.8947 160.968C68.8947 160.968 68.0564 159.78 67.4958 159.841C66.9352 159.901 64.7565 159.428 64.7565 159.428L63.2607 160.018L61.6273 159.342L60.022 160.228L58.5439 159.678L57.8307 158.335L56.8037 158.02L57.9073 155.142L60.4449 151.601L63.8284 145.95L66.7889 142.419L67.9168 141.006C67.9168 141.006 69.3266 138.887 69.3266 138.322C69.3266 137.757 69.6087 131.824 69.6087 131.824L67.7759 128.01L66.9301 124.902L83.2836 128.857H84.2705L98.2274 138.887L100.201 141.43L100.906 151.459L100.624 153.719L99.6369 155.556L98.9312 156.686L98.3216 158.272L97.9054 159.332L95.3151 160.135L92.6822 159.66L91.0867 159.463L88.1568 159.887L86.9236 161.207L86.4491 162.847L86.8317 164.504L87.446 162.845L88.2809 161.725L89.0979 161.465L89.1609 162.883L90.2591 163.58L92.5297 162.538L93.6459 162.376L94.0082 163.894L97.4175 163.827L99.7285 163.063L101.623 163.36L104.375 163.675L105.332 163.396L106.088 162.715L107.31 165.25L107.326 162.393L106.143 159.139L104.425 158.103L104.715 157.252L103.446 154.851L103.587 145.669L110.636 154.004L119.941 161.35C119.941 161.35 126.285 163.611 126.849 163.611C127.413 163.611 131.783 163.045 131.783 163.045L134.603 158.384L132.488 152.027L133.334 149.907L128.823 143.974L119.266 134.244L116.98 126.599L117.121 121.371L115.007 115.862L112.61 111.483L114.02 107.104L112.892 100.747L108.084 89.9253L109.86 89.6253L106.88 84.4656L108.816 83.8508L105.412 78.3017L106.844 77.5296L104.292 73.3405L105.124 72.8745L102.037 70.3735L103.165 69.7875L95.1288 64.1577L84.9756 57.0972Z"
-        android:fillColor="#000000" />
+
+        <path
+            android:name="shield1"
+            android:pathData="M75.7916 211.927C37.7611 190.779 9.33369 157.386 2.89166 126.295C1.07036 117.505 0.998811 115.374 1.00089 69.9755L1.0025 26.6083L4.76437 24.1851C20.6619 13.9449 37.4788 7.09821 54.6105 3.64229C89.5868 -3.41322 125.875 3.66238 158.333 24.8539L161 26.5952V70.1783C161 115.754 160.927 117.944 159.119 126.65C152.713 157.49 128.092 187.572 91.7515 208.96C81.1937 215.174 81.5205 215.113 75.7916 211.927Z"
+            android:fillColor="#739B4C" />
+        <path
+            android:name="shield2"
+            android:pathData="M81.0089 1.00082C72.1811 0.99767 63.3554 1.87831 54.6114 3.64218C37.4796 7.09809 20.6622 13.9447 4.76468 24.185L1.00318 26.608L1.00002 69.9756C0.998421 115.374 1.06949 117.505 2.89058 126.295C9.3326 157.386 37.76 190.778 75.7905 211.927H75.7913C78.2626 213.301 79.6075 214.092 81.1849 214.051V1.00327C81.1259 1.00314 81.0673 1 81.008 1L81.0089 1.00082Z"
+            android:fillColor="#81A55D" />
+        <group
+            android:scaleX="0.65"
+            android:scaleY="0.65"
+            android:translateX="42"
+            android:translateY="30"
+            >
+            <path
+                android:pathData="M69.8243 44.3636C69.8243 44.3636 66.935 38.7879 66.6942 38.0606C66.4534 37.3333 65.0088 29.3333 65.0088 29.3333L66.935 25.9394L71.2689 19.6364L77.2882 14.7879L78.7328 14.303L93.42 8.72727L94.8647 7.27273L93.42 4.84849L91.2531 3.63636L87.4007 2.66666L77.7698 1.69697H70.3058L65.2496 2.90909L60.6749 1.21212L54.8963 0.484846L46.4692 0.242421L42.1353 0L35.1529 2.66666L24.3181 15.2727L22.8735 20.1212L22.1511 24.4848L18.5395 32.4848L16.1318 40L14.9279 48V49.697L9.39016 58.1818L6.26011 64.4848V73.4545L7.2232 92.1212L8.90861 98.9091L12.2794 105.212L16.6134 109.333L18.5395 117.333L25.7627 133.576L34.4306 144L34.9121 144.485L38.0422 160.242L27.4482 179.636L24.0773 182.303L21.6696 184.242H17.3357L14.9279 185.455L12.0387 185.697L10.3533 187.394L6.74165 186.909L3.13006 186.667L0.481548 188.606L0 192L1.92619 189.818L5.05624 188.848L5.29701 192L10.3533 190.303L13.2425 190.061L18.2988 190.788C18.2988 190.788 22.6327 190.545 23.355 190.303C24.0773 190.303 28.8928 190.788 28.8928 190.788L32.2636 190.303L34.1898 191.03L36.5975 190.303L39.246 191.515L43.0984 191.03L43.58 188.364L43.3392 186.909L45.9877 187.879L48.1547 189.576L49.5993 191.515V189.091L47.9139 186.182C47.9139 186.182 46.71 184.485 45.9877 184.727C45.2654 184.727 42.3761 184.242 42.3761 184.242L40.4499 184.97L38.283 184L36.116 185.212L34.1898 184.485L33.2267 182.545L31.7821 182.061L33.2267 178.182L36.5975 173.333L41.1722 165.576L45.2654 160.727L46.71 158.788C46.71 158.788 48.6362 155.879 48.6362 155.152C48.6362 154.424 49.1178 146.182 49.1178 146.182L46.71 140.848L45.5061 136.485L67.6573 141.818H68.8612L87.8823 155.636L90.5308 159.03L91.4938 172.848L91.0123 176L89.5677 178.424L88.6046 179.879L87.8823 182.061L87.4007 183.515L83.7891 184.727L80.1775 184L78.0106 183.758L73.9174 184.242L72.232 185.939L71.5097 188.121L71.9912 190.303L72.7135 188.121L73.9174 186.667L75.1213 186.424V188.364L76.5659 189.333L79.696 187.879L81.1406 187.636L81.6221 189.818H86.1968L89.3269 188.848L91.9754 189.333L95.8278 189.818L97.0316 189.333L97.9947 188.364L99.6801 191.758V187.879L97.9947 183.515L95.587 182.061L96.0686 180.848L94.3831 177.455L94.6239 164.849L104.255 176.242L117.016 186.182C117.016 186.182 125.684 189.333 126.406 189.333C127.128 189.333 133.148 188.606 133.148 188.606L137 182.303L134.111 173.576L135.315 170.667L129.295 162.667L116.293 149.333L113.163 138.909L113.404 131.879L110.515 124.364L107.385 118.788L109.311 112.727L107.866 104L101.366 89.2121L103.773 88.7273L99.4394 81.9394L102.088 81.2121L97.5132 73.697L99.4394 72.7273L96.0686 66.9091L97.2724 66.1818L92.9385 62.5455L94.3831 61.8182L83.5483 54.0606L69.8243 44.3636Z"
+                android:fillColor="#000000" />
+        </group>
+
+
 </vector>
\ No newline at end of file
diff --git a/app/src/custom/res/drawable/state_disconnected.xml b/app/src/custom/res/drawable/state_disconnected.xml
index 3d3660b8..7c49a537 100644
--- a/app/src/custom/res/drawable/state_disconnected.xml
+++ b/app/src/custom/res/drawable/state_disconnected.xml
@@ -1,9 +1,17 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
-    android:viewportWidth="137"
-    android:viewportHeight="192"
-    android:width="137dp"
-    android:height="192dp">
-    <path
-        android:pathData="M69.8243 44.3636C69.8243 44.3636 66.935 38.7879 66.6942 38.0606C66.4534 37.3333 65.0088 29.3333 65.0088 29.3333L66.935 25.9394L71.2689 19.6364L77.2882 14.7879L78.7328 14.303L93.42 8.72727L94.8647 7.27273L93.42 4.84849L91.2531 3.63636L87.4007 2.66666L77.7698 1.69697H70.3058L65.2496 2.90909L60.6749 1.21212L54.8963 0.484846L46.4692 0.242421L42.1353 0L35.1529 2.66666L24.3181 15.2727L22.8735 20.1212L22.1511 24.4848L18.5395 32.4848L16.1318 40L14.9279 48V49.697L9.39016 58.1818L6.26011 64.4848V73.4545L7.2232 92.1212L8.90861 98.9091L12.2794 105.212L16.6134 109.333L18.5395 117.333L25.7627 133.576L34.4306 144L34.9121 144.485L38.0422 160.242L27.4482 179.636L24.0773 182.303L21.6696 184.242H17.3357L14.9279 185.455L12.0387 185.697L10.3533 187.394L6.74165 186.909L3.13006 186.667L0.481548 188.606L0 192L1.92619 189.818L5.05624 188.848L5.29701 192L10.3533 190.303L13.2425 190.061L18.2988 190.788C18.2988 190.788 22.6327 190.545 23.355 190.303C24.0773 190.303 28.8928 190.788 28.8928 190.788L32.2636 190.303L34.1898 191.03L36.5975 190.303L39.246 191.515L43.0984 191.03L43.58 188.364L43.3392 186.909L45.9877 187.879L48.1547 189.576L49.5993 191.515V189.091L47.9139 186.182C47.9139 186.182 46.71 184.485 45.9877 184.727C45.2654 184.727 42.3761 184.242 42.3761 184.242L40.4499 184.97L38.283 184L36.116 185.212L34.1898 184.485L33.2267 182.545L31.7821 182.061L33.2267 178.182L36.5975 173.333L41.1722 165.576L45.2654 160.727L46.71 158.788C46.71 158.788 48.6362 155.879 48.6362 155.152C48.6362 154.424 49.1178 146.182 49.1178 146.182L46.71 140.848L45.5061 136.485L67.6573 141.818H68.8612L87.8823 155.636L90.5308 159.03L91.4938 172.848L91.0123 176L89.5677 178.424L88.6046 179.879L87.8823 182.061L87.4007 183.515L83.7891 184.727L80.1775 184L78.0106 183.758L73.9174 184.242L72.232 185.939L71.5097 188.121L71.9912 190.303L72.7135 188.121L73.9174 186.667L75.1213 186.424V188.364L76.5659 189.333L79.696 187.879L81.1406 187.636L81.6221 189.818H86.1968L89.3269 188.848L91.9754 189.333L95.8278 189.818L97.0316 189.333L97.9947 188.364L99.6801 191.758V187.879L97.9947 183.515L95.587 182.061L96.0686 180.848L94.3831 177.455L94.6239 164.849L104.255 176.242L117.016 186.182C117.016 186.182 125.684 189.333 126.406 189.333C127.128 189.333 133.148 188.606 133.148 188.606L137 182.303L134.111 173.576L135.315 170.667L129.295 162.667L116.293 149.333L113.163 138.909L113.404 131.879L110.515 124.364L107.385 118.788L109.311 112.727L107.866 104L101.366 89.2121L103.773 88.7273L99.4394 81.9394L102.088 81.2121L97.5132 73.697L99.4394 72.7273L96.0686 66.9091L97.2724 66.1818L92.9385 62.5455L94.3831 61.8182L83.5483 54.0606L69.8243 44.3636Z"
-        android:fillColor="#000000" />
+    android:viewportWidth="166"
+    android:viewportHeight="220"
+    android:width="166dp"
+    android:height="220dp">
+    <group
+        android:scaleX="0.725"
+        android:scaleY="0.725"
+        android:translateX="36"
+        android:translateY="36"
+        >
+        <path
+            android:pathData="M69.8243 44.3636C69.8243 44.3636 66.935 38.7879 66.6942 38.0606C66.4534 37.3333 65.0088 29.3333 65.0088 29.3333L66.935 25.9394L71.2689 19.6364L77.2882 14.7879L78.7328 14.303L93.42 8.72727L94.8647 7.27273L93.42 4.84849L91.2531 3.63636L87.4007 2.66666L77.7698 1.69697H70.3058L65.2496 2.90909L60.6749 1.21212L54.8963 0.484846L46.4692 0.242421L42.1353 0L35.1529 2.66666L24.3181 15.2727L22.8735 20.1212L22.1511 24.4848L18.5395 32.4848L16.1318 40L14.9279 48V49.697L9.39016 58.1818L6.26011 64.4848V73.4545L7.2232 92.1212L8.90861 98.9091L12.2794 105.212L16.6134 109.333L18.5395 117.333L25.7627 133.576L34.4306 144L34.9121 144.485L38.0422 160.242L27.4482 179.636L24.0773 182.303L21.6696 184.242H17.3357L14.9279 185.455L12.0387 185.697L10.3533 187.394L6.74165 186.909L3.13006 186.667L0.481548 188.606L0 192L1.92619 189.818L5.05624 188.848L5.29701 192L10.3533 190.303L13.2425 190.061L18.2988 190.788C18.2988 190.788 22.6327 190.545 23.355 190.303C24.0773 190.303 28.8928 190.788 28.8928 190.788L32.2636 190.303L34.1898 191.03L36.5975 190.303L39.246 191.515L43.0984 191.03L43.58 188.364L43.3392 186.909L45.9877 187.879L48.1547 189.576L49.5993 191.515V189.091L47.9139 186.182C47.9139 186.182 46.71 184.485 45.9877 184.727C45.2654 184.727 42.3761 184.242 42.3761 184.242L40.4499 184.97L38.283 184L36.116 185.212L34.1898 184.485L33.2267 182.545L31.7821 182.061L33.2267 178.182L36.5975 173.333L41.1722 165.576L45.2654 160.727L46.71 158.788C46.71 158.788 48.6362 155.879 48.6362 155.152C48.6362 154.424 49.1178 146.182 49.1178 146.182L46.71 140.848L45.5061 136.485L67.6573 141.818H68.8612L87.8823 155.636L90.5308 159.03L91.4938 172.848L91.0123 176L89.5677 178.424L88.6046 179.879L87.8823 182.061L87.4007 183.515L83.7891 184.727L80.1775 184L78.0106 183.758L73.9174 184.242L72.232 185.939L71.5097 188.121L71.9912 190.303L72.7135 188.121L73.9174 186.667L75.1213 186.424V188.364L76.5659 189.333L79.696 187.879L81.1406 187.636L81.6221 189.818H86.1968L89.3269 188.848L91.9754 189.333L95.8278 189.818L97.0316 189.333L97.9947 188.364L99.6801 191.758V187.879L97.9947 183.515L95.587 182.061L96.0686 180.848L94.3831 177.455L94.6239 164.849L104.255 176.242L117.016 186.182C117.016 186.182 125.684 189.333 126.406 189.333C127.128 189.333 133.148 188.606 133.148 188.606L137 182.303L134.111 173.576L135.315 170.667L129.295 162.667L116.293 149.333L113.163 138.909L113.404 131.879L110.515 124.364L107.385 118.788L109.311 112.727L107.866 104L101.366 89.2121L103.773 88.7273L99.4394 81.9394L102.088 81.2121L97.5132 73.697L99.4394 72.7273L96.0686 66.9091L97.2724 66.1818L92.9385 62.5455L94.3831 61.8182L83.5483 54.0606L69.8243 44.3636Z"
+            android:fillColor="#000000" />
+    </group>
+
 </vector>
\ No newline at end of file
diff --git a/app/src/custom/res/drawable/state_transition_connected_disconnected.xml b/app/src/custom/res/drawable/state_transition_connected_disconnected.xml
new file mode 100644
index 00000000..0496e729
--- /dev/null
+++ b/app/src/custom/res/drawable/state_transition_connected_disconnected.xml
@@ -0,0 +1,89 @@
+<animated-vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector
+            android:name="vector"
+            android:width="166dp"
+            android:height="220dp"
+            android:viewportWidth="166"
+            android:viewportHeight="220">
+            <path
+                android:name="shield1"
+                android:pathData="M 75.792 211.927 C 37.761 190.779 9.334 157.386 2.892 126.295 C 1.07 117.505 0.999 115.374 1.001 69.975 L 1.002 26.608 L 4.764 24.185 C 20.662 13.945 37.479 7.098 54.611 3.642 C 89.587 -3.413 125.875 3.662 158.333 24.854 L 161 26.595 L 161 70.178 C 161 115.754 160.927 117.944 159.119 126.65 C 152.713 157.49 128.092 187.572 91.751 208.96 C 81.194 215.174 81.52 215.113 75.792 211.927 Z"
+                android:fillColor="#739B4C"/>
+            <path
+                android:name="shield2"
+                android:pathData="M 81.009 1.001 C 72.181 0.998 63.355 1.878 54.611 3.642 C 37.48 7.098 20.662 13.945 4.765 24.185 L 1.003 26.608 L 1 69.976 C 0.998 115.374 1.069 117.505 2.891 126.295 C 9.333 157.386 37.76 190.778 75.79 211.927 L 75.791 211.927 C 78.263 213.301 79.608 214.092 81.185 214.051 L 81.185 1.003 C 81.126 1.003 81.067 1 81.008 1 L 81.009 1.001 Z"
+                android:fillColor="#81A55D"/>
+            <group
+                android:name="ravenGroup"
+                android:scaleX="0.65"
+                android:scaleY="0.65"
+                android:translateX="42"
+                android:translateY="30"
+                >
+                <path
+                    android:pathData="M69.8243 44.3636C69.8243 44.3636 66.935 38.7879 66.6942 38.0606C66.4534 37.3333 65.0088 29.3333 65.0088 29.3333L66.935 25.9394L71.2689 19.6364L77.2882 14.7879L78.7328 14.303L93.42 8.72727L94.8647 7.27273L93.42 4.84849L91.2531 3.63636L87.4007 2.66666L77.7698 1.69697H70.3058L65.2496 2.90909L60.6749 1.21212L54.8963 0.484846L46.4692 0.242421L42.1353 0L35.1529 2.66666L24.3181 15.2727L22.8735 20.1212L22.1511 24.4848L18.5395 32.4848L16.1318 40L14.9279 48V49.697L9.39016 58.1818L6.26011 64.4848V73.4545L7.2232 92.1212L8.90861 98.9091L12.2794 105.212L16.6134 109.333L18.5395 117.333L25.7627 133.576L34.4306 144L34.9121 144.485L38.0422 160.242L27.4482 179.636L24.0773 182.303L21.6696 184.242H17.3357L14.9279 185.455L12.0387 185.697L10.3533 187.394L6.74165 186.909L3.13006 186.667L0.481548 188.606L0 192L1.92619 189.818L5.05624 188.848L5.29701 192L10.3533 190.303L13.2425 190.061L18.2988 190.788C18.2988 190.788 22.6327 190.545 23.355 190.303C24.0773 190.303 28.8928 190.788 28.8928 190.788L32.2636 190.303L34.1898 191.03L36.5975 190.303L39.246 191.515L43.0984 191.03L43.58 188.364L43.3392 186.909L45.9877 187.879L48.1547 189.576L49.5993 191.515V189.091L47.9139 186.182C47.9139 186.182 46.71 184.485 45.9877 184.727C45.2654 184.727 42.3761 184.242 42.3761 184.242L40.4499 184.97L38.283 184L36.116 185.212L34.1898 184.485L33.2267 182.545L31.7821 182.061L33.2267 178.182L36.5975 173.333L41.1722 165.576L45.2654 160.727L46.71 158.788C46.71 158.788 48.6362 155.879 48.6362 155.152C48.6362 154.424 49.1178 146.182 49.1178 146.182L46.71 140.848L45.5061 136.485L67.6573 141.818H68.8612L87.8823 155.636L90.5308 159.03L91.4938 172.848L91.0123 176L89.5677 178.424L88.6046 179.879L87.8823 182.061L87.4007 183.515L83.7891 184.727L80.1775 184L78.0106 183.758L73.9174 184.242L72.232 185.939L71.5097 188.121L71.9912 190.303L72.7135 188.121L73.9174 186.667L75.1213 186.424V188.364L76.5659 189.333L79.696 187.879L81.1406 187.636L81.6221 189.818H86.1968L89.3269 188.848L91.9754 189.333L95.8278 189.818L97.0316 189.333L97.9947 188.364L99.6801 191.758V187.879L97.9947 183.515L95.587 182.061L96.0686 180.848L94.3831 177.455L94.6239 164.849L104.255 176.242L117.016 186.182C117.016 186.182 125.684 189.333 126.406 189.333C127.128 189.333 133.148 188.606 133.148 188.606L137 182.303L134.111 173.576L135.315 170.667L129.295 162.667L116.293 149.333L113.163 138.909L113.404 131.879L110.515 124.364L107.385 118.788L109.311 112.727L107.866 104L101.366 89.2121L103.773 88.7273L99.4394 81.9394L102.088 81.2121L97.5132 73.697L99.4394 72.7273L96.0686 66.9091L97.2724 66.1818L92.9385 62.5455L94.3831 61.8182L83.5483 54.0606L69.8243 44.3636Z"
+                    android:fillColor="#000000" />
+            </group>
+
+        </vector>
+    </aapt:attr>
+    <target android:name="shield1">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="fillAlpha"
+                android:duration="300"
+                android:valueFrom="1"
+                android:valueTo="0"
+                android:valueType="floatType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+    <target android:name="shield2">
+        <aapt:attr name="android:animation">
+            <objectAnimator
+                android:propertyName="fillAlpha"
+                android:duration="300"
+                android:valueFrom="1"
+                android:valueTo="0"
+                android:valueType="floatType"
+                android:interpolator="@android:interpolator/fast_out_slow_in"/>
+        </aapt:attr>
+    </target>
+    <target android:name="ravenGroup">
+        <aapt:attr name="android:animation">
+            <set>
+                <objectAnimator
+                    android:propertyName="scaleX"
+                    android:duration="300"
+                    android:valueFrom="0.65"
+                    android:valueTo="0.725"
+                    android:valueType="floatType"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
+                <objectAnimator
+                    android:propertyName="scaleY"
+                    android:duration="300"
+                    android:valueFrom="0.65"
+                    android:valueTo="0.725"
+                    android:valueType="floatType"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
+                <objectAnimator
+                    android:propertyName="translateX"
+                    android:duration="300"
+                    android:valueFrom="42"
+                    android:valueTo="36"
+                    android:valueType="floatType"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
+                <objectAnimator
+                    android:propertyName="translateY"
+                    android:duration="300"
+                    android:valueFrom="30"
+                    android:valueTo="36"
+                    android:valueType="floatType"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
+            </set>
+        </aapt:attr>
+    </target>
+</animated-vector>
diff --git a/app/src/main/java/se/leap/bitmaskclient/base/fragments/EipFragment.java b/app/src/main/java/se/leap/bitmaskclient/base/fragments/EipFragment.java
index 81a9f9eb..470470ac 100644
--- a/app/src/main/java/se/leap/bitmaskclient/base/fragments/EipFragment.java
+++ b/app/src/main/java/se/leap/bitmaskclient/base/fragments/EipFragment.java
@@ -42,6 +42,8 @@ import android.content.Intent;
 import android.content.ServiceConnection;
 import android.content.SharedPreferences;
 import android.graphics.drawable.Animatable;
+import android.graphics.drawable.Animatable2;
+import android.graphics.drawable.Drawable;
 import android.os.Bundle;
 import android.os.IBinder;
 import android.text.Spannable;
@@ -59,9 +61,13 @@ import androidx.annotation.NonNull;
 import androidx.appcompat.app.AlertDialog;
 import androidx.appcompat.widget.AppCompatImageView;
 import androidx.appcompat.widget.AppCompatTextView;
+import androidx.core.content.ContextCompat;
 import androidx.fragment.app.DialogFragment;
 import androidx.fragment.app.Fragment;
 import androidx.fragment.app.FragmentTransaction;
+import androidx.vectordrawable.graphics.drawable.Animatable2Compat;
+import androidx.vectordrawable.graphics.drawable.Animatable2Compat.AnimationCallback;
+import androidx.vectordrawable.graphics.drawable.AnimatedVectorDrawableCompat;
 
 import java.util.Observable;
 import java.util.Observer;
@@ -111,6 +117,7 @@ public class EipFragment extends Fragment implements Observer {
     private ProviderObservable providerObservable;
     private TorStatusObservable torStatusObservable;
 
+    private @DrawableRes int pendingAnimationState;
     private GatewaysManager gatewaysManager;
 
     //---saved Instance -------
@@ -530,7 +537,7 @@ public class EipFragment extends Fragment implements Observer {
             mainButton.updateState(false, false, false);
             mainDescription.setText(R.string.eip_status_unsecured);
             background.setImageResource(R.drawable.bg_disconnected);
-            animateState(R.drawable.state_disconnected);
+            animateState(R.drawable.state_transition_connected_disconnected);
             setActivityBarColor(R.color.bg_disconnected_top, R.color.bg_disconnected_top_light_transparent);
         } else if (eipStatus.isBlocking()) {
             setMainButtonEnabled(true);
@@ -556,25 +563,45 @@ public class EipFragment extends Fragment implements Observer {
             mainDescription.setText(R.string.eip_status_unsecured);
             subDescription.setText(null);
             background.setImageResource(R.drawable.bg_disconnected);
+
             animateState(R.drawable.state_disconnected);
             setActivityBarColor(R.color.bg_disconnected_top, R.color.bg_disconnected_top_light_transparent);
         }
     }
 
     private void animateState(@DrawableRes int drawableRes) {
+        @DrawableRes int lastDrawableId;
         try {
-            int lastDrawableId = (int) stateView.getTag();
+            lastDrawableId = (int) stateView.getTag();
             if (lastDrawableId == drawableRes) {
                 return;
             }
+
+            Drawable lastDrawable = ContextCompat.getDrawable(getContext(), lastDrawableId);
+            if (lastDrawable instanceof  Animatable && ((Animatable) lastDrawable).isRunning()) {
+                pendingAnimationState = drawableRes;
+            }
+
         } catch (NullPointerException | ClassCastException e) {
             // eat me
         }
 
+
         stateView.setImageResource(drawableRes);
         stateView.setTag(drawableRes);
         if (stateView.getDrawable() instanceof Animatable) {
             Animatable animatedDrawable = (Animatable) stateView.getDrawable();
+            AnimatedVectorDrawableCompat.registerAnimationCallback(stateView.getDrawable(), new AnimationCallback() {
+                @Override
+                public void onAnimationEnd(Drawable drawable) {
+                    super.onAnimationEnd(drawable);
+                    if (pendingAnimationState != 0) {
+                        int newAnimationRes = pendingAnimationState;
+                        pendingAnimationState = 0;
+                        animateState(newAnimationRes);
+                    }
+                }
+            });
             animatedDrawable.start();
         }
     }
diff --git a/app/src/main/res/layout/v_main_btn.xml b/app/src/main/res/layout/v_main_btn.xml
deleted file mode 100644
index 3ab62e5a..00000000
--- a/app/src/main/res/layout/v_main_btn.xml
+++ /dev/null
@@ -1,55 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:id="@+id/vpn_btn_container"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    tools:viewBindingIgnore="true"
-    >
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/vpn_btn_glow"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:background="@drawable/main_btn_glow"
-        tools:visibility="visible"
-        android:visibility="gone"
-        app:backgroundTint="@color/colorMainBtnHighlight"
-        />
-
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/vpn_btn_shadow_dark"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:srcCompat="@drawable/main_btn_shadow"
-        android:visibility="visible"
-        />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/vpn_btn_shadow_light"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        tools:visibility="visible"
-        tools:tint="@color/colorMainBtnHighlight"
-        android:visibility="gone"
-        />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/vpn_btn_fill"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:srcCompat="@drawable/on_off_btn_start_2_no_shadow"
-        android:visibility="visible"
-        app:tint="@color/main_button_state_color"
-        />
-
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/vpn_btn_fill_overlay"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:srcCompat="@drawable/on_off_btn_fill"
-        tools:visibility="visible"
-        />
-</RelativeLayout>
\ No newline at end of file
diff --git a/app/src/normal/res/drawable/state_transition_connected_disconnected.png b/app/src/normal/res/drawable/state_transition_connected_disconnected.png
new file mode 100644
index 00000000..a4bd4a78
--- /dev/null
+++ b/app/src/normal/res/drawable/state_transition_connected_disconnected.png