ui: Use a proper CardView based layout

Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>

app/build.gradle

@@ -41,6 +41,7 @@ dependencies {
     annotationProcessor "com.google.dagger:dagger-compiler:$daggerVersion"
     implementation "com.android.databinding:library:$databindingVersion"
     implementation "com.android.support:appcompat-v7:$supportLibsVersion"
+    implementation "com.android.support:cardview-v7:$supportLibsVersion"
     implementation "com.android.support:design:$supportLibsVersion"
     implementation "com.android.support:preference-v14:$supportLibsVersion"
     implementation "com.android.support:support-annotations:$supportLibsVersion"

app/src/main/res/layout/tunnel_detail_fragment.xml

@@ -30,7 +30,7 @@
             android:layout_height="wrap_content"
             android:orientation="vertical">
 
-            <RelativeLayout
+            <android.support.v7.widget.CardView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginBottom="4dp"
@@ -38,8 +38,13 @@
                 android:layout_marginStart="8dp"
                 android:layout_marginTop="8dp"
                 android:background="?android:attr/colorBackground"
-                android:elevation="2dp"
+                app:cardCornerRadius="4dp"
-                android:padding="8dp">
+                app:cardElevation="2dp"
+                app:contentPadding="8dp">
+
+                <RelativeLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content">
 
                     <TextView
                         android:id="@+id/interface_title"
@@ -116,6 +121,7 @@
                         android:contentDescription="@string/addresses"
                         android:text="@{config.interfaceSection.addresses}" />
                 </RelativeLayout>
+            </android.support.v7.widget.CardView>
 
             <LinearLayout
                 android:layout_width="match_parent"

app/src/main/res/layout/tunnel_detail_peer.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android">
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
 
     <data>
 
@@ -10,7 +11,7 @@
             type="com.wireguard.config.Peer.Observable" />
     </data>
 
-    <RelativeLayout
+    <android.support.v7.widget.CardView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="4dp"
@@ -18,8 +19,13 @@
         android:layout_marginStart="8dp"
         android:layout_marginTop="4dp"
         android:background="?android:attr/colorBackground"
-        android:elevation="2dp"
+        app:cardCornerRadius="4dp"
-        android:padding="8dp">
+        app:cardElevation="2dp"
+        app:contentPadding="8dp">
+
+        <RelativeLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
 
             <TextView
                 android:id="@+id/peer_title"
@@ -84,4 +90,5 @@
                 android:layout_below="@+id/endpoint_label"
                 android:text="@{item.endpoint}" />
         </RelativeLayout>
+    </android.support.v7.widget.CardView>
 </layout>

app/src/main/res/layout/tunnel_editor_fragment.xml

@@ -33,7 +33,7 @@
                 android:layout_height="wrap_content"
                 android:orientation="vertical">
 
-                <RelativeLayout
+                <android.support.v7.widget.CardView
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginBottom="4dp"
@@ -41,8 +41,13 @@
                     android:layout_marginStart="8dp"
                     android:layout_marginTop="8dp"
                     android:background="?android:attr/colorBackground"
-                    android:elevation="2dp"
+                    app:cardCornerRadius="4dp"
-                    android:padding="8dp">
+                    app:cardElevation="2dp"
+                    app:contentPadding="8dp">
+
+                    <RelativeLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content">
 
                         <TextView
                             android:id="@+id/interface_title"
@@ -206,6 +211,7 @@
                             android:text="@={config.interfaceSection.mtu}"
                             android:textAlignment="center" />
                     </RelativeLayout>
+                </android.support.v7.widget.CardView>
 
                 <LinearLayout
                     android:layout_width="match_parent"

app/src/main/res/layout/tunnel_editor_peer.xml

@@ -15,16 +15,21 @@
             type="com.wireguard.config.Peer.Observable" />
     </data>
 
-    <RelativeLayout
+    <android.support.v7.widget.CardView
-        android:layout_width="match_parent"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginBottom="4dp"
         android:layout_marginEnd="8dp"
         android:layout_marginStart="8dp"
         android:layout_marginTop="4dp"
         android:background="?android:attr/colorBackground"
-        android:elevation="2dp"
+        app:cardCornerRadius="4dp"
-        android:padding="8dp">
+        app:cardElevation="2dp"
+        app:contentPadding="8dp">
+
+        <RelativeLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
 
             <TextView
                 android:id="@+id/peer_title"
@@ -139,4 +144,5 @@
                 android:text="@={item.persistentKeepalive}"
                 android:textAlignment="center" />
         </RelativeLayout>
+    </android.support.v7.widget.CardView>
 </layout>