UI: add card design to the previewers

BrayanDSO · Mar 14, 2024 · bf218de · bf218de
1 parent 3d8e8c6
commit bf218de
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 12 deletions.
diff --git 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,26 +27,36 @@
                 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"
             android:layout_width="0dp"
             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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>