From d25702d99ded6946608713e670c6a6ce323f8f87 Mon Sep 17 00:00:00 2001
From: Harsh Shandilya <me@msfjarvis.dev>
Date: Wed, 12 Feb 2020 19:46:01 +0530
Subject: [PATCH] Implement custom theming to match Google's AOSP design

Closes: #4
Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>
---
 .idea/codeStyles/Project.xml                  |  3 --
 app/build.gradle                              |  4 +--
 app/sampledata/interface_names.json           | 34 +++++++++++++++++++
 .../main/res/drawable/ic_action_add_white.xml |  2 +-
 .../main/res/drawable/ic_action_delete.xml    |  2 +-
 app/src/main/res/drawable/ic_action_edit.xml  |  2 +-
 .../res/drawable/ic_action_edit_white.xml     |  2 +-
 app/src/main/res/drawable/ic_action_open.xml  |  9 -----
 .../res/drawable/ic_action_open_white.xml     |  2 +-
 app/src/main/res/drawable/ic_action_save.xml  |  2 +-
 .../drawable/ic_action_scan_qr_code_white.xml |  2 +-
 .../res/drawable/ic_action_select_all.xml     |  2 +-
 .../res/drawable/list_item_background.xml     | 11 ++----
 .../res/layout/app_list_dialog_fragment.xml   | 10 ++++--
 app/src/main/res/layout/app_list_item.xml     | 12 ++++---
 .../res/layout/tunnel_detail_fragment.xml     |  4 +--
 .../main/res/layout/tunnel_detail_peer.xml    |  2 +-
 .../res/layout/tunnel_editor_fragment.xml     |  6 ++--
 .../main/res/layout/tunnel_editor_peer.xml    |  2 +-
 .../main/res/layout/tunnel_list_fragment.xml  | 13 ++++---
 app/src/main/res/layout/tunnel_list_item.xml  |  9 +++--
 app/src/main/res/values-night/bools.xml       |  5 +++
 app/src/main/res/values-night/colors.xml      | 15 +++++++-
 app/src/main/res/values-v27/styles.xml        | 28 +++++++++++++++
 app/src/main/res/values/attrs.xml             |  5 +++
 app/src/main/res/values/bools.xml             |  5 +++
 app/src/main/res/values/colors.xml            | 21 ++++++++++--
 app/src/main/res/values/styles.xml            | 27 +++++++++++++--
 build.gradle                                  |  2 +-
 gradle/wrapper/gradle-wrapper.properties      |  2 +-
 30 files changed, 185 insertions(+), 60 deletions(-)
 create mode 100644 app/sampledata/interface_names.json
 delete mode 100644 app/src/main/res/drawable/ic_action_open.xml
 create mode 100644 app/src/main/res/values-night/bools.xml
 create mode 100644 app/src/main/res/values-v27/styles.xml
 create mode 100644 app/src/main/res/values/bools.xml

diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 1349f8cc..4a46ec8f 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -29,9 +29,6 @@
         <emptyLine />
       </value>
     </option>
-    <AndroidXmlCodeStyleSettings>
-      <option name="ARRANGEMENT_SETTINGS_MIGRATED_TO_191" value="true" />
-    </AndroidXmlCodeStyleSettings>
     <JavaCodeStyleSettings>
       <option name="GENERATE_FINAL_LOCALS" value="true" />
       <option name="GENERATE_FINAL_PARAMETERS" value="true" />
diff --git a/app/build.gradle b/app/build.gradle
index b541b5bf..3237d35b 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -71,11 +71,11 @@ ext {
     appcompatVersion = '1.1.0'
     cardviewVersion = '1.0.0'
     databindingVersion = '3.5.3'
-    materialComponentsVersion = '1.0.0'
+    materialComponentsVersion = '1.1.0'
     jsr305Version = '3.0.2'
     preferenceVersion = '1.1.0'
     streamsupportVersion = '1.7.1'
-    threetenabpVersion = '1.2.1'
+    threetenabpVersion = '1.2.2'
     // ZXING switched minSdk to 24 so we cannot upgrade to 4.0.2 without following suit.
     // If you choose to upgrade to minSDK 24 then you should also disable Jetifier from
     // gradle.properties.
diff --git a/app/sampledata/interface_names.json b/app/sampledata/interface_names.json
new file mode 100644
index 00000000..1c41cb22
--- /dev/null
+++ b/app/sampledata/interface_names.json
@@ -0,0 +1,34 @@
+{
+  "comment": "Interface names",
+  "names": [
+    {
+      "names": [
+        { "name": "wg0" },
+        { "name": "wg1" },
+        { "name": "wg2" },
+        { "name": "wg3" },
+        { "name": "wg4" },
+        { "name": "wg5" },
+        { "name": "wg6" },
+        { "name": "wg7" },
+        { "name": "wg8" },
+        { "name": "wg9" },
+        { "name": "wg10" },
+        { "name": "wg11" }
+      ],
+      "checked": [
+        { "checked":  true },
+        { "checked":  false },
+        { "checked":  true },
+        { "checked":  false },
+        { "checked":  true },
+        { "checked":  false },
+        { "checked":  true },
+        { "checked":  false },
+        { "checked":  true },
+        { "checked":  false },
+        { "checked":  true }
+      ]
+    }
+  ]
+}
diff --git a/app/src/main/res/drawable/ic_action_add_white.xml b/app/src/main/res/drawable/ic_action_add_white.xml
index 0706462e..cbb4c4e6 100644
--- a/app/src/main/res/drawable/ic_action_add_white.xml
+++ b/app/src/main/res/drawable/ic_action_add_white.xml
@@ -4,6 +4,6 @@
     android:viewportHeight="24.0"
     android:viewportWidth="24.0">
     <path
-        android:fillColor="#ffffff"
+        android:fillColor="?attr/colorOnSecondary"
         android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
 </vector>
diff --git a/app/src/main/res/drawable/ic_action_delete.xml b/app/src/main/res/drawable/ic_action_delete.xml
index 34f27019..d4ebd61f 100644
--- a/app/src/main/res/drawable/ic_action_delete.xml
+++ b/app/src/main/res/drawable/ic_action_delete.xml
@@ -4,6 +4,6 @@
     android:viewportHeight="24"
     android:viewportWidth="24">
     <path
-        android:fillColor="?android:attr/colorForeground"
+        android:fillColor="?attr/colorOnPrimary"
         android:pathData="M6,19c0,1.1 0.9,2 2,2h8c1.1,0 2,-0.9 2,-2V7H6v12zM19,4h-3.5l-1,-1h-5l-1,1H5v2h14V4z" />
 </vector>
diff --git a/app/src/main/res/drawable/ic_action_edit.xml b/app/src/main/res/drawable/ic_action_edit.xml
index 0a4d120e..fc42d2ef 100644
--- a/app/src/main/res/drawable/ic_action_edit.xml
+++ b/app/src/main/res/drawable/ic_action_edit.xml
@@ -4,6 +4,6 @@
     android:viewportHeight="24"
     android:viewportWidth="24">
     <path
-        android:fillColor="?android:attr/colorForeground"
+        android:fillColor="?attr/colorOnPrimary"
         android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z" />
 </vector>
diff --git a/app/src/main/res/drawable/ic_action_edit_white.xml b/app/src/main/res/drawable/ic_action_edit_white.xml
index c1ce5043..fa95f54b 100644
--- a/app/src/main/res/drawable/ic_action_edit_white.xml
+++ b/app/src/main/res/drawable/ic_action_edit_white.xml
@@ -4,6 +4,6 @@
     android:viewportHeight="24"
     android:viewportWidth="24">
     <path
-        android:fillColor="#ffffff"
+        android:fillColor="?attr/colorOnSecondary"
         android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z" />
 </vector>
diff --git a/app/src/main/res/drawable/ic_action_open.xml b/app/src/main/res/drawable/ic_action_open.xml
deleted file mode 100644
index ea56ba01..00000000
--- a/app/src/main/res/drawable/ic_action_open.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportHeight="24"
-    android:viewportWidth="24">
-    <path
-        android:fillColor="?android:attr/colorForeground"
-        android:pathData="M6,2c-1.1,0 -1.99,0.9 -1.99,2L4,20c0,1.1 0.89,2 1.99,2L18,22c1.1,0 2,-0.9 2,-2L20,8l-6,-6L6,2zM13,9L13,3.5L18.5,9L13,9z" />
-</vector>
diff --git a/app/src/main/res/drawable/ic_action_open_white.xml b/app/src/main/res/drawable/ic_action_open_white.xml
index 74648d14..01b2815c 100644
--- a/app/src/main/res/drawable/ic_action_open_white.xml
+++ b/app/src/main/res/drawable/ic_action_open_white.xml
@@ -4,6 +4,6 @@
     android:viewportHeight="24"
     android:viewportWidth="24">
     <path
-        android:fillColor="#ffffff"
+        android:fillColor="?attr/colorOnSecondary"
         android:pathData="M6,2c-1.1,0 -1.99,0.9 -1.99,2L4,20c0,1.1 0.89,2 1.99,2L18,22c1.1,0 2,-0.9 2,-2L20,8l-6,-6L6,2zM13,9L13,3.5L18.5,9L13,9z" />
 </vector>
diff --git a/app/src/main/res/drawable/ic_action_save.xml b/app/src/main/res/drawable/ic_action_save.xml
index 690d119d..528bd997 100644
--- a/app/src/main/res/drawable/ic_action_save.xml
+++ b/app/src/main/res/drawable/ic_action_save.xml
@@ -5,6 +5,6 @@
     android:viewportHeight="24"
     android:viewportWidth="24">
     <path
-        android:fillColor="?android:attr/colorForeground"
+        android:fillColor="?attr/colorOnPrimary"
         android:pathData="M17,3L5,3c-1.11,0 -2,0.9 -2,2v14c0,1.1 0.89,2 2,2h14c1.1,0 2,-0.9 2,-2L21,7l-4,-4zM12,19c-1.66,0 -3,-1.34 -3,-3s1.34,-3 3,-3 3,1.34 3,3 -1.34,3 -3,3zM15,9L5,9L5,5h10v4z" />
 </vector>
diff --git a/app/src/main/res/drawable/ic_action_scan_qr_code_white.xml b/app/src/main/res/drawable/ic_action_scan_qr_code_white.xml
index cdd83361..2383d032 100644
--- a/app/src/main/res/drawable/ic_action_scan_qr_code_white.xml
+++ b/app/src/main/res/drawable/ic_action_scan_qr_code_white.xml
@@ -4,6 +4,6 @@
     android:viewportHeight="24"
     android:viewportWidth="24">
     <path
-        android:fillColor="#ffffff"
+        android:fillColor="?attr/colorOnSecondary"
         android:pathData="M4,4H10V10H4V4M20,4V10H14V4H20M14,15H16V13H14V11H16V13H18V11H20V13H18V15H20V18H18V20H16V18H13V20H11V16H14V15M16,15V18H18V15H16M4,20V14H10V20H4M6,6V8H8V6H6M16,6V8H18V6H16M6,16V18H8V16H6M4,11H6V13H4V11M9,11H13V15H11V13H9V11M11,6H13V10H11V6M2,2V6H0V2A2,2 0 0,1 2,0H6V2H2M22,0A2,2 0 0,1 24,2V6H22V2H18V0H22M2,18V22H6V24H2A2,2 0 0,1 0,22V18H2M22,22V18H24V22A2,2 0 0,1 22,24H18V22H22Z" />
 </vector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_action_select_all.xml b/app/src/main/res/drawable/ic_action_select_all.xml
index 9c560297..28837423 100644
--- a/app/src/main/res/drawable/ic_action_select_all.xml
+++ b/app/src/main/res/drawable/ic_action_select_all.xml
@@ -5,6 +5,6 @@
     android:viewportHeight="24"
     android:viewportWidth="24">
     <path
-        android:fillColor="?android:attr/colorForeground"
+        android:fillColor="?attr/colorOnPrimary"
         android:pathData="M3 5L5 5 5 3C3.9 3 3 3.9 3 5Zm0 8l2 0 0 -2 -2 0 0 2zm4 8l2 0 0 -2 -2 0 0 2zM3 9L5 9 5 7 3 7 3 9Zm10 -6l-2 0 0 2 2 0 0 -2zm6 0l0 2 2 0C21 3.9 20.1 3 19 3ZM5 21L5 19 3 19c0 1.1 0.9 2 2 2zm-2 -4l2 0 0 -2 -2 0 0 2zM9 3L7 3 7 5 9 5 9 3Zm2 18l2 0 0 -2 -2 0 0 2zm8 -8l2 0 0 -2 -2 0 0 2zm0 8c1.1 0 2 -0.9 2 -2l-2 0 0 2zm0 -12l2 0 0 -2 -2 0 0 2zm0 8l2 0 0 -2 -2 0 0 2zm-4 4l2 0 0 -2 -2 0 0 2zm0 -16l2 0 0 -2 -2 0 0 2zM7 17L17 17 17 7 7 7 7 17Zm2 -8l6 0 0 6 -6 0 0 -6z" />
 </vector>
diff --git a/app/src/main/res/drawable/list_item_background.xml b/app/src/main/res/drawable/list_item_background.xml
index f86d4df1..f967f700 100644
--- a/app/src/main/res/drawable/list_item_background.xml
+++ b/app/src/main/res/drawable/list_item_background.xml
@@ -3,15 +3,8 @@
     xmlns:app="http://schemas.android.com/apk/res-auto">
     <item>
         <selector>
-            <item
-                android:state_activated="true"
-                app:state_multiselected="true">
-                <color android:color="?attr/colorControlActivated" />
-            </item>
-            <item
-                android:state_activated="true"
-                app:state_multiselected="false">
-                <color android:color="?attr/colorControlHighlight" />
+            <item app:state_multiselected="true" android:state_activated="true">
+                <color android:color="?attr/colorMultiselectActiveBackground" />
             </item>
         </selector>
     </item>
diff --git a/app/src/main/res/layout/app_list_dialog_fragment.xml b/app/src/main/res/layout/app_list_dialog_fragment.xml
index 50e795d5..c91161e6 100644
--- a/app/src/main/res/layout/app_list_dialog_fragment.xml
+++ b/app/src/main/res/layout/app_list_dialog_fragment.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>
 
@@ -28,14 +29,17 @@
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:indeterminate="true"
-            android:visibility="@{appData.isEmpty() ? View.VISIBLE : View.GONE}" />
+            android:visibility="@{appData.isEmpty() ? View.VISIBLE : View.GONE}"
+            tools:visibility="gone" />
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/app_list"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             app:items="@{appData}"
-            app:layout="@{@layout/app_list_item}" />
+            app:layout="@{@layout/app_list_item}"
+            tools:itemCount="10"
+            tools:listitem="@layout/app_list_item" />
 
     </FrameLayout>
 
diff --git a/app/src/main/res/layout/app_list_item.xml b/app/src/main/res/layout/app_list_item.xml
index 825b828b..382f2e82 100644
--- a/app/src/main/res/layout/app_list_item.xml
+++ b/app/src/main/res/layout/app_list_item.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:tools="http://schemas.android.com/tools">
 
     <data>
 
@@ -31,7 +32,8 @@
             android:id="@+id/app_icon"
             android:layout_width="32dp"
             android:layout_height="32dp"
-            android:src="@{item.icon}" />
+            android:src="@{item.icon}"
+            tools:src="@tools:sample/avatars" />
 
         <TextView
             android:id="@+id/app_name"
@@ -43,13 +45,15 @@
             android:maxLines="1"
             android:paddingEnd="8dp"
             android:paddingStart="8dp"
-            android:text="@{key}" />
+            android:text="@{key}"
+            tools:text="@tools:sample/full_names" />
 
         <CheckBox
             android:id="@+id/excluded_checkbox"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:checked="@={item.excludedFromTunnel}" />
+            android:checked="@={item.excludedFromTunnel}"
+            tools:checked="true" />
 
     </LinearLayout>
 </layout>
diff --git a/app/src/main/res/layout/tunnel_detail_fragment.xml b/app/src/main/res/layout/tunnel_detail_fragment.xml
index 23056ecf..40a79eb7 100644
--- a/app/src/main/res/layout/tunnel_detail_fragment.xml
+++ b/app/src/main/res/layout/tunnel_detail_fragment.xml
@@ -25,7 +25,7 @@
     <ScrollView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="?android:attr/colorBackground">
+        android:background="?attr/colorBackground">
 
         <LinearLayout
             android:layout_width="match_parent"
@@ -39,7 +39,7 @@
                 android:layout_marginEnd="8dp"
                 android:layout_marginStart="8dp"
                 android:layout_marginTop="8dp"
-                android:background="?android:attr/colorBackground"
+                android:background="?attr/colorBackground"
                 app:cardCornerRadius="4dp"
                 app:cardElevation="2dp"
                 app:contentPadding="8dp">
diff --git a/app/src/main/res/layout/tunnel_detail_peer.xml b/app/src/main/res/layout/tunnel_detail_peer.xml
index 0f7ae336..181a4a21 100644
--- a/app/src/main/res/layout/tunnel_detail_peer.xml
+++ b/app/src/main/res/layout/tunnel_detail_peer.xml
@@ -18,7 +18,7 @@
         android:layout_marginEnd="8dp"
         android:layout_marginStart="8dp"
         android:layout_marginTop="4dp"
-        android:background="?android:attr/colorBackground"
+        android:background="?attr/colorBackground"
         app:cardCornerRadius="4dp"
         app:cardElevation="2dp"
         app:contentPadding="8dp">
diff --git a/app/src/main/res/layout/tunnel_editor_fragment.xml b/app/src/main/res/layout/tunnel_editor_fragment.xml
index db91df2b..887b3bb7 100644
--- a/app/src/main/res/layout/tunnel_editor_fragment.xml
+++ b/app/src/main/res/layout/tunnel_editor_fragment.xml
@@ -28,7 +28,7 @@
         android:id="@+id/main_container"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="?android:attr/colorBackground">
+        android:background="?attr/colorBackground">
 
         <ScrollView
             android:layout_width="match_parent"
@@ -46,7 +46,7 @@
                     android:layout_marginEnd="8dp"
                     android:layout_marginStart="8dp"
                     android:layout_marginTop="8dp"
-                    android:background="?android:attr/colorBackground"
+                    android:background="?attr/colorBackground"
                     app:cardCornerRadius="4dp"
                     app:cardElevation="2dp"
                     app:contentPadding="8dp">
@@ -104,7 +104,7 @@
                         <Button
                             android:id="@+id/generate_private_key_button"
                             style="@style/Widget.AppCompat.Button.Borderless.Colored"
-                            android:layout_width="96dp"
+                            android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:layout_alignBottom="@id/private_key_text"
                             android:layout_alignParentEnd="true"
diff --git a/app/src/main/res/layout/tunnel_editor_peer.xml b/app/src/main/res/layout/tunnel_editor_peer.xml
index 175c174e..cf5d6286 100644
--- a/app/src/main/res/layout/tunnel_editor_peer.xml
+++ b/app/src/main/res/layout/tunnel_editor_peer.xml
@@ -24,7 +24,7 @@
         android:layout_marginEnd="8dp"
         android:layout_marginStart="8dp"
         android:layout_marginTop="4dp"
-        android:background="?android:attr/colorBackground"
+        android:background="?attr/colorBackground"
         app:cardCornerRadius="4dp"
         app:cardElevation="2dp"
         app:contentPadding="8dp">
diff --git a/app/src/main/res/layout/tunnel_list_fragment.xml b/app/src/main/res/layout/tunnel_list_fragment.xml
index 3a7c1c7a..4189fa5f 100644
--- a/app/src/main/res/layout/tunnel_list_fragment.xml
+++ b/app/src/main/res/layout/tunnel_list_fragment.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>
 
@@ -23,7 +24,7 @@
         android:id="@+id/main_container"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="?android:attr/colorBackground"
+        android:background="?attr/colorBackground"
         android:clipChildren="false">
 
         <androidx.recyclerview.widget.RecyclerView
@@ -36,14 +37,17 @@
             android:visibility="@{tunnels.size() > 0 ? android.view.View.VISIBLE : android.view.View.GONE}"
             app:configurationHandler="@{rowConfigurationHandler}"
             app:items="@{tunnels}"
-            app:layout="@{@layout/tunnel_list_item}" />
+            app:layout="@{@layout/tunnel_list_item}"
+            tools:listitem="@layout/tunnel_list_item"
+            tools:itemCount="12" />
 
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:orientation="vertical"
-            android:visibility="@{tunnels.size() == 0 ? android.view.View.VISIBLE : android.view.View.GONE}">
+            android:visibility="@{tunnels.size() == 0 ? android.view.View.VISIBLE : android.view.View.GONE}"
+            tools:visibility="gone">
 
             <androidx.appcompat.widget.AppCompatImageView
                 android:id="@+id/logo_placeholder"
@@ -51,7 +55,6 @@
                 android:layout_height="140dp"
                 android:layout_gravity="center"
                 android:layout_marginBottom="20dp"
-                android:layout_marginTop="-70dp"
                 android:alpha="0.3333333"
                 android:src="@mipmap/ic_launcher" />
 
diff --git a/app/src/main/res/layout/tunnel_list_item.xml b/app/src/main/res/layout/tunnel_list_item.xml
index 13e14fed..1cca9453 100644
--- a/app/src/main/res/layout/tunnel_list_item.xml
+++ b/app/src/main/res/layout/tunnel_list_item.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>
 
@@ -44,7 +45,8 @@
             android:layout_alignParentTop="true"
             android:ellipsize="end"
             android:maxLines="1"
-            android:text="@{key}" />
+            android:text="@{key}"
+            tools:text="@sample/interface_names.json/names/names/name" />
 
         <com.wireguard.android.widget.ToggleSwitch
             android:id="@+id/tunnel_switch"
@@ -54,6 +56,7 @@
             android:layout_alignParentEnd="true"
             android:nextFocusLeft="@+id/tunnel_list_item"
             app:checked="@{item.state == State.UP}"
-            app:onBeforeCheckedChanged="@{fragment::setTunnelState}" />
+            app:onBeforeCheckedChanged="@{fragment::setTunnelState}"
+            tools:checked="@sample/interface_names.json/names/checked/checked" />
     </com.wireguard.android.widget.MultiselectableRelativeLayout>
 </layout>
diff --git a/app/src/main/res/values-night/bools.xml b/app/src/main/res/values-night/bools.xml
new file mode 100644
index 00000000..b02fcc05
--- /dev/null
+++ b/app/src/main/res/values-night/bools.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <bool name="light_status_bar">false</bool>
+    <bool name="light_navigation_bar">false</bool>
+</resources>
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
index 247d8e33..db267d97 100644
--- a/app/src/main/res/values-night/colors.xml
+++ b/app/src/main/res/values-night/colors.xml
@@ -4,5 +4,18 @@
     <color name="fab_label_text_color">#000000</color>
     <color name="fab_label_background_color">#bbbbbb</color>
 
-    <color name="accent">#5e97f6</color>
+    <!-- Base palette -->
+    <color name="primary_color">#ff212121</color>
+    <color name="primary_light_color">#ff484848</color>
+    <color name="primary_dark_color">#ff000000</color>
+    <color name="secondary_color">#ff4285f4</color>
+    <color name="secondary_light_color">#ff80b4ff</color>
+    <color name="secondary_dark_color">#ff0059c1</color>
+    <color name="primary_text_color">#ffffffff</color>
+    <color name="secondary_text_color">#ffffffff</color>
+
+    <!-- Theme variables -->
+    <color name="list_multiselect_background">#1aeeeeee</color>
+    <color name="status_bar_color">#21242424</color>
+    <color name="navigation_bar_color">#aa242424</color>
 </resources>
diff --git a/app/src/main/res/values-v27/styles.xml b/app/src/main/res/values-v27/styles.xml
new file mode 100644
index 00000000..2f4b7107
--- /dev/null
+++ b/app/src/main/res/values-v27/styles.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
+        <item name="colorPrimary">@color/primary_color</item>
+        <item name="colorOnPrimary">@color/color_control_normal</item>
+        <item name="colorPrimaryDark">@color/primary_color</item>
+        <item name="colorPrimaryVariant">@color/primary_light_color</item>
+        <item name="colorSecondary">@color/secondary_color</item>
+        <item name="colorOnSecondary">@color/secondary_text_color</item>
+        <item name="colorSurface">@color/primary_color</item>
+        <item name="colorOnSurface">@color/color_control_normal</item>
+        <item name="colorBackground">@color/primary_color</item>
+        <item name="colorControlNormal">@color/color_control_normal</item>
+        <item name="colorMultiselectActiveBackground">@color/list_multiselect_background</item>
+        <item name="elevationOverlayColor">@color/primary_light_color</item>
+        <item name="elevationOverlayEnabled">true</item>
+        <item name="android:colorBackground">@color/primary_color</item>
+        <item name="android:navigationBarColor">@color/navigation_bar_color</item>
+        <item name="android:statusBarColor">@color/status_bar_color</item>
+        <item name="android:windowLightNavigationBar">@bool/light_navigation_bar</item>
+        <item name="android:windowLightStatusBar">@bool/light_status_bar</item>
+        <item name="android:windowBackground">@color/primary_color</item>
+        <item name="alertDialogTheme">@style/AppTheme.Dialog</item>
+        <item name="materialAlertDialogTheme">@style/AppTheme.Dialog</item>
+        <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents.ActionBar</item>
+    </style>
+</resources>
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index 86a86e63..68a8db07 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -2,5 +2,10 @@
 <resources>
     <declare-styleable name="Multiselected">
         <attr name="state_multiselected" format="boolean" />
+        <attr name="colorMultiselectActiveBackground" format="reference|color"/>
+    </declare-styleable>
+
+    <declare-styleable name="custom_color">
+        <attr name="colorBackground" format="reference|color"/>
     </declare-styleable>
 </resources>
diff --git a/app/src/main/res/values/bools.xml b/app/src/main/res/values/bools.xml
new file mode 100644
index 00000000..288f85a5
--- /dev/null
+++ b/app/src/main/res/values/bools.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <bool name="light_status_bar">true</bool>
+    <bool name="light_navigation_bar">true</bool>
+</resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index bc0fbdb0..9105fb22 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -1,8 +1,25 @@
 <?xml version="1.0" encoding="utf-8"?>
-<resources>
+<resources xmlns:tools="http://schemas.android.com/tools">
     <!-- TODO(msf): remove these 2 hard-coded colors and replace with theme colors -->
     <color name="fab_label_text_color">#ffffff</color>
     <color name="fab_label_background_color">#444444</color>
 
-    <color name="accent">#2196F3</color>
+    <!-- Base palette -->
+    <color name="primary_color">#ffffffff</color>
+    <color name="primary_light_color">#ffffffff</color>
+    <color name="primary_dark_color">#ffcccccc</color>
+    <color name="secondary_color">#ff1a73e8</color>
+    <color name="secondary_light_color">#ff1a73e8</color>
+    <color name="secondary_dark_color">#ff1a73e8</color>
+    <color name="primary_text_color">#ff000000</color>
+    <color name="secondary_text_color">#ffffffff</color>
+
+    <!-- Theme variables -->
+    <color name="color_control_normal">@color/primary_text_color</color>
+    <color name="status_bar_color">@color/primary_color</color>
+    <color name="navigation_bar_color">#aaffffff</color>
+    <color name="list_multiselect_background">#ffeeeeee</color>
+    <color name="mtrl_textinput_default_box_stroke_color" tools:override="true">@color/secondary_color</color>
+    <color name="white">#ffffffff</color>
+
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 7da1aa9c..9f55fd3e 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -1,8 +1,31 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
-        <item name="colorAccent">@color/accent</item>
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
+        <item name="colorPrimary">@color/primary_color</item>
+        <item name="colorOnPrimary">@color/color_control_normal</item>
+        <item name="colorPrimaryDark">@color/primary_color</item>
+        <item name="colorPrimaryVariant">@color/primary_light_color</item>
+        <item name="colorSecondary">@color/secondary_color</item>
+        <item name="colorOnSecondary">@color/secondary_text_color</item>
+        <item name="colorSurface">@color/primary_color</item>
+        <item name="colorOnSurface">@color/color_control_normal</item>
+        <item name="colorBackground">@color/primary_color</item>
+        <item name="colorMultiselectActiveBackground">@color/list_multiselect_background</item>
+        <item name="colorControlNormal">@color/color_control_normal</item>
+        <item name="elevationOverlayColor">@color/primary_light_color</item>
+        <item name="elevationOverlayEnabled">true</item>
+        <item name="android:statusBarColor">@color/status_bar_color</item>
+        <item name="android:windowBackground">@color/primary_color</item>
+        <item name="alertDialogTheme">@style/AppTheme.Dialog</item>
+        <item name="materialAlertDialogTheme">@style/AppTheme.Dialog</item>
+        <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents.ActionBar</item>
+    </style>
+
+    <style name="AppTheme.Dialog" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
+        <item name="colorPrimary">@color/secondary_color</item>
+        <item name="colorSecondary">@color/secondary_color</item>
+        <item name="android:windowBackground">?attr/colorBackground</item>
     </style>
 
     <style name="NoBackgroundTheme" parent="AppTheme">
diff --git a/build.gradle b/build.gradle
index 139cc650..95970ed0 100644
--- a/build.gradle
+++ b/build.gradle
@@ -21,7 +21,7 @@ task clean(type: Delete) {
 
 tasks {
     wrapper {
-        gradleVersion = "6.1"
+        gradleVersion = "6.1.1"
         distributionType = Wrapper.DistributionType.ALL
     }
 }
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
index 31a0802f..4e1cc9db 100644
--- a/gradle/wrapper/gradle-wrapper.properties
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists