Put button and icon below the vpn label

Some devices are too small to show everything in the same row, so I'm
centering everything and spliting the layout in two: the label and the
button&icon.

2 files changed, 67 insertions, 54 deletions

diff --git a/app/src/main/res/layout-xlarge/eip_service_fragment.xml b/app/src/main/res/layout-xlarge/eip_service_fragment.xml
index 9efc209c..a9f01fb8 100644
--- a/app/src/main/res/layout-xlarge/eip_service_fragment.xml
+++ b/app/src/main/res/layout-xlarge/eip_service_fragment.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<com.wefika.flowlayout.FlowLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="10dp"
@@ -13,38 +13,43 @@
         android:layout_marginLeft="10dp"
         android:layout_marginStart="10dp"
         android:layout_marginTop="12dp"
+        android:layout_marginBottom="12dp"
         android:text="@string/eip_service_label"
         android:textAppearance="?android:attr/textAppearanceLarge"
-        android:textSize="24dp"/>
+        android:textSize="24sp"/>
 
-    <Button
-        android:id="@+id/vpn.main.button"
+
+    <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginStart="24dp"
-        android:layout_marginLeft="24dp"
-        android:textSize="32sp"
-        />
+        android:orientation="horizontal"
+        android:layout_below="@+id/eipLabel"
+        android:layout_centerInParent="true">
 
-    <view
-        android:id="@+id/vpn.Status.Image"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
-        android:color="@android:color/holo_blue_dark"
-        class="mbanje.kurt.fabbutton.FabButton"
-        android:layout_gravity="center"
-        android:visibility="visible"
-        android:layout_centerInParent="true"
-        android:indeterminate="true"
-        android:max="100"
-        fbb_autoStart="true"
-        fbb_progressColor="#ff170aff"
-        fbb_progressWidthRatio="0.1"
-        android:layout_toRightOf="@id/eipLabel"
-        android:layout_toEndOf="@id/eipLabel"
-        android:layout_alignTop="@id/eipLabel"
-        android:layout_marginStart="24dp"
-        android:layout_marginLeft="24dp"
-        />
+        <Button
+            android:id="@+id/vpn.main.button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="24dp"
+            android:layout_marginLeft="24dp"
+            android:textSize="32sp"
+            />
 
-</com.wefika.flowlayout.FlowLayout>
+        <view
+            android:id="@+id/vpn.Status.Image"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:color="@android:color/holo_blue_dark"
+            class="mbanje.kurt.fabbutton.FabButton"
+            android:layout_gravity="center"
+            android:visibility="visible"
+            android:indeterminate="true"
+            android:max="100"
+            fbb_autoStart="true"
+            fbb_progressColor="#ff170aff"
+            fbb_progressWidthRatio="0.1"
+            android:layout_marginStart="24dp"
+            android:layout_marginLeft="24dp"
+            />
+    </LinearLayout>
+</RelativeLayout>
diff --git a/app/src/main/res/layout/eip_service_fragment.xml b/app/src/main/res/layout/eip_service_fragment.xml
index 9a396080..1360b8e0 100644
--- a/app/src/main/res/layout/eip_service_fragment.xml
+++ b/app/src/main/res/layout/eip_service_fragment.xml
@@ -1,43 +1,51 @@
 <?xml version="1.0" encoding="utf-8"?>
-<com.wefika.flowlayout.FlowLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="10dp"
-    android:orientation="horizontal">
+    android:layout_marginTop="10dp">
 
     <TextView
         android:id="@+id/eipLabel"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:layout_centerHorizontal="true"
         android:layout_marginLeft="10dp"
         android:layout_marginStart="10dp"
         android:layout_marginTop="12dp"
+        android:layout_marginBottom="12dp"
         android:text="@string/eip_service_label"
         android:textAppearance="?android:attr/textAppearanceMedium" />
 
-    <Button
-        android:id="@+id/vpn.main.button"
+    <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:textSize="12sp"
-        />
+        android:orientation="horizontal"
+        android:layout_below="@+id/eipLabel"
+        android:layout_centerInParent="true">
 
-    <view
-        android:id="@+id/vpn.Status.Image"
-        android:layout_width="32dp"
-        android:layout_height="32dp"
-        android:layout_marginLeft="3dp"
-        android:layout_marginStart="3dp"
-        android:color="@android:color/holo_blue_dark"
-        class="mbanje.kurt.fabbutton.FabButton"
-        android:layout_gravity="center"
-        android:visibility="visible"
-        android:layout_centerInParent="true"
-        android:indeterminate="true"
-        android:max="100"
-        fbb_autoStart="true"
-        fbb_progressColor="#ff170aff"
-        fbb_progressWidthRatio="0.1"
-        />
+        <Button
+            android:id="@+id/vpn.main.button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textSize="12sp"
+            />
 
-</com.wefika.flowlayout.FlowLayout>
+        <view
+            android:id="@+id/vpn.Status.Image"
+            android:layout_width="32dp"
+            android:layout_height="32dp"
+            android:layout_marginLeft="3dp"
+            android:layout_marginStart="3dp"
+            android:color="@android:color/holo_blue_dark"
+            class="mbanje.kurt.fabbutton.FabButton"
+            android:layout_gravity="center"
+            android:visibility="visible"
+            android:layout_centerInParent="true"
+            android:indeterminate="true"
+            android:max="100"
+            fbb_autoStart="true"
+            fbb_progressColor="#ff170aff"
+            fbb_progressWidthRatio="0.1"
+            />
+    </LinearLayout>
+</RelativeLayout>