Merge pull request #16103 from redstar504/Brayden-PickerAndroid

Use a popup theme to style the picker on Android
Expensify · Mar 22, 2023 · 7393910 · 7393910
2 parents e9602d0 + 3a6bec0
commit 7393910
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 0 deletions.
diff --git a/android/app/src/main/res/drawable/alert_background.xml b/android/app/src/main/res/drawable/alert_background.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+    android:insetLeft="16dp"
+    android:insetTop="16dp"
+    android:insetRight="16dp"
+    android:insetBottom="16dp">
+    <shape android:shape="rectangle">
+        <corners android:radius="@dimen/dialog_radius" />
+        <solid android:color="@color/card_highlight_bg" />
+    </shape>
+</inset>
diff --git a/android/app/src/main/res/drawable/datepicker_background.xml b/android/app/src/main/res/drawable/datepicker_background.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/card_alternate_bg" />
+    <corners android:radius="@dimen/dialog_radius" />
+</shape>
diff --git a/android/app/src/main/res/drawable/picker_background.xml b/android/app/src/main/res/drawable/picker_background.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/card_highlight_bg" />
+    <corners android:radius="@dimen/dialog_radius" />
+</shape>
diff --git a/android/app/src/main/res/font/expneuebold.otf b/android/app/src/main/res/font/expneuebold.otf
diff --git a/android/app/src/main/res/font/expneueregular.otf b/android/app/src/main/res/font/expneueregular.otf
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
@@ -4,4 +4,6 @@
     <color name="accent">#03D47C</color>
     <color name="dark">#0b1b34</color>
     <color name="gray4">#7D8B8F</color>
+    <color name="card_highlight_bg">#07271F</color>
+    <color name="card_alternate_bg">#1A3D32</color>
 </resources>
diff --git a/android/app/src/main/res/values/dimen.xml b/android/app/src/main/res/values/dimen.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="dialog_radius">16dp</dimen>
+    <dimen name="spinner_font_size">16dp</dimen>
+</resources>
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
@@ -9,6 +9,10 @@
         <item name="android:statusBarColor">#061B09</item>
         <item name="colorAccent">@color/accent</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+        <item name="popupTheme">@style/AppTheme.Popup</item>
+        <item name="android:spinnerDropDownItemStyle">@style/TextViewSpinnerDropDownItem</item>
+        <item name="android:datePickerDialogTheme">@style/DatePickerDialogTheme</item>
+        <item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
     </style>
 
     <!-- Themes unique to the boot splash page -->
@@ -18,4 +22,49 @@
         <item name="android:fitsSystemWindows">true</item>
     </style>
 
+    <!-- Themes used by the Picker -->
+    <style name="AppTheme.Popup" parent="Base.ThemeOverlay.AppCompat">
+        <item name="colorBackgroundFloating">@null</item>
+        <item name="android:background">@drawable/picker_background</item>
+        <item name="android:textColor">@color/white</item>
+    </style>
+
+    <style name="TextViewSpinnerDropDownItem" parent="Widget.AppCompat.DropDownItem.Spinner">
+        <item name="android:textColor">@color/white</item>
+        <item name="android:textSize">@dimen/spinner_font_size</item>
+        <item name="android:fontFamily">@font/expneuebold</item>
+    </style>
+
+    <!-- Theme used by the DatePicker dialog -->
+    <style name="DatePickerDialogTheme" parent="Theme.AppCompat.Dialog">
+        <item name="android:windowBackground">@drawable/datepicker_background</item>
+        <item name="android:datePickerStyle">@style/DatePickerStyle</item>
+        <item name="android:fontFamily">@font/expneuebold</item>
+        <item name="colorAccent">@color/accent</item>
+    </style>
+
+    <style name="DatePickerStyle" parent="android:Widget.Material.DatePicker">
+        <item name="android:headerBackground">@color/card_highlight_bg</item> <!-- header background color -->
+    </style>
+
+    <!-- Theme used by the Alert dialog -->
+    <style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
+        <item name="android:windowBackground">@drawable/alert_background</item>
+        <item name="android:textAppearanceSmall">@style/AlertTextAppearanceSmall</item>
+        <item name="android:textAppearanceMedium">@style/AlertTextAppearanceMedium</item>
+        <item name="android:textAppearanceLarge">@style/AlertTextAppearanceLarge</item>
+        <item name="colorAccent">@color/accent</item>
+    </style>
+
+    <style name="AlertTextAppearanceSmall" parent="TextAppearance.AppCompat.Small">
+        <item name="android:fontFamily">@font/expneueregular</item>
+    </style>
+
+    <style name="AlertTextAppearanceMedium" parent="TextAppearance.AppCompat.Medium">
+        <item name="android:fontFamily">@font/expneueregular</item>
+    </style>
+
+    <style name="AlertTextAppearanceLarge" parent="TextAppearance.AppCompat.Large">
+        <item name="android:fontFamily">@font/expneuebold</item>
+    </style>
 </resources>