From bf218decb4721f1f05ff49551b375db60cdb1683 Mon Sep 17 00:00:00 2001
From: Brayan Oliveira <69634269+brayandso@users.noreply.github.com>
Date: Wed, 13 Mar 2024 20:27:58 -0300
Subject: [PATCH] UI: add card design to the previewers

---
 AnkiDroid/src/main/res/layout/previewer.xml   | 22 +++++++++++----
 .../main/res/layout/template_previewer.xml    | 27 ++++++++++++++-----
 AnkiDroid/src/main/res/values/attrs.xml       |  1 +
 AnkiDroid/src/main/res/values/styles.xml      |  4 +++
 AnkiDroid/src/main/res/values/theme_black.xml |  1 +
 AnkiDroid/src/main/res/values/theme_dark.xml  |  1 +
 AnkiDroid/src/main/res/values/theme_light.xml |  1 +
 7 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/AnkiDroid/src/main/res/layout/previewer.xml b/AnkiDroid/src/main/res/layout/previewer.xml
index 300215183994..6d89b4529ec6 100644
--- a/AnkiDroid/src/main/res/layout/previewer.xml
+++ b/AnkiDroid/src/main/res/layout/previewer.xml
@@ -5,6 +5,8 @@
     android:id="@+id/root_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:fitsSystemWindows="true"
+    android:background="?attr/alternativeBackgroundColor"
     tools:context=".previewer.PreviewerFragment">
 
     <androidx.constraintlayout.widget.ConstraintLayout
@@ -25,18 +27,28 @@
                 app:navigationContentDescription="@string/abc_action_bar_up_description"
                 app:navigationIcon="?attr/homeAsUpIndicator"
                 app:menu="@menu/previewer"
+                android:background="?attr/alternativeBackgroundColor"
                 />
 
         </com.google.android.material.appbar.AppBarLayout>
 
-        <WebView
-            android:id="@+id/webview"
+        <com.google.android.material.card.MaterialCardView
+            android:id="@+id/webview_container"
             android:layout_width="match_parent"
+            android:layout_marginHorizontal="8dp"
             android:layout_height="0dp"
-            android:background="@color/transparent"
             app:layout_constraintTop_toBottomOf="@id/appbar"
             app:layout_constraintBottom_toTopOf="@id/slider"
-            />
+            style="@style/CardView.PreviewerStyle"
+            >
+
+            <WebView
+                android:id="@+id/webview"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                />
+
+        </com.google.android.material.card.MaterialCardView>
 
         <com.google.android.material.slider.Slider
             android:id="@+id/slider"
@@ -44,7 +56,7 @@
             android:layout_height="wrap_content"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/webview"
+            app:layout_constraintTop_toBottomOf="@id/webview_container"
 
             android:valueFrom="1"
             android:stepSize="1"
diff --git a/AnkiDroid/src/main/res/layout/template_previewer.xml b/AnkiDroid/src/main/res/layout/template_previewer.xml
index 47befb40261c..ba25dcdf272e 100644
--- a/AnkiDroid/src/main/res/layout/template_previewer.xml
+++ b/AnkiDroid/src/main/res/layout/template_previewer.xml
@@ -5,11 +5,14 @@
     android:id="@+id/root_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:fitsSystemWindows="true"
+    android:background="?attr/alternativeBackgroundColor"
     tools:context=".previewer.TemplatePreviewerFragment">
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        >
 
         <com.google.android.material.appbar.AppBarLayout
             android:id="@+id/appbar"
@@ -23,7 +26,8 @@
                 android:layout_height="wrap_content"
                 app:layout_constraintTop_toTopOf="parent"
                 app:navigationContentDescription="@string/abc_action_bar_up_description"
-                app:navigationIcon="?attr/homeAsUpIndicator">
+                app:navigationIcon="?attr/homeAsUpIndicator"
+                android:background="?attr/alternativeBackgroundColor">
 
                 <com.google.android.material.tabs.TabLayout
                     android:id="@+id/tab_layout"
@@ -37,14 +41,23 @@
 
         </com.google.android.material.appbar.AppBarLayout>
 
-        <WebView
-            android:id="@+id/webview"
+        <com.google.android.material.card.MaterialCardView
+            android:id="@+id/webview_container"
             android:layout_width="match_parent"
+            android:layout_marginHorizontal="8dp"
             android:layout_height="0dp"
-            android:background="@color/transparent"
             app:layout_constraintTop_toBottomOf="@id/appbar"
             app:layout_constraintBottom_toTopOf="@id/show_answer"
-            />
+            style="@style/CardView.PreviewerStyle"
+            >
+
+            <WebView
+                android:id="@+id/webview"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                />
+
+        </com.google.android.material.card.MaterialCardView>
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/show_answer"
@@ -54,7 +67,7 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/webview"
+            app:layout_constraintTop_toBottomOf="@id/webview_container"
             android:text="@string/show_answer"/>
 
     </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/AnkiDroid/src/main/res/values/attrs.xml b/AnkiDroid/src/main/res/values/attrs.xml
index be6edcb7c93c..965287cbab76 100644
--- a/AnkiDroid/src/main/res/values/attrs.xml
+++ b/AnkiDroid/src/main/res/values/attrs.xml
@@ -116,6 +116,7 @@
     <!-- Reviewer other colors -->
     <attr name="topBarColor" format="color"/>
     <attr name="maxTimerColor" format="color"/>
+    <attr name="alternativeBackgroundColor" format="color"/>
     <!-- Browser colors -->
     <attr name="suspendedColor" format="color"/>
     <attr name="selectedColor" format="color"/>
diff --git a/AnkiDroid/src/main/res/values/styles.xml b/AnkiDroid/src/main/res/values/styles.xml
index ae55d4c46eaa..80865a1c1f75 100644
--- a/AnkiDroid/src/main/res/values/styles.xml
+++ b/AnkiDroid/src/main/res/values/styles.xml
@@ -209,4 +209,8 @@
         <item name="buttonTint">@color/material_blue_500</item>
     </style>
 
+    <style name="CardView.PreviewerStyle" parent="Widget.Material3.CardView.Elevated">
+        <item name="android:elevation">0.8dp</item>
+    </style>
+
 </resources>
diff --git a/AnkiDroid/src/main/res/values/theme_black.xml b/AnkiDroid/src/main/res/values/theme_black.xml
index 63da016c345d..aca9646571e4 100644
--- a/AnkiDroid/src/main/res/values/theme_black.xml
+++ b/AnkiDroid/src/main/res/values/theme_black.xml
@@ -47,6 +47,7 @@
         <item name="hardButtonTextColor">@color/white</item>
         <item name="goodButtonTextColor">@color/material_green_400</item>
         <item name="easyButtonTextColor">@color/material_blue_700</item>
+        <item name="alternativeBackgroundColor">#000</item>
         <!-- Reviewer button drawables -->
         <item name="againButtonRef">@drawable/footer_button_all_black</item>
         <item name="hardButtonRef">@drawable/footer_button_all_black</item>
diff --git a/AnkiDroid/src/main/res/values/theme_dark.xml b/AnkiDroid/src/main/res/values/theme_dark.xml
index 72f06e3684e7..7c4414983185 100644
--- a/AnkiDroid/src/main/res/values/theme_dark.xml
+++ b/AnkiDroid/src/main/res/values/theme_dark.xml
@@ -69,6 +69,7 @@
         <item name="hardButtonTextColor">@color/white</item>
         <item name="goodButtonTextColor">@color/white</item>
         <item name="easyButtonTextColor">@color/white</item>
+        <item name="alternativeBackgroundColor">#2a2a2a</item>
         <!-- Reviewer button drawables -->
         <item name="showAnswerColor">@color/material_blue_grey_800</item>
         <item name="againButtonRef">@drawable/footer_button_again_dark</item>
diff --git a/AnkiDroid/src/main/res/values/theme_light.xml b/AnkiDroid/src/main/res/values/theme_light.xml
index 94b7df2e5b73..df122f6b00f5 100644
--- a/AnkiDroid/src/main/res/values/theme_light.xml
+++ b/AnkiDroid/src/main/res/values/theme_light.xml
@@ -61,6 +61,7 @@
         <item name="hardButtonTextColor">@color/white</item>
         <item name="goodButtonTextColor">@color/white</item>
         <item name="easyButtonTextColor">@color/white</item>
+        <item name="alternativeBackgroundColor">#f4f5f9</item>
         <!-- Reviewer button drawables -->
         <item name="showAnswerColor">@color/material_blue_grey_700</item>
         <item name="againButtonRef">@drawable/footer_button_again</item>