Search code examples
androidmauistyling

Inherit Maui.SplashTheme and customize it in MAUI app


I'm developing a MAUI app with .NET 8 targeting Android.

Everything works well with the default theme @style/Maui.SplashTheme in my MainActivity.cs.

But I need to edit the theme and add some configuration, because my DatePicker's dialog doesn't show well the dialog buttons (OK/Cancel):

enter image description here

Following this answer I created my own style.xml and set my color values, like this:

<?xml version="1.0" encoding="UTF-8" ?>
<resources> 
    <style name="MyTheme" parent="MainTheme.Base">  
        <item name="android:datePickerDialogTheme">@style/CustomDatePickerDialog</item>  
    </style> 

    <style name="CustomDatePickerDialog" parent="ThemeOverlay.AppCompat.Dialog">  
         <!--header background-->  
         <item name="colorAccent">#ff0000</item>  
         <!--header textcolor-->  
         <item name="android:textColorPrimaryInverse">#00ff00</item>  
         <!--body background-->  
         <item name="android:windowBackground">#0000ff</item>  
         <!--selected day-->  
         <item name="android:colorControlActivated">#ff1111</item>  
         <!--days of the month-->  
         <item name="android:textColorPrimary">#ffffff</item>  
         <!--days of the week-->  
         <item name="android:textColorSecondary">#33ff33</item>  
         <!--cancel&ok-->  
         <item name="android:textColor">#00ffff</item>  
    </style> 
</resources>

Now, in my MainActivity, If I replace...

Theme = "@style/Maui.SplashTheme"

With:

Theme = "@style/MyTheme"

...I can solve my problem and change every color of the dialog.

But now I have other issues in my app: I don't have the splash screen (and I want it) and also the Shell Flyout doesn't work as expected. I've also read here that I should keep the default theme in my MainActivity.cs.

So, my question is: is it possibile to override in any way the @style/Maui.SplashTheme theme with a custom theme (possibly in my style.xml file)? In this way I could keep everything of my SplashTheme.

I was expecting something like this (look at parent="Maui.SplashTheme"), but it is not working (I don't receive errors or warnings, but the theme simply doesn't work):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="Maui.SplashTheme">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:datePickerDialogTheme">@style/CustomDatePickerDialog</item>
    </style>

    <style name="CustomDatePickerDialog" parent="ThemeOverlay.AppCompat.Dialog">
        <!--header background-->
        <item name="colorAccent">#ff0000</item>
        <!--header textcolor-->
        <item name="android:textColorPrimaryInverse">#00ff00</item>
        <!--body background-->
        <item name="android:windowBackground">#0000ff</item>
        <!--selected day-->
        <item name="android:colorControlActivated">#ff1111</item>
        <!--days of the month-->
        <item name="android:textColorPrimary">#ffffff</item>
        <!--days of the week-->
        <item name="android:textColorSecondary">#33ff33</item>
        <!--cancel&ok-->
        <item name="android:textColor">#00ffff</item>
    </style>
</resources>

Solution

  • The base theme for new .NET MAUI applications on Android is "Maui.MainTheme". Update your styles.xml to look like this (I don't know if you still want/need the windowIsTranslucent entry):

        <style name="Maui.MainTheme" parent="Theme.MaterialComponents.DayNight">
            <item name="android:windowIsTranslucent">true</item>
            <item name="android:datePickerDialogTheme">@style/CustomDatePickerDialog</item>
        </style>
    
        <style name="CustomDatePickerDialog" parent="ThemeOverlay.AppCompat.Dialog">
            <!--header background-->
            <item name="colorAccent">#ff0000</item>
            <!--header textcolor-->
            <item name="android:textColorPrimaryInverse">#00ff00</item>
            <!--body background-->
            <item name="android:windowBackground">#0000ff</item>
            <!--selected day-->
            <item name="android:colorControlActivated">#ff1111</item>
            <!--days of the month-->
            <item name="android:textColorPrimary">#ffffff</item>
            <!--days of the week-->
            <item name="android:textColorSecondary">#33ff33</item>
            <!--cancel&ok-->
            <item name="android:textColor">#00ffff</item>
        </style>
    

    Your activity should use the default splash theme:

    Theme = "@style/Maui.SplashTheme"