How to change Background Color of Default Display alert in xamarin.android?

Question

I want to change default background color of display alert,I have tried many questions in different sites Can anyone help me ?

Answer 1

If you do not want to use Rg.Plugins.Popup, In the android, you can achieve it with a AlertDialog and custom style.You can call it by DependencyService.

[assembly: Dependency(typeof(DeviceOpenAlertService))]
namespace App2.Droid
{
    class DeviceOpenAlertService : IDeviceOpenAlertService
    {
        public void Open()
        {

            var alert = new AlertDialog
                 .Builder(CrossCurrentActivity.Current.Activity, Resource.Style.MyDialogStyle)
                 .SetTitle("Alert Title")
                 .SetMessage("Do you want to close this application")
                 .SetPositiveButton("Yes", new myButtonClicklistener())
                 .SetNegativeButton("No", new myButtonClicklistener())
                 .Create();

            alert.Show();
        }
    }
}

Add following style to the styles.xml

 <style name="MyDialogStyle" parent="android:Theme.Material.Light.Dialog.NoActionBar">
    <!--Dialog Background Color-->
    <item name="android:colorBackground">#FF0000</item>

  </style>

  <style name="MyButtonsStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <!-- text color for the button -->
    <item name="android:textColor">#00ff00</item>
  </style>

Call it in the PCL.

 DependencyService.Get<IDeviceOpenAlertService>().Open();

Here is running GIF.

Answer 2

You can achieve this behaviour using Rg.Plugins.Popup to mimic the default display alert, this gives you more flexibility on how you want it to look.

First read the Getting Started, on Android you will need this in your OnCreate:

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);

    Rg.Plugins.Popup.Popup.Init(this, bundle); //Initialize the plugin

    Xamarin.Forms.Forms.Init(this, bundle);
    LoadApplication (new App ());
}

After this, you need to create a View that extends from PopupPage:

Code Behind:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class AlertPage : PopupPage
{
    public AlertPage()
    {
        InitializeComponent();
    }
}

And here is how the Xaml shoul look like (i tried to mimic the default alert as much as possible, you can tweek it to achieve the look you want):

<popup:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:popup="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             x:Class="BlankAppTest.Views.AlertPage">

    <popup:PopupPage.Animation>
        <animations:ScaleAnimation 
            PositionIn="Bottom"
            PositionOut="Bottom"
            ScaleIn="1.2"
            ScaleOut="0.8"
            DurationIn="400"
            DurationOut="300"
            EasingIn="SinOut"
            EasingOut="SinIn"
            HasBackgroundAnimation="True" />
    </popup:PopupPage.Animation>

    <StackLayout Margin="30,0,30,0" VerticalOptions="Center" 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 Text="Alert Title" TextColor="White" FontAttributes="Bold" Margin="20,20,20,0"></Label>
            <Label Grid.ColumnSpan="3" TextColor="White" Grid.Row="1" VerticalOptions="StartAndExpand" Text="This is a Custom Popup made it Rg.Plugins.Popup 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="White"></Label>
            <Label Margin="0,0,0,20" Grid.Column="1" FontAttributes="Bold" Grid.Row="2" VerticalOptions="End" Text="No" TextColor="White"></Label>
        </Grid>
    </StackLayout>

</popup:PopupPage>

And this will act as a normal page, you can add Gesture Recognizers to the labels, bind the colors so the background color be dinamic, it's all up to you.

The Default Alert:

The Final Result: