update design and UX for provider setup

5 files changed, 601 insertions, 0 deletions

diff --git a/app/src/main/res/layout/activity_setup.xml b/app/src/main/res/layout/activity_setup.xml
new file mode 100644
index 00000000..fe302bb1
--- /dev/null
+++ b/app/src/main/res/layout/activity_setup.xml
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    android:weightSum="1"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <androidx.appcompat.widget.Toolbar
+        android:id="@+id/toolbar"
+        android:minHeight="?attr/actionBarSize"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="?attr/colorPrimary">
+    </androidx.appcompat.widget.Toolbar>
+
+    <androidx.viewpager2.widget.ViewPager2
+        android:id="@+id/viewPager"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_alignParentTop="true"
+        android:layout_below="@id/toolbar"
+        android:layout_alignParentBottom="true"
+        android:layout_weight="1"
+        />
+
+    <RelativeLayout
+        android:layout_width="match_parent"
+        android:layout_height="50dp"
+        android:layout_alignParentBottom="true"
+        android:padding="@dimen/stdpadding"
+        android:background="@color/colorPrimary_transparent"
+        >
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:id="@+id/indicatorContainer"
+            android:orientation="horizontal"
+            android:gravity="center"
+            android:layout_centerInParent="true"
+            >
+            <androidx.cardview.widget.CardView
+                android:layout_width="12dp"
+                android:layout_height="12dp"
+                app:cardCornerRadius="6dp"
+                app:cardElevation="0dp"
+                android:layout_margin="4dp"
+                >
+                <View
+                    android:id="@+id/indicator1"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:background="@color/colorPrimary"/>
+            </androidx.cardview.widget.CardView>
+            <androidx.cardview.widget.CardView
+                android:layout_width="12dp"
+                android:layout_height="12dp"
+                app:cardCornerRadius="6dp"
+                app:cardElevation="0dp"
+                android:layout_margin="4dp"
+                >
+                <View
+                    android:id="@+id/indicator2"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:background="@color/colorPrimary"/>
+            </androidx.cardview.widget.CardView>
+            <androidx.cardview.widget.CardView
+                android:layout_width="12dp"
+                android:layout_height="12dp"
+                app:cardCornerRadius="6dp"
+                app:cardElevation="0dp"
+                android:layout_margin="4dp"
+                >
+                <View
+                    android:id="@+id/indicator3"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:background="@color/colorPrimary"/>
+            </androidx.cardview.widget.CardView>
+            <androidx.cardview.widget.CardView
+                android:layout_width="12dp"
+                android:layout_height="12dp"
+                app:cardCornerRadius="6dp"
+                app:cardElevation="0dp"
+                android:layout_margin="4dp"
+                >
+                <View
+                    android:id="@+id/indicator4"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:background="@color/colorPrimary"/>
+            </androidx.cardview.widget.CardView>
+            <androidx.cardview.widget.CardView
+                android:layout_width="12dp"
+                android:layout_height="12dp"
+                app:cardCornerRadius="6dp"
+                app:cardElevation="0dp"
+                android:layout_margin="4dp"
+                >
+                <View
+                    android:id="@+id/indicator5"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:background="@color/colorPrimary"/>
+            </androidx.cardview.widget.CardView>
+
+        </LinearLayout>
+        <Button
+            android:id="@+id/setup_next_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_alignParentEnd="true"
+            android:layout_alignParentBottom="true"
+            android:text="@string/next"
+            />
+    </RelativeLayout>
+</androidx.appcompat.widget.LinearLayoutCompat>
diff --git a/app/src/main/res/layout/f_circumvention_setup.xml b/app/src/main/res/layout/f_circumvention_setup.xml
new file mode 100644
index 00000000..dd865081
--- /dev/null
+++ b/app/src/main/res/layout/f_circumvention_setup.xml
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:padding="@dimen/stdpadding"
+    android:layout_margin="@dimen/activity_margin"
+    tools:context=".providersetup.fragments.ProviderSelectionFragment">
+
+    <androidx.appcompat.widget.LinearLayoutCompat
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:layout_margin="@dimen/activity_margin"
+        >
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/tv_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.AppCompat.Title"
+            android:text="@string/title_circumvention_setup"
+            android:paddingBottom="@dimen/stdpadding"
+            />
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/tv_circumvention_description"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+            android:text="@string/circumvention_setup_description"/>
+
+        <androidx.cardview.widget.CardView
+            android:id="@+id/cv_provider_selection_container"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:cardCornerRadius="12dp"
+            app:cardElevation="1dp"
+            android:layout_margin="40dp"
+            >
+            <androidx.appcompat.widget.LinearLayoutCompat
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                android:background="@color/colorPrimary_transparent"
+                android:padding="@dimen/activity_horizontal_margin"
+                >
+                <RadioGroup
+                    android:id="@+id/circumvention_radioGroup"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    >
+                    <com.google.android.material.radiobutton.MaterialRadioButton
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:id="@+id/rb_plain_vpn"
+                        android:text="@string/use_standard_vpn"
+                        />
+                    <com.google.android.material.radiobutton.MaterialRadioButton
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:id="@+id/rb_circumvention"
+                        android:text="@string/use_circumvention_tech"
+                        />
+                </RadioGroup>
+                <androidx.appcompat.widget.AppCompatTextView
+                    android:paddingTop="@dimen/stdpadding"
+                    android:id="@+id/tv_circumvention_detail_description"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:text="@string/circumvention_setup_hint"/>
+            </androidx.appcompat.widget.LinearLayoutCompat>
+        </androidx.cardview.widget.CardView>
+    </androidx.appcompat.widget.LinearLayoutCompat>
+</ScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/f_configure_provider.xml b/app/src/main/res/layout/f_configure_provider.xml
new file mode 100644
index 00000000..6e272260
--- /dev/null
+++ b/app/src/main/res/layout/f_configure_provider.xml
@@ -0,0 +1,188 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+
+<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:padding="@dimen/stdpadding"
+    android:layout_margin="@dimen/activity_margin"
+    tools:context=".providersetup.fragments.ProviderSelectionFragment">
+
+    <androidx.appcompat.widget.LinearLayoutCompat
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:layout_margin="@dimen/activity_margin"
+        >
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/tv_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.AppCompat.Title"
+            android:text="@string/configuring_provider"
+            android:paddingBottom="@dimen/stdpadding"
+            />
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/tv_circumvention_description"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+            android:text="@string/description_configure_provider"/>
+
+        <se.leap.bitmaskclient.base.views.ProgressSpinner
+            android:id="@+id/progress_spinner"
+            android:layout_width="100dp"
+            android:layout_height="100dp" />
+
+        <androidx.cardview.widget.CardView
+            android:id="@+id/detail_container"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:cardCornerRadius="12dp"
+            app:cardElevation="1dp"
+            >
+            <androidx.appcompat.widget.LinearLayoutCompat
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                android:background="@color/colorPrimary_transparent"
+                >
+                <androidx.appcompat.widget.LinearLayoutCompat
+                    android:id="@+id/detail_header_container"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:gravity="center"
+                    android:orientation="horizontal"
+                    android:padding="@dimen/stdpadding"
+                    android:clickable="true"
+                    android:focusable="true">
+                    <androidx.appcompat.widget.AppCompatImageView
+                        android:id="@+id/iv_expand"
+                        android:layout_width="18dp"
+                        android:layout_height="18dp"
+                        android:src="@drawable/ic_arrow_forward"/>
+                    <androidx.appcompat.widget.AppCompatTextView
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:text="@string/details"
+                        android:textStyle="bold"
+                        android:paddingHorizontal="@dimen/stdpadding"/>
+                </androidx.appcompat.widget.LinearLayoutCompat>
+
+                <androidx.appcompat.widget.LinearLayoutCompat
+                        android:id="@+id/expandable_detail_container"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:orientation="vertical"
+                        android:visibility="gone"
+                        tools:visibility="visible"
+                        >
+                    <RelativeLayout
+                        android:id="@+id/connection_detail_container"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:visibility="visible"
+                        >
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/tv_tor_status"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:text="@string/tor_status"
+                            android:textStyle="bold"
+                            android:paddingHorizontal="@dimen/stdpadding"/>
+
+                        <androidx.appcompat.widget.AppCompatImageView
+                            android:id="@+id/tor_icon"
+                            android:layout_width="35dp"
+                            android:layout_height="35dp"
+                            android:layout_below="@id/tv_tor_status"
+                            android:layout_alignParentStart="true"
+                            android:padding="4dp"
+                            android:src="@drawable/ic_tor" />
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/tor_state"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:fadingEdge="horizontal"
+                            android:maxLines="2"
+                            android:text="@string/configuring_provider"
+                            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
+                            android:layout_alignBottom="@id/tor_icon"
+                            android:layout_toEndOf="@id/tor_icon"
+                            android:layout_alignParentEnd="true"
+                            android:gravity="bottom"
+                            tools:text="test 12321 123 \n sdf,sdf,m\nn 123 "
+                            android:ellipsize="end"
+
+                            tools:visibility="visible"
+                            />
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/tv_snowflake_status"
+                            android:layout_below="@id/tor_state"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:text="@string/snowflake_status"
+                            android:textStyle="bold"
+                            android:paddingTop="@dimen/stdpadding"
+                            android:paddingHorizontal="@dimen/stdpadding"/>
+
+                        <androidx.appcompat.widget.AppCompatImageView
+                            android:id="@+id/snowflake_icon"
+                            android:layout_width="35dp"
+                            android:layout_height="35dp"
+                            android:src="@drawable/ic_snowflake"
+                            android:layout_below="@id/tv_snowflake_status"
+                            android:layout_alignParentStart="true"
+                            android:layout_marginBottom="@dimen/stdpadding"
+                            android:padding="4dp"
+                            />
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/snowflake_state"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_below="@id/tor_state"
+                            android:fadingEdge="horizontal"
+                            android:maxLines="2"
+                            android:text="@string/configuring_provider"
+                            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
+                            android:layout_alignTop="@id/snowflake_icon"
+                            android:layout_alignBottom="@+id/snowflake_icon"
+                            android:layout_toEndOf="@+id/snowflake_icon"
+                            android:layout_alignParentEnd="true"
+                            android:paddingBottom="1dp"
+                            android:gravity="bottom"
+                            tools:text="test \n another \n and a third \n blkud"
+                            android:ellipsize="end"
+                            tools:visibility="visible"
+                            />
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/tv_logs"
+                            android:layout_below="@id/snowflake_state"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:text="@string/log_fragment_title"
+                            android:textStyle="bold"
+                            android:paddingTop="@dimen/stdpadding"
+                            android:paddingHorizontal="@dimen/stdpadding"/>
+                        <androidx.recyclerview.widget.RecyclerView
+                            android:id="@+id/connection_detail_logs"
+                            android:layout_below="@+id/tv_logs"
+                            android:layout_width="match_parent"
+                            android:layout_height="match_parent"
+                            tools:listitem="@layout/v_log_item"
+                            android:isScrollContainer="false"
+                            />
+
+                    </RelativeLayout>
+                </androidx.appcompat.widget.LinearLayoutCompat>
+            </androidx.appcompat.widget.LinearLayoutCompat>
+        </androidx.cardview.widget.CardView>
+
+
+    </androidx.appcompat.widget.LinearLayoutCompat>
+</androidx.core.widget.NestedScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/f_provider_selection.xml b/app/src/main/res/layout/f_provider_selection.xml
new file mode 100644
index 00000000..520e011a
--- /dev/null
+++ b/app/src/main/res/layout/f_provider_selection.xml
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:padding="@dimen/stdpadding"
+    android:layout_margin="@dimen/activity_margin"
+    tools:context=".providersetup.fragments.ProviderSelectionFragment">
+
+    <androidx.appcompat.widget.LinearLayoutCompat
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:layout_margin="@dimen/activity_margin"
+        >
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/tv_welcome"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.AppCompat.Title"
+            android:text="@string/welcome"
+            android:layout_alignParentTop="true"
+            />
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/tv_choose_provider"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.AppCompat.Title"
+            android:text="@string/select_provider"
+            android:paddingBottom="@dimen/stdpadding"
+            />
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/tv_provider_description"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+            android:text="@string/select_provider_description"/>
+
+        <androidx.cardview.widget.CardView
+            android:id="@+id/cv_provider_selection_container"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:cardCornerRadius="12dp"
+            app:cardElevation="1dp"
+            android:layout_margin="40dp"
+            >
+            <androidx.appcompat.widget.LinearLayoutCompat
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                android:background="@color/colorPrimary_transparent"
+                android:padding="@dimen/activity_horizontal_margin"
+                >
+                <RadioGroup
+                    android:id="@+id/provider_radioGroup"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    >
+                </RadioGroup>
+                <androidx.appcompat.widget.LinearLayoutCompat
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    android:id="@+id/expandable_detail_container">
+                    <androidx.appcompat.widget.AppCompatTextView
+                        android:paddingTop="@dimen/stdpadding"
+                        android:id="@+id/provider_description"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        tools:text="@string/provider_description_riseup"/>
+                    <androidx.appcompat.widget.AppCompatEditText
+                        android:id="@+id/edit_customProvider"
+                        android:layout_marginVertical="@dimen/stdpadding"
+                        android:paddingHorizontal="@dimen/stdpadding"
+                        android:paddingVertical="@dimen/compact_padding"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:background="@color/white"
+                        android:hint="https://example.org"
+                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+                        android:textColorHint="@color/black800_transparent"
+                        />
+                </androidx.appcompat.widget.LinearLayoutCompat>
+            </androidx.appcompat.widget.LinearLayoutCompat>
+        </androidx.cardview.widget.CardView>
+    </androidx.appcompat.widget.LinearLayoutCompat>
+
+</ScrollView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/v_progress_spinner.xml b/app/src/main/res/layout/v_progress_spinner.xml
new file mode 100644
index 00000000..ad106fb2
--- /dev/null
+++ b/app/src/main/res/layout/v_progress_spinner.xml
@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/vpn_btn_guideline_left"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.125" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/vpn_btn_guideline_right"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.875" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/vpn_btn_guideline_top"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.125" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/vpn_btn_guideline_bottom"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.875" />
+
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/icn_guideline_left"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.3" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/icn_guideline_right"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.7" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/icn_guideline_top"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.3" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/icn_guideline_bottom"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.7" />
+
+   <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/border_guideline_left"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.025" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/border_guideline_right"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.975" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/border_guideline_top"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.025" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/border_guideline_bottom"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.975" />
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/spinner_view"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@+id/vpn_btn_guideline_bottom"
+        app:layout_constraintEnd_toStartOf="@+id/vpn_btn_guideline_right"
+        app:layout_constraintStart_toStartOf="@+id/vpn_btn_guideline_left"
+        app:layout_constraintTop_toTopOf="@+id/vpn_btn_guideline_top"
+        app:layout_constraintDimensionRatio="1:1"
+        app:srcCompat="@drawable/progress_spinner"
+        />
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/tv_progress"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toTopOf="@+id/icn_guideline_bottom"
+        app:layout_constraintEnd_toStartOf="@+id/icn_guideline_right"
+        app:layout_constraintStart_toStartOf="@+id/icn_guideline_left"
+        app:layout_constraintTop_toTopOf="@+id/icn_guideline_top"
+        tools:text="100%"
+        android:maxLines="1"
+        android:gravity="center"
+        android:textStyle="bold"
+        app:autoSizeTextType="uniform"
+        app:autoSizeMinTextSize="12sp"
+        app:autoSizeMaxTextSize="100sp"
+        app:autoSizeStepGranularity="2sp" />
+        />
+
+
+
+
+
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file