Change background of ProgressDialog

aha picture aha · Nov 12, 2012 · Viewed 49.2k times · Source

I am trying to change the background of a ProgressDialog. I searched the net and found various suggestions (like How to remove border from Dialog?), but I am unable to replace the actual background of the ProgressDialog. Instead I get another background (yellow) behind the dialog:

Styled Dialog

My style:

<style name="StyledDialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowBackground">@drawable/panel_background</item>
</style>

The code that launches the ProgressDialog:

ProgressDialog dialog = new ProgressDialog(this, R.style.StyledDialog);
dialog.setTitle("The title");
dialog.setMessage("The message.");
dialog.show();

The drawable is the same 9 patch that is included in the SDK, I just changed to color. I would greatly appreciate some hints what I am doing wrong.

Answer

aha picture aha · Nov 16, 2012

The comment of Aleks G (below the question) points in the right direction. The appearance of the dialog is defined by a separate style (android:alertDialogStyle). But one cannot apply the style directly to a ProgressDialog. Now, how do I get that yellow background?

Step 1: Define a theme that inherits from Theme.Dialog:

<style name="MyTheme" parent="@android:style/Theme.Dialog">
    <item name="android:alertDialogStyle">@style/CustomAlertDialogStyle</item>
    <item name="android:textColorPrimary">#000000</item>
</style>

There, you can define things like the background color for the whole window (yellow in the question), font colors etc. What's really important is the definition of android:alertDialogStyle. This style controls the appearance of the black area in the question.

Step 2: Define the CustomAlertDialogStyle:

<style name="CustomAlertDialogStyle">
    <item name="android:bottomBright">@color/yellow</item>
    <item name="android:bottomDark">@color/yellow</item>
    <item name="android:bottomMedium">@color/yellow</item>
    <item name="android:centerBright">@color/yellow</item>
    <item name="android:centerDark">@color/yellow</item>
    <item name="android:centerMedium">@color/yellow</item>
    <item name="android:fullBright">@color/yellow</item>
    <item name="android:fullDark">@color/yellow</item>
    <item name="android:topBright">@color/yellow</item>
    <item name="android:topDark">@color/yellow</item>
</style>

This sets the black area in the question to yellow.

Step 3: Apply MyTheme to the ProgressDialog, not CustomAlertDialogStyle:

ProgressDialog dialog = new ProgressDialog(this, R.style.MyTheme);

And here's the result:

Styled ProgressDialog

The same procedure works with AlertDialog (which is the parent class of ProgressDialog).