Change background of ProgressDialog

Question

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:

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 1

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:

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

Answer 2

You can try my gist. It basicly sets a color filter on drawable.

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.ProgressBar;

public class ColoredProgressBar extends ProgressBar {
   public ColoredProgressBar(Context context) {
      super(context);
      if (!isInEditMode())
         init();
   }

   public ColoredProgressBar(Context context, AttributeSet attrs) {
      super(context, attrs);
      if (!isInEditMode())
         init();
   }

   public ColoredProgressBar(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
      if (!isInEditMode())
         init();
   }

   /**
    * Changes color.
    */
   private void init() {
      getIndeterminateDrawable().setColorFilter(Color.BLUE, android.graphics.PorterDuff.Mode.MULTIPLY);
   }
}