ui: Use a proper CardView based layout

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

4 files changed, 442 insertions, 417 deletions

diff --git a/app/src/main/res/layout/tunnel_detail_fragment.xml b/app/src/main/res/layout/tunnel_detail_fragment.xml
index 971d8784..3fa3c757 100644
--- a/app/src/main/res/layout/tunnel_detail_fragment.xml
+++ b/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,84 +38,90 @@
                 android:layout_marginStart="8dp"
                 android:layout_marginTop="8dp"
                 android:background="?android:attr/colorBackground"
-                android:elevation="2dp"
-                android:padding="8dp">
-
-                <TextView
-                    android:id="@+id/interface_title"
-                    style="?android:attr/textAppearanceMedium"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_alignParentStart="true"
-                    android:layout_alignParentTop="true"
-                    android:layout_toStartOf="@+id/tunnel_switch"
-                    android:text="@string/interface_title" />
-
-                <com.wireguard.android.widget.ToggleSwitch
-                    android:id="@+id/tunnel_switch"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_alignBaseline="@+id/interface_title"
-                    android:layout_alignParentEnd="true"
-                    app:checked="@{tunnel.state == State.UP}"
-                    app:onBeforeCheckedChanged="@{TunnelController::setTunnelState}" />
-
-                <TextView
-                    android:id="@+id/interface_name_label"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@+id/interface_title"
-                    android:layout_marginTop="8dp"
-                    android:labelFor="@+id/interface_name_text"
-                    android:text="@string/name" />
-
-                <TextView
-                    android:id="@+id/interface_name_text"
-                    style="?android:attr/textAppearanceMedium"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@+id/interface_name_label"
-                    android:text="@{tunnel.name}" />
+                app:cardCornerRadius="4dp"
+                app:cardElevation="2dp"
+                app:contentPadding="8dp">
 
-                <TextView
-                    android:id="@+id/public_key_label"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@id/interface_name_text"
-                    android:layout_marginTop="8dp"
-                    android:labelFor="@+id/public_key_text"
-                    android:text="@string/public_key" />
-
-                <TextView
-                    android:id="@+id/public_key_text"
-                    style="?android:attr/textAppearanceMedium"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@+id/public_key_label"
-                    android:contentDescription="@string/public_key_description"
-                    android:ellipsize="end"
-                    android:maxLines="1"
-                    android:onClick="@{ClipboardUtils::copyTextView}"
-                    android:text="@{config.interfaceSection.publicKey}" />
-
-                <TextView
-                    android:id="@+id/addresses_label"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@id/public_key_text"
-                    android:layout_marginTop="8dp"
-                    android:labelFor="@+id/addresses_text"
-                    android:text="@string/addresses" />
-
-                <TextView
-                    android:id="@+id/addresses_text"
-                    style="?android:attr/textAppearanceMedium"
+                <RelativeLayout
                     android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@+id/addresses_label"
-                    android:contentDescription="@string/addresses"
-                    android:text="@{config.interfaceSection.addresses}" />
-            </RelativeLayout>
+                    android:layout_height="wrap_content">
+
+                    <TextView
+                        android:id="@+id/interface_title"
+                        style="?android:attr/textAppearanceMedium"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_alignParentStart="true"
+                        android:layout_alignParentTop="true"
+                        android:layout_toStartOf="@+id/tunnel_switch"
+                        android:text="@string/interface_title" />
+
+                    <com.wireguard.android.widget.ToggleSwitch
+                        android:id="@+id/tunnel_switch"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_alignBaseline="@+id/interface_title"
+                        android:layout_alignParentEnd="true"
+                        app:checked="@{tunnel.state == State.UP}"
+                        app:onBeforeCheckedChanged="@{TunnelController::setTunnelState}" />
+
+                    <TextView
+                        android:id="@+id/interface_name_label"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_below="@+id/interface_title"
+                        android:layout_marginTop="8dp"
+                        android:labelFor="@+id/interface_name_text"
+                        android:text="@string/name" />
+
+                    <TextView
+                        android:id="@+id/interface_name_text"
+                        style="?android:attr/textAppearanceMedium"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_below="@+id/interface_name_label"
+                        android:text="@{tunnel.name}" />
+
+                    <TextView
+                        android:id="@+id/public_key_label"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_below="@id/interface_name_text"
+                        android:layout_marginTop="8dp"
+                        android:labelFor="@+id/public_key_text"
+                        android:text="@string/public_key" />
+
+                    <TextView
+                        android:id="@+id/public_key_text"
+                        style="?android:attr/textAppearanceMedium"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_below="@+id/public_key_label"
+                        android:contentDescription="@string/public_key_description"
+                        android:ellipsize="end"
+                        android:maxLines="1"
+                        android:onClick="@{ClipboardUtils::copyTextView}"
+                        android:text="@{config.interfaceSection.publicKey}" />
+
+                    <TextView
+                        android:id="@+id/addresses_label"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_below="@id/public_key_text"
+                        android:layout_marginTop="8dp"
+                        android:labelFor="@+id/addresses_text"
+                        android:text="@string/addresses" />
+
+                    <TextView
+                        android:id="@+id/addresses_text"
+                        style="?android:attr/textAppearanceMedium"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_below="@+id/addresses_label"
+                        android:contentDescription="@string/addresses"
+                        android:text="@{config.interfaceSection.addresses}" />
+                </RelativeLayout>
+            </android.support.v7.widget.CardView>
 
             <LinearLayout
                 android:layout_width="match_parent"
diff --git a/app/src/main/res/layout/tunnel_detail_peer.xml b/app/src/main/res/layout/tunnel_detail_peer.xml
index d2240e31..91be0011 100644
--- a/app/src/main/res/layout/tunnel_detail_peer.xml
+++ b/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,70 +19,76 @@
         android:layout_marginStart="8dp"
         android:layout_marginTop="4dp"
         android:background="?android:attr/colorBackground"
-        android:elevation="2dp"
-        android:padding="8dp">
+        app:cardCornerRadius="4dp"
+        app:cardElevation="2dp"
+        app:contentPadding="8dp">
 
-        <TextView
-            android:id="@+id/peer_title"
-            style="?android:attr/textAppearanceMedium"
+        <RelativeLayout
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_alignParentTop="true"
-            android:text="@string/peer" />
+            android:layout_height="wrap_content">
 
-        <TextView
-            android:id="@+id/public_key_label"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@id/peer_title"
-            android:layout_marginTop="8dp"
-            android:labelFor="@+id/public_key_text"
-            android:text="@string/public_key" />
+            <TextView
+                android:id="@+id/peer_title"
+                style="?android:attr/textAppearanceMedium"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_alignParentTop="true"
+                android:text="@string/peer" />
 
-        <TextView
-            android:id="@+id/public_key_text"
-            style="?android:attr/textAppearanceMedium"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/public_key_label"
-            android:contentDescription="@string/public_key_description"
-            android:ellipsize="end"
-            android:maxLines="1"
-            android:onClick="@{ClipboardUtils::copyTextView}"
-            android:text="@{item.publicKey}" />
+            <TextView
+                android:id="@+id/public_key_label"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@id/peer_title"
+                android:layout_marginTop="8dp"
+                android:labelFor="@+id/public_key_text"
+                android:text="@string/public_key" />
 
-        <TextView
-            android:id="@+id/allowed_ips_label"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/public_key_text"
-            android:layout_marginTop="8dp"
-            android:labelFor="@+id/allowed_ips_text"
-            android:text="@string/allowed_ips" />
+            <TextView
+                android:id="@+id/public_key_text"
+                style="?android:attr/textAppearanceMedium"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/public_key_label"
+                android:contentDescription="@string/public_key_description"
+                android:ellipsize="end"
+                android:maxLines="1"
+                android:onClick="@{ClipboardUtils::copyTextView}"
+                android:text="@{item.publicKey}" />
 
-        <TextView
-            android:id="@+id/allowed_ips_text"
-            style="?android:attr/textAppearanceMedium"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/allowed_ips_label"
-            android:text="@{item.allowedIPs}" />
+            <TextView
+                android:id="@+id/allowed_ips_label"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/public_key_text"
+                android:layout_marginTop="8dp"
+                android:labelFor="@+id/allowed_ips_text"
+                android:text="@string/allowed_ips" />
 
-        <TextView
-            android:id="@+id/endpoint_label"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/allowed_ips_text"
-            android:layout_marginTop="8dp"
-            android:labelFor="@+id/endpoint_text"
-            android:text="@string/endpoint" />
+            <TextView
+                android:id="@+id/allowed_ips_text"
+                style="?android:attr/textAppearanceMedium"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/allowed_ips_label"
+                android:text="@{item.allowedIPs}" />
 
-        <TextView
-            android:id="@+id/endpoint_text"
-            style="?android:attr/textAppearanceMedium"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/endpoint_label"
-            android:text="@{item.endpoint}" />
-    </RelativeLayout>
+            <TextView
+                android:id="@+id/endpoint_label"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/allowed_ips_text"
+                android:layout_marginTop="8dp"
+                android:labelFor="@+id/endpoint_text"
+                android:text="@string/endpoint" />
+
+            <TextView
+                android:id="@+id/endpoint_text"
+                style="?android:attr/textAppearanceMedium"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/endpoint_label"
+                android:text="@{item.endpoint}" />
+        </RelativeLayout>
+    </android.support.v7.widget.CardView>
 </layout>
diff --git a/app/src/main/res/layout/tunnel_editor_fragment.xml b/app/src/main/res/layout/tunnel_editor_fragment.xml
index 70f376af..04283d88 100644
--- a/app/src/main/res/layout/tunnel_editor_fragment.xml
+++ b/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,171 +41,177 @@
                     android:layout_marginStart="8dp"
                     android:layout_marginTop="8dp"
                     android:background="?android:attr/colorBackground"
-                    android:elevation="2dp"
-                    android:padding="8dp">
+                    app:cardCornerRadius="4dp"
+                    app:cardElevation="2dp"
+                    app:contentPadding="8dp">
 
-                    <TextView
-                        android:id="@+id/interface_title"
-                        style="?android:attr/textAppearanceMedium"
+                    <RelativeLayout
                         android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_alignParentTop="true"
-                        android:text="@string/interface_title" />
-
-                    <TextView
-                        android:id="@+id/interface_name_label"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_below="@+id/interface_title"
-                        android:layout_marginTop="8dp"
-                        android:labelFor="@+id/interface_name_text"
-                        android:text="@string/name" />
-
-                    <EditText
-                        android:id="@+id/interface_name_text"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_below="@+id/interface_name_label"
-                        android:inputType="textNoSuggestions|textVisiblePassword"
-                        android:text="@={config.name}"
-                        app:filter="@{NameInputFilter.newInstance()}" />
-
-                    <TextView
-                        android:id="@+id/private_key_label"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_below="@+id/interface_name_text"
-                        android:labelFor="@+id/private_key_text"
-                        android:text="@string/private_key" />
-
-                    <EditText
-                        android:id="@+id/private_key_text"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignParentStart="true"
-                        android:layout_below="@+id/private_key_label"
-                        android:layout_toStartOf="@+id/generate_private_key_button"
-                        android:contentDescription="@string/public_key_description"
-                        android:inputType="textNoSuggestions|textVisiblePassword"
-                        android:text="@={config.interfaceSection.privateKey}"
-                        app:filter="@{KeyInputFilter.newInstance()}" />
-
-                    <Button
-                        android:id="@+id/generate_private_key_button"
-                        android:layout_width="96dp"
-                        android:layout_height="wrap_content"
-                        android:layout_alignBottom="@id/private_key_text"
-                        android:layout_alignParentEnd="true"
-                        android:layout_below="@+id/private_key_label"
-                        android:onClick="@{() -> config.interfaceSection.generateKeypair()}"
-                        android:text="@string/generate" />
-
-                    <TextView
-                        android:id="@+id/public_key_label"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_below="@+id/private_key_text"
-                        android:labelFor="@+id/public_key_text"
-                        android:text="@string/public_key" />
-
-                    <TextView
-                        android:id="@+id/public_key_text"
-                        style="?android:attr/editTextStyle"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_below="@+id/public_key_label"
-                        android:contentDescription="@string/public_key_description"
-                        android:ellipsize="end"
-                        android:focusable="false"
-                        android:hint="@string/hint_generated"
-                        android:maxLines="1"
-                        android:onClick="@{ClipboardUtils::copyTextView}"
-                        android:text="@{config.interfaceSection.publicKey}" />
-
-                    <TextView
-                        android:id="@+id/addresses_label"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignParentStart="true"
-                        android:layout_below="@+id/public_key_text"
-                        android:layout_toStartOf="@+id/listen_port_label"
-                        android:labelFor="@+id/addresses_text"
-                        android:text="@string/addresses" />
-
-                    <EditText
-                        android:id="@+id/addresses_text"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignParentStart="true"
-                        android:layout_below="@+id/addresses_label"
-                        android:layout_toStartOf="@+id/listen_port_text"
-                        android:inputType="textNoSuggestions|textVisiblePassword"
-                        android:text="@={config.interfaceSection.addresses}" />
-
-                    <TextView
-                        android:id="@+id/listen_port_label"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignBaseline="@+id/addresses_label"
-                        android:layout_alignParentEnd="true"
-                        android:layout_alignStart="@+id/generate_private_key_button"
-                        android:labelFor="@+id/listen_port_text"
-                        android:text="@string/listen_port" />
-
-                    <EditText
-                        android:id="@+id/listen_port_text"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignBaseline="@+id/addresses_text"
-                        android:layout_alignParentEnd="true"
-                        android:layout_alignStart="@+id/generate_private_key_button"
-                        android:hint="@string/hint_random"
-                        android:inputType="number"
-                        android:text="@={config.interfaceSection.listenPort}"
-                        android:textAlignment="center" />
-
-                    <TextView
-                        android:id="@+id/dns_servers_label"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignParentStart="true"
-                        android:layout_below="@+id/addresses_text"
-                        android:layout_toStartOf="@+id/mtu_label"
-                        android:labelFor="@+id/dns_servers_text"
-                        android:text="@string/dns_servers" />
-
-                    <EditText
-                        android:id="@+id/dns_servers_text"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignParentStart="true"
-                        android:layout_below="@+id/dns_servers_label"
-                        android:layout_toStartOf="@+id/mtu_text"
-                        android:inputType="textNoSuggestions|textVisiblePassword"
-                        android:text="@={config.interfaceSection.dnses}" />
-
-                    <TextView
-                        android:id="@+id/mtu_label"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignBaseline="@+id/dns_servers_label"
-                        android:layout_alignParentEnd="true"
-                        android:layout_alignStart="@+id/generate_private_key_button"
-                        android:labelFor="@+id/mtu_text"
-                        android:text="@string/mtu" />
-
-                    <EditText
-                        android:id="@+id/mtu_text"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignBaseline="@+id/dns_servers_text"
-                        android:layout_alignParentEnd="true"
-                        android:layout_alignStart="@+id/generate_private_key_button"
-                        android:hint="@string/hint_automatic"
-                        android:inputType="number"
-                        android:text="@={config.interfaceSection.mtu}"
-                        android:textAlignment="center" />
-                </RelativeLayout>
+                        android:layout_height="wrap_content">
+
+                        <TextView
+                            android:id="@+id/interface_title"
+                            style="?android:attr/textAppearanceMedium"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_alignParentTop="true"
+                            android:text="@string/interface_title" />
+
+                        <TextView
+                            android:id="@+id/interface_name_label"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_below="@+id/interface_title"
+                            android:layout_marginTop="8dp"
+                            android:labelFor="@+id/interface_name_text"
+                            android:text="@string/name" />
+
+                        <EditText
+                            android:id="@+id/interface_name_text"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_below="@+id/interface_name_label"
+                            android:inputType="textNoSuggestions|textVisiblePassword"
+                            android:text="@={config.name}"
+                            app:filter="@{NameInputFilter.newInstance()}" />
+
+                        <TextView
+                            android:id="@+id/private_key_label"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_below="@+id/interface_name_text"
+                            android:labelFor="@+id/private_key_text"
+                            android:text="@string/private_key" />
+
+                        <EditText
+                            android:id="@+id/private_key_text"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignParentStart="true"
+                            android:layout_below="@+id/private_key_label"
+                            android:layout_toStartOf="@+id/generate_private_key_button"
+                            android:contentDescription="@string/public_key_description"
+                            android:inputType="textNoSuggestions|textVisiblePassword"
+                            android:text="@={config.interfaceSection.privateKey}"
+                            app:filter="@{KeyInputFilter.newInstance()}" />
+
+                        <Button
+                            android:id="@+id/generate_private_key_button"
+                            android:layout_width="96dp"
+                            android:layout_height="wrap_content"
+                            android:layout_alignBottom="@id/private_key_text"
+                            android:layout_alignParentEnd="true"
+                            android:layout_below="@+id/private_key_label"
+                            android:onClick="@{() -> config.interfaceSection.generateKeypair()}"
+                            android:text="@string/generate" />
+
+                        <TextView
+                            android:id="@+id/public_key_label"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_below="@+id/private_key_text"
+                            android:labelFor="@+id/public_key_text"
+                            android:text="@string/public_key" />
+
+                        <TextView
+                            android:id="@+id/public_key_text"
+                            style="?android:attr/editTextStyle"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_below="@+id/public_key_label"
+                            android:contentDescription="@string/public_key_description"
+                            android:ellipsize="end"
+                            android:focusable="false"
+                            android:hint="@string/hint_generated"
+                            android:maxLines="1"
+                            android:onClick="@{ClipboardUtils::copyTextView}"
+                            android:text="@{config.interfaceSection.publicKey}" />
+
+                        <TextView
+                            android:id="@+id/addresses_label"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignParentStart="true"
+                            android:layout_below="@+id/public_key_text"
+                            android:layout_toStartOf="@+id/listen_port_label"
+                            android:labelFor="@+id/addresses_text"
+                            android:text="@string/addresses" />
+
+                        <EditText
+                            android:id="@+id/addresses_text"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignParentStart="true"
+                            android:layout_below="@+id/addresses_label"
+                            android:layout_toStartOf="@+id/listen_port_text"
+                            android:inputType="textNoSuggestions|textVisiblePassword"
+                            android:text="@={config.interfaceSection.addresses}" />
+
+                        <TextView
+                            android:id="@+id/listen_port_label"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignBaseline="@+id/addresses_label"
+                            android:layout_alignParentEnd="true"
+                            android:layout_alignStart="@+id/generate_private_key_button"
+                            android:labelFor="@+id/listen_port_text"
+                            android:text="@string/listen_port" />
+
+                        <EditText
+                            android:id="@+id/listen_port_text"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignBaseline="@+id/addresses_text"
+                            android:layout_alignParentEnd="true"
+                            android:layout_alignStart="@+id/generate_private_key_button"
+                            android:hint="@string/hint_random"
+                            android:inputType="number"
+                            android:text="@={config.interfaceSection.listenPort}"
+                            android:textAlignment="center" />
+
+                        <TextView
+                            android:id="@+id/dns_servers_label"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignParentStart="true"
+                            android:layout_below="@+id/addresses_text"
+                            android:layout_toStartOf="@+id/mtu_label"
+                            android:labelFor="@+id/dns_servers_text"
+                            android:text="@string/dns_servers" />
+
+                        <EditText
+                            android:id="@+id/dns_servers_text"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignParentStart="true"
+                            android:layout_below="@+id/dns_servers_label"
+                            android:layout_toStartOf="@+id/mtu_text"
+                            android:inputType="textNoSuggestions|textVisiblePassword"
+                            android:text="@={config.interfaceSection.dnses}" />
+
+                        <TextView
+                            android:id="@+id/mtu_label"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignBaseline="@+id/dns_servers_label"
+                            android:layout_alignParentEnd="true"
+                            android:layout_alignStart="@+id/generate_private_key_button"
+                            android:labelFor="@+id/mtu_text"
+                            android:text="@string/mtu" />
+
+                        <EditText
+                            android:id="@+id/mtu_text"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignBaseline="@+id/dns_servers_text"
+                            android:layout_alignParentEnd="true"
+                            android:layout_alignStart="@+id/generate_private_key_button"
+                            android:hint="@string/hint_automatic"
+                            android:inputType="number"
+                            android:text="@={config.interfaceSection.mtu}"
+                            android:textAlignment="center" />
+                    </RelativeLayout>
+                </android.support.v7.widget.CardView>
 
                 <LinearLayout
                     android:layout_width="match_parent"
diff --git a/app/src/main/res/layout/tunnel_editor_peer.xml b/app/src/main/res/layout/tunnel_editor_peer.xml
index b6caab8a..40e16136 100644
--- a/app/src/main/res/layout/tunnel_editor_peer.xml
+++ b/app/src/main/res/layout/tunnel_editor_peer.xml
@@ -15,128 +15,134 @@
             type="com.wireguard.config.Peer.Observable" />
     </data>
 
-    <RelativeLayout
-        android:layout_width="match_parent"
+    <android.support.v7.widget.CardView
+        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"
-        android:padding="8dp">
-
-        <TextView
-            android:id="@+id/peer_title"
-            style="?android:attr/textAppearanceMedium"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentStart="true"
-            android:layout_alignParentTop="true"
-            android:layout_marginBottom="8dp"
-            android:layout_toStartOf="@+id/peer_action_delete"
-            android:text="@string/peer" />
-
-        <ImageButton
-            android:id="@+id/peer_action_delete"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentEnd="true"
-            android:layout_alignParentTop="true"
-            android:background="@null"
-            android:contentDescription="@string/delete"
-            android:onClick="@{() -> collection.remove(item)}"
-            android:src="@drawable/ic_action_delete_black" />
-
-        <TextView
-            android:id="@+id/public_key_label"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@id/peer_title"
-            android:labelFor="@+id/public_key_text"
-            android:text="@string/public_key" />
-
-        <EditText
-            android:id="@+id/public_key_text"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/public_key_label"
-            android:inputType="textNoSuggestions|textVisiblePassword"
-            android:text="@={item.publicKey}"
-            app:filter="@{KeyInputFilter.newInstance()}" />
-
-        <TextView
-            android:id="@+id/pre_shared_key_label"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/public_key_text"
-            android:labelFor="@+id/pre_shared_key_text"
-            android:text="@string/pre_shared_key" />
-
-        <EditText
-            android:id="@+id/pre_shared_key_text"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/pre_shared_key_label"
-            android:hint="@string/hint_optional"
-            android:inputType="textNoSuggestions|textVisiblePassword"
-            android:text="@={item.preSharedKey}" />
-
-        <TextView
-            android:id="@+id/allowed_ips_label"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/pre_shared_key_text"
-            android:labelFor="@+id/allowed_ips_text"
-            android:text="@string/allowed_ips" />
+        app:cardCornerRadius="4dp"
+        app:cardElevation="2dp"
+        app:contentPadding="8dp">
 
-        <EditText
-            android:id="@+id/allowed_ips_text"
+        <RelativeLayout
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/allowed_ips_label"
-            android:inputType="textNoSuggestions|textVisiblePassword"
-            android:text="@={item.allowedIPs}" />
-
-        <TextView
-            android:id="@+id/endpoint_label"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentStart="true"
-            android:layout_below="@+id/allowed_ips_text"
-            android:layout_toStartOf="@+id/persistent_keepalive_label"
-            android:labelFor="@+id/endpoint_text"
-            android:text="@string/endpoint" />
-
-        <EditText
-            android:id="@+id/endpoint_text"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentStart="true"
-            android:layout_below="@+id/endpoint_label"
-            android:layout_toStartOf="@+id/persistent_keepalive_text"
-            android:inputType="textNoSuggestions|textVisiblePassword"
-            android:text="@={item.endpoint}" />
-
-        <TextView
-            android:id="@+id/persistent_keepalive_label"
-            android:layout_width="96dp"
-            android:layout_height="wrap_content"
-            android:layout_alignBaseline="@+id/endpoint_label"
-            android:layout_alignParentEnd="true"
-            android:labelFor="@+id/persistent_keepalive_text"
-            android:text="@string/persistent_keepalive" />
-
-        <EditText
-            android:id="@+id/persistent_keepalive_text"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignBaseline="@+id/endpoint_text"
-            android:layout_alignParentEnd="true"
-            android:layout_alignStart="@+id/persistent_keepalive_label"
-            android:hint="@string/hint_optional"
-            android:inputType="number"
-            android:text="@={item.persistentKeepalive}"
-            android:textAlignment="center" />
-    </RelativeLayout>
+            android:layout_height="wrap_content">
+
+            <TextView
+                android:id="@+id/peer_title"
+                style="?android:attr/textAppearanceMedium"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_alignParentStart="true"
+                android:layout_alignParentTop="true"
+                android:layout_marginBottom="8dp"
+                android:layout_toStartOf="@+id/peer_action_delete"
+                android:text="@string/peer" />
+
+            <ImageButton
+                android:id="@+id/peer_action_delete"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_alignParentEnd="true"
+                android:layout_alignParentTop="true"
+                android:background="@null"
+                android:contentDescription="@string/delete"
+                android:onClick="@{() -> collection.remove(item)}"
+                android:src="@drawable/ic_action_delete_black" />
+
+            <TextView
+                android:id="@+id/public_key_label"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@id/peer_title"
+                android:labelFor="@+id/public_key_text"
+                android:text="@string/public_key" />
+
+            <EditText
+                android:id="@+id/public_key_text"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/public_key_label"
+                android:inputType="textNoSuggestions|textVisiblePassword"
+                android:text="@={item.publicKey}"
+                app:filter="@{KeyInputFilter.newInstance()}" />
+
+            <TextView
+                android:id="@+id/pre_shared_key_label"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/public_key_text"
+                android:labelFor="@+id/pre_shared_key_text"
+                android:text="@string/pre_shared_key" />
+
+            <EditText
+                android:id="@+id/pre_shared_key_text"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/pre_shared_key_label"
+                android:hint="@string/hint_optional"
+                android:inputType="textNoSuggestions|textVisiblePassword"
+                android:text="@={item.preSharedKey}" />
+
+            <TextView
+                android:id="@+id/allowed_ips_label"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/pre_shared_key_text"
+                android:labelFor="@+id/allowed_ips_text"
+                android:text="@string/allowed_ips" />
+
+            <EditText
+                android:id="@+id/allowed_ips_text"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/allowed_ips_label"
+                android:inputType="textNoSuggestions|textVisiblePassword"
+                android:text="@={item.allowedIPs}" />
+
+            <TextView
+                android:id="@+id/endpoint_label"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_alignParentStart="true"
+                android:layout_below="@+id/allowed_ips_text"
+                android:layout_toStartOf="@+id/persistent_keepalive_label"
+                android:labelFor="@+id/endpoint_text"
+                android:text="@string/endpoint" />
+
+            <EditText
+                android:id="@+id/endpoint_text"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_alignParentStart="true"
+                android:layout_below="@+id/endpoint_label"
+                android:layout_toStartOf="@+id/persistent_keepalive_text"
+                android:inputType="textNoSuggestions|textVisiblePassword"
+                android:text="@={item.endpoint}" />
+
+            <TextView
+                android:id="@+id/persistent_keepalive_label"
+                android:layout_width="96dp"
+                android:layout_height="wrap_content"
+                android:layout_alignBaseline="@+id/endpoint_label"
+                android:layout_alignParentEnd="true"
+                android:labelFor="@+id/persistent_keepalive_text"
+                android:text="@string/persistent_keepalive" />
+
+            <EditText
+                android:id="@+id/persistent_keepalive_text"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_alignBaseline="@+id/endpoint_text"
+                android:layout_alignParentEnd="true"
+                android:layout_alignStart="@+id/persistent_keepalive_label"
+                android:hint="@string/hint_optional"
+                android:inputType="number"
+                android:text="@={item.persistentKeepalive}"
+                android:textAlignment="center" />
+        </RelativeLayout>
+    </android.support.v7.widget.CardView>
 </layout>