TunnelEditor: replace tunnel detail view with ConstraintLayout implementation

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

5 files changed, 498 insertions, 436 deletions

diff --git a/ui/src/main/res/layout/tunnel_detail_fragment.xml b/ui/src/main/res/layout/tunnel_detail_fragment.xml
index 134b61e5..8e2b8e20 100644
--- a/ui/src/main/res/layout/tunnel_detail_fragment.xml
+++ b/ui/src/main/res/layout/tunnel_detail_fragment.xml
@@ -22,118 +22,130 @@
             type="com.wireguard.config.Config" />
     </data>
 
-    <ScrollView
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
+        android:orientation="vertical"
+        android:clickable="true"
+        android:focusable="true"
         android:background="?attr/colorBackground">
 
-        <LinearLayout
+        <com.google.android.material.card.MaterialCardView
+            android:id="@+id/tunnel_detail_card"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="vertical">
-
-            <androidx.cardview.widget.CardView
+            android:layout_marginTop="16dp"
+            android:layout_marginStart="8dp"
+            android:layout_marginEnd="8dp"
+            android:layout_marginBottom="8dp"
+            app:cardBackgroundColor="?attr/elevationOverlayColor"
+            app:cardCornerRadius="0dp"
+            app:cardElevation="2dp"
+            app:contentPadding="8dp"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent">
+
+            <androidx.constraintlayout.widget.ConstraintLayout
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="8dp"
-                android:layout_marginTop="8dp"
-                android:layout_marginEnd="8dp"
-                android:layout_marginBottom="4dp"
-                android:background="?attr/colorBackground"
-                app:cardCornerRadius="4dp"
-                app:cardElevation="2dp"
-                app:contentPadding="8dp">
-
-                <RelativeLayout
+                android:layout_height="wrap_content">
+
+                <com.google.android.material.textview.MaterialTextView
+                    android:id="@+id/interface_title"
+                    style="@style/TextAppearance.MaterialComponents.Headline6"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/interface_title"
+                    app:layout_constraintTop_toTopOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"/>
+
+                <com.wireguard.android.widget.ToggleSwitch
+                    android:id="@+id/tunnel_switch"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="16dp"
+                    app:checked="@{tunnel.state == State.UP}"
+                    app:onBeforeCheckedChanged="@{fragment::setTunnelState}"
+                    app:layout_constraintBaseline_toBaselineOf="@+id/interface_title"
+                    app:layout_constraintEnd_toEndOf="parent"/>
+
+                <TextView
+                    android:id="@+id/interface_name_label"
                     android:layout_width="match_parent"
-                    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: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="@{fragment::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.interface.keyPair.publicKey.toBase64}" />
-
-                    <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.interface.addresses}" />
-                </RelativeLayout>
-            </androidx.cardview.widget.CardView>
-
-            <LinearLayout
-                android:id="@+id/peers_layout"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginBottom="4dp"
-                android:divider="@null"
-                android:orientation="vertical"
-                app:items="@{config.peers}"
-                app:layout="@{@layout/tunnel_detail_peer}"
-                tools:ignore="UselessLeaf" />
-        </LinearLayout>
-    </ScrollView>
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:labelFor="@+id/interface_name_text"
+                    android:text="@string/name"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@+id/interface_title"/>
+
+                <TextView
+                    android:id="@+id/interface_name_text"
+                    style="@style/DetailText"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:text="@{tunnel.name}"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@+id/interface_name_label"
+                    tools:text="wg0"/>
+
+                <TextView
+                    android:id="@+id/public_key_label"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:labelFor="@+id/public_key_text"
+                    android:text="@string/public_key"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@id/interface_name_text"/>
+
+                <TextView
+                    android:id="@+id/public_key_text"
+                    style="@style/DetailText"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:contentDescription="@string/public_key_description"
+                    android:ellipsize="end"
+                    android:maxLines="1"
+                    android:onClick="@{ClipboardUtils::copyTextView}"
+                    android:text="@{config.interface.keyPair.publicKey.toBase64}"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@+id/public_key_label"
+                    tools:text="wOs2eguFEohqIZxlSJ1CAT9584tc6ejj9hfGFsoBVkA="/>
+
+                <TextView
+                    android:id="@+id/addresses_label"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:labelFor="@+id/addresses_text"
+                    android:text="@string/addresses"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@id/public_key_text"/>
+
+                <TextView
+                    android:id="@+id/addresses_text"
+                    style="@style/DetailText"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:contentDescription="@string/addresses"
+                    android:text="@{config.interface.addresses}"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@+id/addresses_label"
+                    tools:text="fc00:bbbb:bbbb:bb11::3:368b/128"/>
+            </androidx.constraintlayout.widget.ConstraintLayout>
+        </com.google.android.material.card.MaterialCardView>
+
+        <LinearLayout
+            android:id="@+id/peers_layout"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="8dp"
+            android:divider="@null"
+            android:orientation="vertical"
+            app:items="@{config.peers}"
+            app:layout="@{@layout/tunnel_detail_peer}"
+            app:layout_constraintTop_toBottomOf="@+id/tunnel_detail_card"
+            app:layout_constraintStart_toStartOf="parent"
+            tools:ignore="UselessLeaf"/>
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/ui/src/main/res/layout/tunnel_detail_peer.xml b/ui/src/main/res/layout/tunnel_detail_peer.xml
index 79a48f38..ac1a9660 100644
--- a/ui/src/main/res/layout/tunnel_detail_peer.xml
+++ b/ui/src/main/res/layout/tunnel_detail_peer.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto">
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
 
     <data>
 
@@ -11,84 +12,91 @@
             type="com.wireguard.config.Peer" />
     </data>
 
-    <androidx.cardview.widget.CardView
+    <com.google.android.material.card.MaterialCardView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginStart="8dp"
-        android:layout_marginTop="4dp"
-        android:layout_marginEnd="8dp"
-        android:layout_marginBottom="4dp"
-        android:background="?attr/colorBackground"
-        app:cardCornerRadius="4dp"
+        android:layout_margin="8dp"
+        app:cardBackgroundColor="?attr/elevationOverlayColor"
+        app:cardCornerRadius="0dp"
         app:cardElevation="2dp"
         app:contentPadding="8dp">
 
-        <RelativeLayout
+        <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content">
 
-            <TextView
+            <com.google.android.material.textview.MaterialTextView
                 android:id="@+id/peer_title"
-                style="?android:attr/textAppearanceMedium"
+                style="@style/TextAppearance.MaterialComponents.Headline6"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_alignParentTop="true"
-                android:text="@string/peer" />
+                android:text="@string/peer"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintStart_toStartOf="parent"/>
 
             <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" />
+                android:text="@string/public_key"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/peer_title"/>
 
             <TextView
                 android:id="@+id/public_key_text"
-                style="?android:attr/textAppearanceMedium"
+                style="@style/DetailText"
                 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.toBase64}" />
+                android:text="@{item.publicKey.toBase64}"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/public_key_label"
+                tools:text="wOs2eguFEohqIZxlSJ1CAT9584tc6ejj9hfGFsoBVkA="/>
 
             <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" />
+                android:text="@string/allowed_ips"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/public_key_text"/>
 
             <TextView
                 android:id="@+id/allowed_ips_text"
-                style="?android:attr/textAppearanceMedium"
+                style="@style/DetailText"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_below="@+id/allowed_ips_label"
-                android:text="@{item.allowedIps}" />
+                android:text="@{item.allowedIps}"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/allowed_ips_label"
+                tools:text="0.0.0.0/5, 8.0.0.0/7, 11.0.0.0/8, 12.0.0.0/6, 16.0.0.0/4, 32.0.0.0/3"/>
 
             <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" />
+                android:text="@string/endpoint"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/allowed_ips_text"/>
 
             <TextView
                 android:id="@+id/endpoint_text"
-                style="?android:attr/textAppearanceMedium"
+                style="@style/DetailText"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_below="@+id/endpoint_label"
-                android:text="@{item.endpoint}" />
+                android:text="@{item.endpoint}"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/endpoint_label"
+                tools:text="192.168.0.1:51820" />
 
             <TextView
                 android:id="@+id/transfer_label"
@@ -98,15 +106,22 @@
                 android:layout_marginTop="8dp"
                 android:labelFor="@+id/transfer_text"
                 android:text="@string/transfer"
-                android:visibility="gone" />
+                android:visibility="gone"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/endpoint_text"
+                tools:visibility="visible" />
 
             <TextView
                 android:id="@+id/transfer_text"
-                style="?android:attr/textAppearanceMedium"
+                style="@style/DetailText"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_below="@+id/transfer_label"
-                android:visibility="gone" />
-        </RelativeLayout>
-    </androidx.cardview.widget.CardView>
+                android:visibility="gone"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/transfer_label"
+                tools:visibility="visible"
+                tools:text="1024 MB" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </com.google.android.material.card.MaterialCardView>
 </layout>
diff --git a/ui/src/main/res/layout/tunnel_editor_fragment.xml b/ui/src/main/res/layout/tunnel_editor_fragment.xml
index 1d9d21de..bef3fb25 100644
--- a/ui/src/main/res/layout/tunnel_editor_fragment.xml
+++ b/ui/src/main/res/layout/tunnel_editor_fragment.xml
@@ -25,230 +25,248 @@
     </data>
 
     <androidx.coordinatorlayout.widget.CoordinatorLayout
-        android:id="@+id/main_container"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:background="?attr/colorBackground">
+            android:id="@+id/main_container"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="?attr/colorBackground">
 
         <ScrollView
             android:layout_width="match_parent"
             android:layout_height="match_parent">
 
             <LinearLayout
+                android:orientation="vertical"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical">
+                android:layout_height="wrap_content">
 
-                <androidx.cardview.widget.CardView
+                <com.google.android.material.card.MaterialCardView
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_marginStart="8dp"
-                    android:layout_marginTop="8dp"
+                    android:layout_marginTop="16dp"
                     android:layout_marginEnd="8dp"
-                    android:layout_marginBottom="4dp"
-                    android:background="?attr/colorBackground"
-                    app:cardCornerRadius="4dp"
+                    android:layout_marginStart="8dp"
+                    android:layout_marginBottom="16dp"
+                    app:cardBackgroundColor="?attr/elevationOverlayColor"
+                    app:cardCornerRadius="0dp"
                     app:cardElevation="2dp"
                     app:contentPadding="8dp">
 
-                    <RelativeLayout
+                    <androidx.constraintlayout.widget.ConstraintLayout
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content">
 
-                        <TextView
+                        <com.google.android.material.textview.MaterialTextView
                             android:id="@+id/interface_title"
-                            style="?android:attr/textAppearanceMedium"
-                            android:layout_width="match_parent"
+                            style="@style/TextAppearance.MaterialComponents.Headline6"
+                            android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
-                            android:layout_alignParentTop="true"
-                            android:text="@string/interface_title" />
+                            android:layout_margin="8dp"
+                            android:layout_marginTop="32dp"
+                            android:text="@string/interface_title"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toTopOf="parent" />
 
-                        <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"
+                        <com.google.android.material.textfield.TextInputLayout
+                            android:id="@+id/interface_name_layout"
+                            style="@style/TextInputLayoutBase"
+                            android:layout_width="0dp"
                             android:layout_height="wrap_content"
-                            android:layout_below="@+id/interface_name_label"
-                            android:inputType="textNoSuggestions|textVisiblePassword"
-                            android:text="@={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" />
+                            android:layout_margin="4dp"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/interface_title">
 
-                        <EditText
-                            android:id="@+id/private_key_text"
-                            android:layout_width="wrap_content"
+                            <com.google.android.material.textfield.TextInputEditText
+                                android:id="@+id/interface_name_text"
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:hint="@string/name"
+                                android:inputType="textNoSuggestions|textVisiblePassword"
+                                android:text="@={name}"
+                                app:filter="@{NameInputFilter.newInstance()}" />
+                        </com.google.android.material.textfield.TextInputLayout>
+
+                        <com.google.android.material.textfield.TextInputLayout
+                            android:id="@+id/private_key_text_layout"
+                            style="@style/TextInputLayoutBase"
+                            android:layout_width="0dp"
                             android:layout_height="wrap_content"
-                            android:layout_below="@+id/private_key_label"
-                            android:layout_alignParentStart="true"
-                            android:layout_toStartOf="@+id/generate_private_key_button"
-                            android:contentDescription="@string/public_key_description"
-                            android:inputType="textNoSuggestions|textVisiblePassword"
-                            android:text="@={config.interface.privateKey}"
-                            app:filter="@{KeyInputFilter.newInstance()}" />
-
-                        <Button
+                            android:layout_margin="4dp"
+                            app:layout_constraintHorizontal_weight="0.7"
+                            app:layout_constraintHorizontal_chainStyle="spread"
+                            app:layout_constraintEnd_toStartOf="@id/generate_private_key_button"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/interface_name_layout">
+
+                            <com.google.android.material.textfield.TextInputEditText
+                                android:id="@+id/private_key_text"
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:hint="@string/private_key"
+                                android:inputType="textNoSuggestions|textVisiblePassword"
+                                android:text="@={config.interface.privateKey}"
+                                app:filter="@{KeyInputFilter.newInstance()}" />
+                        </com.google.android.material.textfield.TextInputLayout>
+
+                        <com.google.android.material.button.MaterialButton
                             android:id="@+id/generate_private_key_button"
-                            style="@style/Widget.AppCompat.Button.Borderless.Colored"
-                            android:layout_width="wrap_content"
+                            style="@style/Widget.MaterialComponents.Button.TextButton"
+                            android:layout_width="0dp"
                             android:layout_height="wrap_content"
-                            android:layout_below="@+id/private_key_label"
-                            android:layout_alignBottom="@id/private_key_text"
-                            android:layout_alignParentEnd="true"
+                            android:layout_margin="4dp"
                             android:onClick="@{() -> config.interface.generateKeyPair()}"
-                            android:text="@string/generate" />
+                            android:text="@string/generate"
+                            android:textColor="?attr/colorSecondary"
+                            app:layout_constraintHorizontal_weight="0.3"
+                            app:layout_constraintBaseline_toBaselineOf="@id/private_key_text_layout"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toEndOf="@id/private_key_text_layout"
+                            app:rippleColor="?attr/colorSecondary" />
 
-                        <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="?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.interface.publicKey}" />
-
-                        <TextView
-                            android:id="@+id/addresses_label"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:layout_below="@+id/public_key_text"
-                            android:layout_alignParentStart="true"
-                            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_below="@+id/addresses_label"
-                            android:layout_alignParentStart="true"
-                            android:layout_toStartOf="@+id/listen_port_text"
-                            android:inputType="textNoSuggestions|textVisiblePassword"
-                            android:text="@={config.interface.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_alignStart="@+id/generate_private_key_button"
-                            android:layout_alignParentEnd="true"
-                            android:labelFor="@+id/listen_port_text"
-                            android:text="@string/listen_port" />
-
-                        <EditText
-                            android:id="@+id/listen_port_text"
-                            android:layout_width="wrap_content"
+                        <com.google.android.material.textfield.TextInputLayout
+                            android:id="@+id/public_key_label_layout"
+                            style="@style/TextInputLayoutBase"
+                            android:layout_width="0dp"
                             android:layout_height="wrap_content"
-                            android:layout_alignBaseline="@+id/addresses_text"
-                            android:layout_alignStart="@+id/generate_private_key_button"
-                            android:layout_alignParentEnd="true"
-                            android:hint="@string/hint_random"
-                            android:inputType="number"
-                            android:text="@={config.interface.listenPort}"
-                            android:textAlignment="center" />
-
-                        <TextView
-                            android:id="@+id/dns_servers_label"
-                            android:layout_width="wrap_content"
+                            android:layout_margin="4dp"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/private_key_text_layout">
+
+                            <com.google.android.material.textfield.TextInputEditText
+                                android:id="@+id/public_key_text"
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:editable="false"
+                                android:ellipsize="end"
+                                android:focusable="false"
+                                android:hint="@string/public_key"
+                                android:onClick="@{ClipboardUtils::copyTextView}"
+                                android:singleLine="true"
+                                android:text="@{config.interface.publicKey}" />
+                        </com.google.android.material.textfield.TextInputLayout>
+
+                        <com.google.android.material.textfield.TextInputLayout
+                            android:id="@+id/addresses_label_layout"
+                            style="@style/TextInputLayoutBase"
+                            android:layout_width="0dp"
                             android:layout_height="wrap_content"
-                            android:layout_below="@+id/addresses_text"
-                            android:layout_alignParentStart="true"
-                            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_margin="4dp"
+                            app:layout_constraintHorizontal_chainStyle="spread"
+                            app:layout_constraintHorizontal_weight="0.7"
+                            app:layout_constraintEnd_toStartOf="@id/listen_port_label_layout"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/public_key_label_layout">
+
+                            <com.google.android.material.textfield.TextInputEditText
+                                android:id="@+id/addresses_label_text"
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:hint="@string/addresses"
+                                android:inputType="textNoSuggestions|textVisiblePassword"
+                                android:text="@={config.interface.addresses}" />
+                        </com.google.android.material.textfield.TextInputLayout>
+
+                        <com.google.android.material.textfield.TextInputLayout
+                            android:id="@+id/listen_port_label_layout"
+                            style="@style/TextInputLayoutBase"
+                            android:layout_width="0dp"
                             android:layout_height="wrap_content"
-                            android:layout_below="@+id/dns_servers_label"
-                            android:layout_alignParentStart="true"
-                            android:layout_toStartOf="@+id/mtu_text"
-                            android:inputType="textNoSuggestions|textVisiblePassword"
-                            android:text="@={config.interface.dnsServers}" />
-
-                        <TextView
-                            android:id="@+id/mtu_label"
-                            android:layout_width="wrap_content"
+                            android:layout_margin="4dp"
+                            app:layout_constraintHorizontal_weight="0.3"
+                            app:layout_constraintTop_toBottomOf="@id/public_key_label_layout"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toEndOf="@id/addresses_label_layout">
+
+                            <com.google.android.material.textfield.TextInputEditText
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:hint="@string/listen_port"
+                                android:inputType="number"
+                                android:text="@={config.interface.listenPort}"
+                                android:textAlignment="center" />
+                        </com.google.android.material.textfield.TextInputLayout>
+
+
+                        <com.google.android.material.textfield.TextInputLayout
+                            android:id="@+id/dns_servers_label_layout"
+                            style="@style/TextInputLayoutBase"
+                            android:layout_width="0dp"
                             android:layout_height="wrap_content"
-                            android:layout_alignBaseline="@+id/dns_servers_label"
-                            android:layout_alignStart="@+id/generate_private_key_button"
-                            android:layout_alignParentEnd="true"
-                            android:labelFor="@+id/mtu_text"
-                            android:text="@string/mtu" />
-
-                        <EditText
-                            android:id="@+id/mtu_text"
-                            android:layout_width="wrap_content"
+                            android:layout_margin="4dp"
+                            app:layout_constraintHorizontal_chainStyle="spread"
+                            app:layout_constraintHorizontal_weight="0.8"
+                            app:layout_constraintEnd_toStartOf="@id/mtu_label_layout"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/addresses_label_layout">
+
+                            <com.google.android.material.textfield.TextInputEditText
+                                android:id="@+id/dns_servers_text"
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:hint="@string/dns_servers"
+                                android:inputType="textNoSuggestions|textVisiblePassword"
+                                android:text="@={config.interface.dnsServers}" />
+                        </com.google.android.material.textfield.TextInputLayout>
+
+                        <com.google.android.material.textfield.TextInputLayout
+                            android:id="@+id/mtu_label_layout"
+                            style="@style/TextInputLayoutBase"
+                            android:layout_width="0dp"
                             android:layout_height="wrap_content"
-                            android:layout_alignBaseline="@+id/dns_servers_text"
-                            android:layout_alignStart="@+id/generate_private_key_button"
-                            android:layout_alignParentEnd="true"
-                            android:hint="@string/hint_automatic"
-                            android:inputType="number"
-                            android:text="@={config.interface.mtu}"
-                            android:textAlignment="center" />
-
-                        <Button
+                            android:layout_marginStart="4dp"
+                            app:layout_constraintHorizontal_weight="0.2"
+                            app:layout_constraintStart_toEndOf="@id/dns_servers_label_layout"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintTop_toTopOf="@id/dns_servers_label_layout">
+
+                            <com.google.android.material.textfield.TextInputEditText
+                                android:id="@+id/mtu_text"
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:hint="@string/mtu"
+                                android:inputType="number"
+                                android:text="@={config.interface.mtu}"
+                                android:textAlignment="center" />
+                        </com.google.android.material.textfield.TextInputLayout>
+
+                        <com.google.android.material.button.MaterialButton
                             android:id="@+id/set_excluded_applications"
-                            style="@style/Widget.AppCompat.Button.Borderless.Colored"
-                            android:layout_width="wrap_content"
+                            style="@style/Widget.MaterialComponents.Button.TextButton"
+                            android:layout_width="0dp"
                             android:layout_height="wrap_content"
-                            android:layout_below="@+id/dns_servers_text"
-                            android:layout_marginLeft="-8dp"
+                            android:layout_margin="4dp"
                             android:onClick="@{fragment::onRequestSetExcludedApplications}"
-                            android:text="@{@plurals/set_excluded_applications(config.interface.excludedApplications.size, config.interface.excludedApplications.size)}" />
-                    </RelativeLayout>
-                </androidx.cardview.widget.CardView>
+                            android:text="@{@plurals/set_excluded_applications(config.interface.excludedApplications.size, config.interface.excludedApplications.size)}"
+                            android:textColor="?attr/colorSecondary"
+                            app:layout_constraintBottom_toBottomOf="parent"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@id/mtu_label_layout"
+                            app:rippleColor="?attr/colorSecondary" />
+                    </androidx.constraintlayout.widget.ConstraintLayout>
+                </com.google.android.material.card.MaterialCardView>
 
                 <LinearLayout
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:divider="@null"
                     android:orientation="vertical"
+                    android:layout_marginBottom="?attr/actionBarSize"
                     app:items="@{config.peers}"
                     app:layout="@{@layout/tunnel_editor_peer}"
                     tools:ignore="UselessLeaf" />
-
-                <Button
-                    style="@style/Widget.AppCompat.Button.Colored"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_marginStart="4dp"
-                    android:layout_marginEnd="4dp"
-                    android:layout_marginBottom="4dp"
-                    android:onClick="@{() -> config.addPeer()}"
-                    android:text="@string/add_peer" />
             </LinearLayout>
         </ScrollView>
-    </androidx.coordinatorlayout.widget.CoordinatorLayout>
+        <TextView
+            style="@style/TextAppearance.MaterialComponents.Button"
+            android:layout_width="match_parent"
+            android:layout_height="?attr/actionBarSize"
+            android:layout_gravity="bottom"
+            android:background="?attr/colorPrimaryDark"
+            android:gravity="center"
+            android:onClick="@{() -> config.addPeer()}"
+            android:text="@string/add_peer"
+            app:layout_anchorGravity="bottom" />
+     </androidx.coordinatorlayout.widget.CoordinatorLayout>
 </layout>
diff --git a/ui/src/main/res/layout/tunnel_editor_peer.xml b/ui/src/main/res/layout/tunnel_editor_peer.xml
index 98ce4550..e37aa564 100644
--- a/ui/src/main/res/layout/tunnel_editor_peer.xml
+++ b/ui/src/main/res/layout/tunnel_editor_peer.xml
@@ -17,145 +17,156 @@
             type="com.wireguard.android.viewmodel.PeerProxy" />
     </data>
 
-    <androidx.cardview.widget.CardView
-        android:layout_width="wrap_content"
+    <com.google.android.material.card.MaterialCardView
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_marginBottom="4dp"
+        android:layout_marginEnd="8dp"
         android:layout_marginStart="8dp"
         android:layout_marginTop="4dp"
-        android:layout_marginEnd="8dp"
-        android:layout_marginBottom="4dp"
-        android:background="?attr/colorBackground"
-        app:cardCornerRadius="4dp"
+        app:cardBackgroundColor="?attr/elevationOverlayColor"
+        app:cardCornerRadius="0dp"
         app:cardElevation="2dp"
         app:contentPadding="8dp">
 
-        <RelativeLayout
+        <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content">
 
-            <TextView
+            <com.google.android.material.textview.MaterialTextView
                 android:id="@+id/peer_title"
-                style="?android:attr/textAppearanceMedium"
-                android:layout_width="wrap_content"
+                style="@style/TextAppearance.MaterialComponents.Headline6"
+                android:layout_width="0dp"
                 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:text="@string/peer"
+                android:layout_margin="8dp"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintBottom_toTopOf="@+id/public_key_label_layout"
+                app:layout_constraintTop_toTopOf="parent"/>
+
+            <androidx.appcompat.widget.AppCompatImageButton
+                android:id="@+id/delete"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_alignParentTop="true"
-                android:layout_alignParentEnd="true"
-                android:background="@null"
-                android:contentDescription="@string/delete"
                 android:onClick="@{() -> item.unbind()}"
-                android:src="@drawable/ic_action_delete" />
-
-            <TextView
-                android:id="@+id/public_key_label"
-                android:layout_width="match_parent"
+                android:src="@drawable/ic_action_delete"
+                android:padding="8dp"
+                android:background="@null"
+                app:layout_constraintBaseline_toBaselineOf="@id/peer_title"
+                app:layout_constraintTop_toTopOf="@id/peer_title"
+                app:layout_constraintEnd_toEndOf="parent" />
+
+            <com.google.android.material.textfield.TextInputLayout
+                android:id="@+id/public_key_label_layout"
+                style="@style/TextInputLayoutBase"
+                android:layout_width="0dp"
                 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_margin="4dp"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/peer_title"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintBottom_toTopOf="@+id/pre_shared_key_label_layout">
+
+                <com.google.android.material.textfield.TextInputEditText
+                    android:id="@+id/public_key_text"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:inputType="textNoSuggestions|textVisiblePassword"
+                    android:text="@={item.publicKey}"
+                    android:hint="@string/public_key"
+                    app:filter="@{KeyInputFilter.newInstance()}"/>
+            </com.google.android.material.textfield.TextInputLayout>
+
+            <com.google.android.material.textfield.TextInputLayout
+                android:id="@+id/pre_shared_key_label_layout"
+                style="@style/TextInputLayoutBase"
+                android:layout_width="0dp"
                 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_margin="4dp"
+                app:layout_constraintTop_toBottomOf="@+id/public_key_label_layout"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent">
+
+                <com.google.android.material.textfield.TextInputEditText
+                    android:id="@+id/pre_shared_key_text"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:hint="@string/pre_shared_key"
+                    android:inputType="textNoSuggestions|textVisiblePassword"
+                    android:text="@={item.preSharedKey}"/>
+            </com.google.android.material.textfield.TextInputLayout>
+
+            <com.google.android.material.textfield.TextInputLayout
+                android:id="@+id/persistent_keepalive_label_layout"
+                style="@style/TextInputLayoutBase"
+                android:layout_width="0dp"
                 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_margin="4dp"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/pre_shared_key_label_layout"
+                app:layout_constraintEnd_toEndOf="parent">
+
+                <com.google.android.material.textfield.TextInputEditText
+                    android:id="@+id/persistent_keepalive_text"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:hint="@string/persistent_keepalive"
+                    android:inputType="number"
+                    android:text="@={item.persistentKeepalive}" />
+            </com.google.android.material.textfield.TextInputLayout>
+
+            <com.google.android.material.textfield.TextInputLayout
+                android:id="@+id/endpoint_label_layout"
+                style="@style/TextInputLayoutBase"
                 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_margin="4dp"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/persistent_keepalive_label_layout">
+
+                <com.google.android.material.textfield.TextInputEditText
+                    android:id="@+id/endpoint_text"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_alignParentStart="true"
+                    android:inputType="textNoSuggestions|textVisiblePassword"
+                    android:hint="@string/endpoint"
+                    android:text="@={item.endpoint}"/>
+            </com.google.android.material.textfield.TextInputLayout>
+
+            <com.google.android.material.textfield.TextInputLayout
+                android:id="@+id/allowed_ips_label_layout"
+                style="@style/TextInputLayoutBase"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_below="@+id/pre_shared_key_text"
-                android:layout_toStartOf="@+id/exclude_private_ips"
-                android:labelFor="@+id/allowed_ips_text"
-                android:text="@string/allowed_ips" />
+                android:layout_marginTop="4dp"
+                android:layout_marginStart="4dp"
+                android:layout_marginEnd="4dp"
+                app:layout_constraintTop_toBottomOf="@id/endpoint_label_layout"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent">
+
+                <com.google.android.material.textfield.TextInputEditText
+                    android:id="@+id/allowed_ips_text"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:inputType="textNoSuggestions|textVisiblePassword"
+                    android:hint="@string/allowed_ips"
+                    android:text="@={item.allowedIps}"/>
+            </com.google.android.material.textfield.TextInputLayout>
 
             <CheckBox
-                android:id="@+id/exclude_private_ips"
+                android:id="@+id/excluded_checkbox"
                 android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_alignBaseline="@+id/allowed_ips_label"
-                android:layout_alignParentEnd="true"
-                android:checked="@={item.excludingPrivateIps}"
+                android:layout_height="match_parent"
+                android:layout_marginStart="4dp"
+                android:layout_marginTop="0dp"
                 android:text="@string/exclude_private_ips"
-                android:visibility="@{item.ableToExcludePrivateIps ? View.VISIBLE : View.GONE}" />
-
-            <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_below="@+id/allowed_ips_text"
-                android:layout_alignParentStart="true"
-                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_below="@+id/endpoint_label"
-                android:layout_alignParentStart="true"
-                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" />
+                android:visibility="@{item.ableToExcludePrivateIps ? View.VISIBLE : View.GONE}"
+                android:checked="@={item.excludingPrivateIps}"
+                app:layout_constraintTop_toBottomOf="@id/allowed_ips_label_layout"
+                app:layout_constraintEnd_toEndOf="parent" />
 
-            <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_alignStart="@+id/persistent_keepalive_label"
-                android:layout_alignParentEnd="true"
-                android:hint="@string/hint_optional"
-                android:inputType="number"
-                android:text="@={item.persistentKeepalive}"
-                android:textAlignment="center" />
-        </RelativeLayout>
-    </androidx.cardview.widget.CardView>
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </com.google.android.material.card.MaterialCardView>
 </layout>
diff --git a/ui/src/main/res/values/styles.xml b/ui/src/main/res/values/styles.xml
index f5af8bce..fc2f9f0e 100644
--- a/ui/src/main/res/values/styles.xml
+++ b/ui/src/main/res/values/styles.xml
@@ -53,4 +53,10 @@
         <item name="android:windowExitAnimation">@android:anim/fade_out</item>
     </style>
 
+    <style name="DetailText" parent="TextAppearance.MaterialComponents.Body1" />
+
+    <style name="TextInputLayoutBase" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
+        <item name="boxStrokeColor">?attr/colorSecondary</item>
+        <item name="hintTextColor">?attr/colorOnPrimary</item>
+    </style>
 </resources>