UI improvements

This commit updates the UI to ensure that the previewer theme matches the card template editor theme.

CardTemplateEditor
- Set navigation bar color to use alternative background color
- Update background color attribute

TemplatePreviewerFragment
- Apply style to TabLayout for consistent appearance

AnkiDroid/src/main/java/com/ichi2/anki/CardTemplateEditor.kt

@@ -166,7 +166,7 @@ open class CardTemplateEditor : AnkiActivity(), DeckSelectionListener {
 
         slidingTabLayout = findViewById(R.id.sliding_tabs)
         viewPager = findViewById(R.id.card_template_editor_pager)
-        setNavigationBarColor(R.attr.appBarColor)
+        setNavigationBarColor(R.attr.alternativeBackgroundColor)
 
         // Disable the home icon
         enableToolbar()

AnkiDroid/src/main/java/com/ichi2/anki/previewer/TemplatePreviewerFragment.kt

@@ -125,6 +125,7 @@ class TemplatePreviewerFragment :
             if (!navBarNeedsScrim) {
                 window.navigationBarColor = ThemeUtils.getThemeAttrColor(this, R.attr.alternativeBackgroundColor)
             }
+            window.statusBarColor = ThemeUtils.getThemeAttrColor(this, R.attr.appBarColor)
         }
         if (inFragmentedActivity) {
             toolbar.setOnMenuItemClickListener(this)

AnkiDroid/src/main/res/layout/card_template_editor_item.xml

@@ -47,7 +47,7 @@
         android:layout_height="wrap_content"
         android:layout_gravity="bottom"
         style="@style/BottomNavigationViewStyle"
-        android:background="?attr/appBarColor"
+        android:background="?attr/alternativeBackgroundColor"
         app:menu="@menu/card_template_editor_navigation_bar_menu"
         />
 

AnkiDroid/src/main/res/layout/template_previewer.xml

@@ -22,7 +22,7 @@
             <include layout="@layout/toolbar" />
             <com.google.android.material.tabs.TabLayout
                 android:id="@+id/tab_layout"
-                android:background="@color/transparent"
+                style="@style/TabLayoutStyle"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 app:tabMode="scrollable"
@@ -32,7 +32,7 @@
         <com.google.android.material.card.MaterialCardView
             android:id="@+id/webview_container"
             android:layout_width="match_parent"
-            android:layout_marginHorizontal="8dp"
+            android:layout_margin="8dp"
             android:layout_height="0dp"
             app:layout_constraintTop_toBottomOf="@id/appbar"
             app:layout_constraintBottom_toTopOf="@id/show_answer"
@@ -50,7 +50,7 @@
         <com.google.android.material.button.MaterialButton
             android:id="@+id/show_answer"
             android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            android:layout_height="80dp"
             style="@style/Widget.Material3.Button.TextButton"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"

AnkiDroid/src/main/res/values/attrs.xml

@@ -171,6 +171,7 @@
          The latter is set by colorPrimary, but theme overlay can't use it,
          as it itself overrides colorPrimary, which is used by the view directly. -->
     <attr name="tabLayoutBackgroundColor" format="color"/>
+    <attr name="tabActiveIconColor" format="color"/>
 
     <attr name="checkMediaListBackground" format="color" />
     <attr name="checkMediaListForeground" format="color" />

AnkiDroid/src/main/res/values/styles.xml

@@ -140,10 +140,10 @@
         <item name="materialThemeOverlay">@style/ThemeOverlay.App.BottomNavigationView</item>
     </style>
     <style name="ThemeOverlay.App.BottomNavigationView" parent="">
-        <item name="colorSecondaryContainer">#fff</item> <!-- Selected item indicator -->
-        <item name="colorOnSecondaryContainer">?attr/tabLayoutBackgroundColor</item> <!-- Active icon -->
-        <item name="colorOnSurface">#fff</item> <!-- Active icon -->
-        <item name="colorOnSurfaceVariant">#fff</item> <!-- Inactive icon & label -->
+        <item name="colorSecondaryContainer">?attr/tabLayoutBackgroundColor</item> <!-- Selected item indicator -->
+        <item name="colorOnSecondaryContainer">?attr/tabActiveIconColor</item> <!-- Active icon -->
+        <item name="colorOnSurface">?attr/colorPrimary</item> <!-- Active icon -->
+        <item name="colorOnSurfaceVariant">?attr/colorPrimary</item> <!-- Inactive icon & label -->
         <item name="textAppearanceTitleSmall">@style/TextAppearance.Material3.TitleSmall</item>
         <item name="textAppearanceLabelLarge">@style/TextAppearance.Material3.LabelLarge</item>
     </style>

AnkiDroid/src/main/res/values/theme_black.xml

@@ -26,6 +26,7 @@
         <item name="actionModeBackground">@color/theme_black_primary_dark</item>
         <!-- Tab layout -->
         <item name="tabLayoutBackgroundColor">@color/theme_black_primary_dark</item>
+        <item name="tabActiveIconColor">@color/material_blue_500</item>
         <!-- Deck list colors and divider -->
         <item name="currentDeckBackground">@drawable/item_background_selected</item>
         <item name="currentDeckBackgroundColor">@color/theme_black_row_current</item>

AnkiDroid/src/main/res/values/theme_dark.xml

@@ -49,6 +49,7 @@
         <item name="actionModeBackground">@color/theme_dark_primary</item>
         <!-- Tab layout -->
         <item name="tabLayoutBackgroundColor">@color/theme_dark_primary</item>
+        <item name="tabActiveIconColor">@color/material_blue_500</item>
         <!-- Deck list colors and divider -->
         <item name="currentDeckBackground">@drawable/item_background_selected</item>
         <item name="currentDeckBackgroundColor">@color/theme_dark_row_current</item>

AnkiDroid/src/main/res/values/theme_light.xml

@@ -41,6 +41,7 @@
         <item name="actionModeBackground">?attr/colorPrimary</item>
         <!-- Tab layout -->
         <item name="tabLayoutBackgroundColor">?attr/colorPrimary</item>
+        <item name="tabActiveIconColor">@color/white</item>
         <!-- Deck list colors and divider -->
         <item name="currentDeckBackground">@drawable/item_background_selected</item>
         <item name="currentDeckBackgroundColor">#ececec</item>

AnkiDroid/src/main/res/values/theme_plain.xml

@@ -22,6 +22,7 @@
         <item name="actionModeBackground">@color/theme_plain_primary</item>
         <!-- Tab layout -->
         <item name="tabLayoutBackgroundColor">@color/theme_plain_primary</item>
+        <item name="tabActiveIconColor">@color/white</item>
         <!-- Reviewer colors -->
         <item name="topBarColor">@color/theme_plain_primary_light</item>
         <!-- Reviewer button drawables -->