EN VI

Android - Inherit Maui.SplashTheme and customize it in MAUI app?

2024-03-15 23:00:09
How to Android - 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"
Answer

Login


Forgot Your Password?

Create Account


Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login