Change android alert dialog background and text color from code in .NET8 MAUI

Question

I would like to change the default white background color on the android (API 34) alert dialogs (like the one what appers when the user taps on a normal Picker).
Its important that I would not like to use the styles.xml solution, I need a c# code that changes the colors programatically. Its because my application has multiple styles, so the alert dialog background color should change to black / white / blue / etc based on what the user desires.

Answer 1

Hello,

There is no such an API to change the background and button color in AlertDialog on MAUI.

It is recommended to use Popup to customize it. Please refer to Popup.

Firstly, create a content page then copy following xaml code and background code.

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiApp2.AertPopPage"
            >
    <StackLayout  WidthRequest="300" BackgroundColor="#121212">
        <Grid VerticalOptions="Fill">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="50"></ColumnDefinition>
                <ColumnDefinition Width="50"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Label x:Name="contentTitle" Text="Alert Title" TextColor="Red" FontAttributes="Bold" Margin="20,20,20,0"></Label>
            <Label x:Name="contentLabel" Grid.ColumnSpan="3" TextColor="Green" Grid.Row="1" VerticalOptions="StartAndExpand" Text="This is a Custom Popup made itPopup to mimic the Default Android Alert" Margin="20,0"></Label>
<Label Margin="0,0,0,20" Grid.Column="2" FontAttributes="Bold" Grid.Row="2" VerticalOptions="End" Text="Yes" TextColor="Blue">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                </Label.GestureRecognizers>
            </Label>
            <Label Margin="0,0,0,20" Grid.Column="1" FontAttributes="Bold" Grid.Row="2" VerticalOptions="End" Text="No" TextColor="Yellow">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"></TapGestureRecognizer>
                </Label.GestureRecognizers>


           </Label>
        </Grid>
    </StackLayout>
</toolkit:Popup>

Here is layout background code. I add TapGestureRecognizer for Yes/No button and you can transfer selection back to previous page.

using CommunityToolkit.Maui.Views;


namespace MauiApp2;


public partial class AertPopPage : Popup
{
    public AertPopPage(string title, string content)
    {
        InitializeComponent();


       contentTitle.Text = title;


       contentLabel.Text = content;    
    }


   private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        Close("Yes");
    }


   private void TapGestureRecognizer_Tapped_1(object sender, TappedEventArgs e)
    {
        Close("No");
    }
}

In the end, you can pop this alert by following code.

var popup = new AertPopPage("alert","test content");


var res=await  this.ShowPopupAsync(popup);

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.