tv: do theming

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

7 files changed, 76 insertions, 19 deletions

diff --git a/ui/src/main/AndroidManifest.xml b/ui/src/main/AndroidManifest.xml
index 90691841..56e7184c 100644
--- a/ui/src/main/AndroidManifest.xml
+++ b/ui/src/main/AndroidManifest.xml
@@ -55,7 +55,9 @@
             </intent-filter>
         </activity>
 
-        <activity android:name=".activity.TvMainActivity">
+        <activity
+            android:name=".activity.TvMainActivity"
+            android:theme="@style/TvTheme">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
diff --git a/ui/src/main/java/com/wireguard/android/activity/TvMainActivity.kt b/ui/src/main/java/com/wireguard/android/activity/TvMainActivity.kt
index 7b93f563..19e75d72 100644
--- a/ui/src/main/java/com/wireguard/android/activity/TvMainActivity.kt
+++ b/ui/src/main/java/com/wireguard/android/activity/TvMainActivity.kt
@@ -16,6 +16,7 @@ import androidx.core.view.forEach
 import androidx.databinding.DataBindingUtil
 import androidx.databinding.ObservableBoolean
 import androidx.lifecycle.lifecycleScope
+import androidx.recyclerview.widget.GridLayoutManager
 import com.wireguard.android.Application
 import com.wireguard.android.R
 import com.wireguard.android.backend.GoBackend
@@ -109,6 +110,7 @@ class TvMainActivity : AppCompatActivity() {
         binding.deleteButton.setOnClickListener {
             isDeleting.set(!isDeleting.get())
         }
+        binding.tunnelList.layoutManager = GridLayoutManager(this, 3)
         binding.executePendingBindings()
         setContentView(binding.root)
 
diff --git a/ui/src/main/res/drawable/ic_arrow_back.xml b/ui/src/main/res/drawable/ic_arrow_back.xml
new file mode 100644
index 00000000..2e58492a
--- /dev/null
+++ b/ui/src/main/res/drawable/ic_arrow_back.xml
@@ -0,0 +1,14 @@
+<!--
+  ~ Copyright © 2020 WireGuard LLC. All Rights Reserved.
+  ~ SPDX-License-Identifier: Apache-2.0
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19,11H7.83l4.88,-4.88c0.39,-0.39 0.39,-1.03 0,-1.42 -0.39,-0.39 -1.02,-0.39 -1.41,0l-6.59,6.59c-0.39,0.39 -0.39,1.02 0,1.41l6.59,6.59c0.39,0.39 1.02,0.39 1.41,0 0.39,-0.39 0.39,-1.02 0,-1.41L7.83,13H19c0.55,0 1,-0.45 1,-1s-0.45,-1 -1,-1z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/src/main/res/layout/tv_activity.xml b/ui/src/main/res/layout/tv_activity.xml
index 43470bfc..1a45769f 100644
--- a/ui/src/main/res/layout/tv_activity.xml
+++ b/ui/src/main/res/layout/tv_activity.xml
@@ -29,35 +29,36 @@
         <!-- TODO: Make into a neat square above the selection squares -->
         <ImageView
             android:id="@+id/banner_logo"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:src="@drawable/tv_logo_banner"
+            android:layout_width="240dp"
+            android:layout_height="50dp"
+            android:contentDescription="@string/app_name"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
+            app:layout_constraintTop_toTopOf="parent"
+            app:srcCompat="@drawable/tv_logo_banner" />
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/tunnel_list"
             android:layout_width="match_parent"
-            android:layout_height="match_parent"
+            android:layout_height="0dp"
             android:layout_marginTop="16dp"
             android:orientation="horizontal"
             app:configurationHandler="@{rowConfigurationHandler}"
             app:items="@{tunnels}"
             app:layout="@{@layout/tv_tunnel_list_item}"
-            app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
             app:layout_constraintBottom_toTopOf="@id/import_button"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/banner_logo"
             tools:itemCount="10"
             tools:listitem="@layout/tv_tunnel_list_item" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/import_button"
-            style="?attr/textAppearanceButton"
+            style="@style/Widget.MaterialComponents.Button"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_margin="16dp"
             android:text="@string/create_from_file"
+            android:textColor="?attr/colorOnPrimary"
             android:visibility="@{isDeleting ? View.GONE : View.VISIBLE}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent" />
@@ -65,16 +66,16 @@
         <!-- TODO: ic_action_generate is wrong. this should instead be a "return"/"back" icon -->
         <com.google.android.material.button.MaterialButton
             android:id="@+id/delete_button"
-            style="@style/Widget.MaterialComponents.Button.Icon"
+            style="@style/Widget.MaterialComponents.Button"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_margin="16dp"
             android:minWidth="0dp"
             android:visibility="@{tunnels.isEmpty &amp;&amp; !isDeleting ? View.GONE : View.VISIBLE}"
-            app:icon="@{isDeleting ? @drawable/ic_action_generate : @drawable/ic_action_delete}"
+            app:icon="@{isDeleting ? @drawable/ic_arrow_back : @drawable/ic_action_delete}"
             app:iconPadding="0dp"
+            app:iconTint="?attr/colorOnPrimary"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent" />
-
     </androidx.constraintlayout.widget.ConstraintLayout>
-</layout>
\ No newline at end of file
+</layout>
diff --git a/ui/src/main/res/layout/tv_tunnel_list_item.xml b/ui/src/main/res/layout/tv_tunnel_list_item.xml
index c5dd6c37..00edabc5 100644
--- a/ui/src/main/res/layout/tv_tunnel_list_item.xml
+++ b/ui/src/main/res/layout/tv_tunnel_list_item.xml
@@ -28,12 +28,10 @@
     <com.google.android.material.card.MaterialCardView
         android:layout_width="300dp"
         android:layout_height="150dp"
-        android:layout_marginStart="8dp"
-        android:layout_marginEnd="8dp"
-        android:backgroundTint="@{isDeleting ? @color/error_tag_color : item.state == State.UP ? @color/secondary_light_color : @color/primary_color}"
+        android:layout_margin="8dp"
+        android:backgroundTint="@{isDeleting ? @color/error_tag_color : item.state == State.UP ? @color/secondary_dark_color : @color/tv_card_background}"
         android:checkable="true"
-        android:focusable="true"
-        app:cardCornerRadius="12dp">
+        android:focusable="true">
 
         <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="match_parent"
@@ -42,15 +40,18 @@
 
             <com.google.android.material.textview.MaterialTextView
                 android:id="@+id/tunnel_name"
+                style="@style/TextAppearance.MaterialComponents.Headline4"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="@{item.name}"
+                android:textColor="?attr/colorOnPrimary"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toTopOf="parent"
                 tools:text="@sample/interface_names.json/names/names/name" />
 
             <com.google.android.material.textview.MaterialTextView
                 android:id="@+id/tunnel_transfer"
+                style="@style/TextAppearance.MaterialComponents.Body1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:visibility="@{isDeleting ? View.GONE : View.VISIBLE}"
@@ -66,7 +67,8 @@
                 android:text="@string/tv_delete"
                 android:visibility="@{isDeleting &amp;&amp; true ? View.VISIBLE : View.GONE}"
                 app:layout_constraintBottom_toBottomOf="parent"
-                app:layout_constraintStart_toStartOf="parent" />
+                app:layout_constraintStart_toStartOf="parent"
+                tools:visibility="gone" />
 
         </androidx.constraintlayout.widget.ConstraintLayout>
 
diff --git a/ui/src/main/res/values/tv_colors.xml b/ui/src/main/res/values/tv_colors.xml
new file mode 100644
index 00000000..b202d2a2
--- /dev/null
+++ b/ui/src/main/res/values/tv_colors.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="tv_primary_color">#ff212121</color>
+    <color name="tv_card_background">@color/tv_primary_color</color>
+</resources>
diff --git a/ui/src/main/res/values/tv_styles.xml b/ui/src/main/res/values/tv_styles.xml
new file mode 100644
index 00000000..c5477f6a
--- /dev/null
+++ b/ui/src/main/res/values/tv_styles.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <style name="TvTheme" parent="Theme.MaterialComponents.NoActionBar">
+        <item name="colorPrimary">@color/tv_primary_color</item>
+        <item name="colorOnPrimary">#fffafafa</item>
+        <item name="colorPrimaryDark">@color/tv_primary_color</item>
+        <item name="colorPrimaryVariant">#ff484848</item>
+        <item name="colorSecondary">#ff4285f4</item>
+        <item name="colorOnSecondary">#ff0059c1</item>
+        <item name="colorSurface">@color/tv_primary_color</item>
+        <item name="colorOnSurface">#fffafafa</item>
+        <item name="colorBackground">@color/tv_primary_color</item>
+        <item name="colorMultiselectActiveBackground">@color/list_multiselect_background</item>
+        <item name="colorControlNormal">#fffafafa</item>
+        <item name="elevationOverlayEnabled">false</item>
+        <item name="android:statusBarColor">@color/tv_primary_color</item>
+        <item name="android:windowBackground">@color/tv_primary_color</item>
+        <item name="alertDialogTheme">@style/AppTheme.Dialog</item>
+        <item name="materialAlertDialogTheme">@style/AppTheme.Dialog</item>
+        <item name="textInputStyle">@style/TextInputLayoutBase</item>
+        <item name="materialCardViewStyle">@style/TvTheme.MaterialCardView</item>
+    </style>
+
+    <style name="TvTheme.MaterialCardView" parent="Widget.MaterialComponents.CardView">
+        <item name="cornerRadius">4dp</item>
+        <item name="cardElevation">8dp</item>
+        <item name="contentPadding">8dp</item>
+        <item name="cardBackgroundColor">?attr/elevationOverlayColor</item>
+    </style>
+</resources>