113

I changed the color of an AlertDialog title using this command

alert.setTitle( Html.fromHtml("<font color='#FF7F27'>Set IP Address</font>"));

But I want to change the color of the line that appear under the title; how can I do that ?

Note: I don't want to use a custom layout

screenshot of the desired effect

Machavity
  • 30,841
  • 27
  • 92
  • 100
  • 1
    is there a specific reason you are looking to avoid custom layouts? What additional stipulations do you have that need to be met? – Daniel Smith Mar 14 '13 at 10:24
  • 4
    You can actually change color of AlertDialog title by a very simple hack. http://stackoverflow.com/a/21401181/855884/ – MatrixDev Jan 28 '14 at 09:10

14 Answers14

135

Unfortunately, this is not a particularly simple task to accomplish. In my answer here, I detail how to adjust the color of a ListSeparator by just checking out the parent style used by Android, creating a new image, and creating a new style based on the original. Unfortunately, unlike with the ListSeparator's style, AlertDialog themes are internal, and therefore cannot be referenced as parent styles. There is no easy way to change that little blue line! Thus you need to resort to making custom dialogs.

If that just isn't your cup of tea... don't give up! I was very disturbed that there was no easy way to do this so I set up a little project on github for making quickly customized holo-style dialogs (assuming that the phone supports the Holo style). You can find the project here: https://github.com/danoz73/QustomDialog

It should easily enable going from boring blue to exciting orange!

enter image description here

The project is basically an example of using a custom dialog builder, and in the example I created a custom view that seemed to cater to the IP Address example you give in your original question.

With QustomDialog, in order to create a basic dialog (title, message) with a desired different color for the title or divider, you use the following code:

private String HALLOWEEN_ORANGE = "#FF7F27";

QustomDialogBuilder qustomDialogBuilder = new QustomDialogBuilder(v.getContext()).
    setTitle("Set IP Address").
    setTitleColor(HALLOWEEN_ORANGE).
    setDividerColor(HALLOWEEN_ORANGE).
    setMessage("You are now entering the 10th dimension.");
        
qustomDialogBuilder.show();

And in order to add a custom layout (say, to add the little IP address EditText), you add

setCustomView(R.layout.example_ip_address_layout, v.getContext())

to the builder with a layout that you have designed (the IP example can be found in the github). Many thanks to Joseph Earl and his answer here.

starball
  • 20,030
  • 7
  • 43
  • 238
Daniel Smith
  • 8,561
  • 3
  • 35
  • 58
  • 2
    why did android still not support changing the colors of alert dialog , should I use another dialog , or where is the problem? – Mohammed Subhi Sheikh Quroush Mar 08 '13 at 17:51
  • 3
    Android is probably trying to enforce consistent UI patterns, so that is likely why this is so challenging. This is the best solution I could create to help you. I hope you find it useful, or at least interesting and informative :) – Daniel Smith Mar 08 '13 at 17:58
  • 2
    hello Daniel. thanks for sharing your work. It is quite helpful. I am facing one problem in implementing this. Actually I want to add single item choice using `setItems` in this custom dialog. When I add the list it actually shifts the title below the list. How to resolve this problem. – Dory May 07 '13 at 06:17
  • I have noticed this issue but haven't yet addressed it :-/ I will update when I have looked into it, but am really busy right now. – Daniel Smith May 07 '13 at 06:33
  • 3
    well, maybe not quite yet... I'm facing the problem of the title below the list... sorry. – dentex Dec 10 '13 at 19:04
  • dialog.setTitle(Html.fromHtml(""+strtitle+"")); Resources resources = dialog.getContext().getResources(); int titleDividerId = resources.getIdentifier("titleDivider", "id", "android"); View titleDivider = dialog.getWindow().getDecorView().findViewById(titleDividerId); titleDivider.setBackgroundColor(Color.parseColor("#f68122")); – Intsab Haider Nov 11 '14 at 11:15
  • How to get custom view from the dialog ? – Dory Jan 09 '15 at 08:44
  • I'm also facing the problem of the title below the list after alertDialog.setAdapter() method – Shirish Herwade Mar 15 '16 at 11:57
  • 1
    @DanielSmith hi! Good work, but did you find the solution for 'title below the list' as mentioned above – Shirish Herwade Mar 15 '16 at 11:58
75

Divider color:

It is a hack a bit, but it works great for me and it works without any external library (at least on Android 4.4).

AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
builder.setTitle(R.string.dialog)
       .setIcon(R.drawable.ic)
       .setMessage(R.string.dialog_msg);
//The tricky part
Dialog d = builder.show();
int dividerId = d.getContext().getResources().getIdentifier("android:id/titleDivider", null, null);
View divider = d.findViewById(dividerId);
divider.setBackgroundColor(getResources().getColor(R.color.my_color));

You can find more dialog's ids in alert_dialog.xml file. Eg. android:id/alertTitle for changing title color...

UPDATE: Title color

Hack for changing title color:

int textViewId = d.getContext().getResources().getIdentifier("android:id/alertTitle", null, null);
TextView tv = (TextView) d.findViewById(textViewId);
tv.setTextColor(getResources().getColor(R.color.my_color));
maresmar
  • 1,449
  • 14
  • 21
  • Even on KitKat I run into `android.util.AndroidRuntimeException: requestFeature() must be called before adding content` here. – Konrad Reiche Aug 17 '14 at 12:38
  • I use this piece of code in many places in my app and everywhere it works fine. I only know about troubles with `DialogFragment` where title color hasn't id `android:id/alertTitle` but I didn't found the correct one. – maresmar Sep 11 '14 at 18:27
  • 2
    @platzhirsch, in my custom DialogFragment class, I avoided the requestFeature() problem by running the customization code in onStart(). You can access the dialog there using getDialog(). – arlomedia Sep 25 '14 at 20:00
  • @mmrmartin And do you have any ideas how to change the okay and cancel button background color? –  Nov 16 '14 at 13:30
  • 1
    Just as a heads up for future users that may come across this; for some reason, when I use just a generic Dialog I have to use "title" as my identifier name instead of "alertTitle". Not sure if this is mentioned anywhere else but just thought I would add my bit in hopes to help :P – zgc7009 Nov 26 '14 at 19:17
  • 4
    i'm getting `NullPointerException` at the `setTextColor()` – Abhi Jun 06 '16 at 10:12
21

check this is useful for you...

public void setCustomTitle (View customTitleView)

you get detail from following link.

http://developer.android.com/reference/android/app/AlertDialog.Builder.html#setCustomTitle%28android.view.View%29

CustomDialog.java

Dialog alert = new Dialog(this);
    alert.requestWindowFeature(Window.FEATURE_NO_TITLE);
    alert.setContentView(R.layout.title);
    TextView msg = (TextView)alert.findViewById(R.id.textView1);
    msg.setText("Hello Friends.\nIP address : 111.111.1.111");
    alert.show();

title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Set IP address"
    android:textColor="#ff0000"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="2dp"
    android:layout_marginTop="5dp"
    android:background="#00ff00"
    />
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#775500"
    android:textAppearance="?android:attr/textAppearanceLarge" />

enter image description here

Mr.Sandy
  • 4,299
  • 3
  • 31
  • 54
10

This will set the color for the title, icon, and divider. Bound to change with any new Android version.

public static void colorAlertDialogTitle(AlertDialog dialog, int color) {
    int dividerId = dialog.getContext().getResources().getIdentifier("android:id/titleDivider", null, null);
    if (dividerId != 0) {
        View divider = dialog.findViewById(dividerId);
        divider.setBackgroundColor(color);
    }

    int textViewId = dialog.getContext().getResources().getIdentifier("android:id/alertTitle", null, null);
    if (textViewId != 0) {
        TextView tv = (TextView) dialog.findViewById(textViewId);
        tv.setTextColor(color);
    }

    int iconId = dialog.getContext().getResources().getIdentifier("android:id/icon", null, null);
    if (iconId != 0) {
        ImageView icon = (ImageView) dialog.findViewById(iconId);
        icon.setColorFilter(color);
    }
}

Remember to call dialog.show() before calling this method.

Jared Rummler
  • 37,824
  • 19
  • 133
  • 148
9

By following the Dialog source code, I found that Title is generated in Class MidWindow by inflating the dialog_title_holo.xml layout. so the Id of mTitleView is title and the Id of divider is titleDivider.

we can access to Id of title simply by android.R.id.title.

and access to Id of titleDivider by Resources.getSystem().getIdentifier("titleDivider","id", "android");

The final code that i used to change the Direction of title and changing color is:

TextView mTitle = (TextView)findViewById(android.R.id.title);
mTitle.setGravity(Gravity.RIGHT|Gravity.CENTER_VERTICAL);
int x = Resources.getSystem().getIdentifier("titleDivider","id", "android");
View titleDivider = findViewById(x);
titleDivider.setBackgroundColor(getContext().getResources().getColor(R.color.some_color));
mrd abd
  • 828
  • 10
  • 19
  • This is a complete answer! Using android.R.id.title to change the title as well! – Andreas Lymbouras Oct 25 '14 at 14:41
  • Great answer, helped me a lot! I had to change: TextView mTitle = (TextView)findViewById(android.R.id.title); to: TextView mTitle = (TextView)dialog.findViewById(android.R.id.title); for this to work. – Jan Ziesse Dec 07 '14 at 11:13
  • This one worked for me, I'm using an Activity that inherits @android:style/Theme.Dialog. Could customize the divider line and the title color. +1 – voghDev Oct 16 '15 at 06:21
4

If you don't want a "library" for that, you can use this badly hack:

((ViewGroup)((ViewGroup)getDialog().getWindow().getDecorView()).getChildAt(0)) //ie LinearLayout containing all the dialog (title, titleDivider, content)
.getChildAt(1) // ie the view titleDivider
.setBackgroundColor(getResources().getColor(R.color.yourBeautifulColor));

This was tested and work on 4.x; not tested under, but if my memory is good it should work for 2.x and 3.x

  • This works great for 4.x i haven't tried the others either so i will give them a try and confirm it – kandroidj Jan 14 '14 at 16:31
  • getDialog() gives me an error "The method getDialog() is undefined for the type MainActivity" it asks me to create a method – Zen Mar 21 '14 at 20:34
4

In the class onCreateView, I put this:

Dialog d = getDialog();
    d.setTitle(Html.fromHtml("<font color='#EC407A'>About</font>"));
    int dividerId = d.getContext().getResources().getIdentifier("android:id/titleDivider", null, null);
    View divider = d.findViewById(dividerId);
    divider.setBackgroundColor(getResources().getColor(R.color.colorPrimary));

colorPrimary links to our colors.xml file that stores all the colors. Also d.setTitle provides a hacky way to set the title colour.

lg365
  • 493
  • 8
  • 11
2

Here is another solution (based on suggested answers) that handles the styling of the dialogs in one class without needing to worry about the state of the dialog when you change the style - dialog can be already shown or just initialized.

Usage example:

AlertDialog.Builder builder = new AlertDialog.Builder(context);
AlertDialog dialog = builder.create(); //or builder.show()
DialogViewDecorator.decorate(dialog, android.R.color.holo_red_light); //can also set the defaut color in the class

Implementation:

public class DialogViewDecorator {

private static final
@ColorRes int DEFAULT_TITLE_DIVIDER_COLOR = android.R.color.holo_orange_light;

public static void decorate(Dialog dialog) {
    decorate(dialog, DEFAULT_TITLE_DIVIDER_COLOR);
}

/**
 * Sets the title divider color when the view is shown by setting DialogInterface.OnShowListener on the dialog.
 * <p/>
 * If you want to do other things onShow be sure to extend OnDecoratedDialogShownListener(call super.show(...)!)
 * and call {@link #decorate(Dialog, int, OnDecoratedDialogShownListener)}.
 *
 * @param dialog
 * @param titleDividerColor
 */
public static void decorate(Dialog dialog, final int titleDividerColor) {
    decorate(dialog, titleDividerColor, new OnDecoratedDialogShownListener(titleDividerColor));
}

/**
 * Method for setting a extended implementation of OnDecoratedDialogShownListener. Don't forget to call super
 * or the titleDividerColor wont be applied!
 *
 * @param dialog
 * @param titleDividerColor
 * @param OnShowListener
 * @param <T>
 */
public static <T extends OnDecoratedDialogShownListener> void decorate(Dialog dialog, int titleDividerColor, T OnShowListener) {
    if (dialog == null || titleDividerColor <= 0) { return; }

    if (dialog.isShowing()) {
        setTitleDividerColor(dialog, titleDividerColor);
    } else {
        dialog.setOnShowListener(OnShowListener);
    }
}

private static void setTitleDividerColor(DialogInterface dialogInterface, int titleDividerColor) {
    try {
        Dialog dialog = (Dialog) dialogInterface;
        int dividerId = dialog.getContext().getResources().getIdentifier("android:id/titleDivider", null, null);
        View divider = dialog.findViewById(dividerId);
        if (divider != null) {
            divider.setBackgroundColor(dialog.getContext().getResources().getColor(titleDividerColor));
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}


public static class OnDecoratedDialogShownListener implements DialogInterface.OnShowListener {
    private int titleDividerColor;

    public OnDecoratedDialogShownListener() {
        this.titleDividerColor = DEFAULT_TITLE_DIVIDER_COLOR;
    }

    public OnDecoratedDialogShownListener(int titleDividerColor) {
        this.titleDividerColor = titleDividerColor;
    }

    @Override
    public void onShow(DialogInterface dialogInterface) {
        setTitleDividerColor(dialogInterface, titleDividerColor);
    }
}}
GMan
  • 546
  • 3
  • 13
1

If you are creating custom Layout for alert dialog

then you may add like this way easily to change the color

<LinearLayout
    android:id="@+id/DialogTitleBorder"
    android:layout_width="fill_parent"
    android:layout_height="1dip"
    android:layout_below="@id/mExitDialogDesc"
    android:background="#4BBAE3"            <!--change color easily -->
    >

</LinearLayout>
Pratik
  • 30,639
  • 18
  • 84
  • 159
Janmejoy
  • 2,721
  • 1
  • 20
  • 38
1

If your using custom title layout then you can use it like alertDialog.setCustomTitle(customTitle);

Example

On UI thread use dialog like:

 LayoutInflater inflater = LayoutInflater.from(getApplicationContext());
 View customTitle = inflater.inflate(R.layout.customtitlebar, null);
 AlertDialog.Builder d = new AlertDialog.Builder(this);
 d.setCustomTitle(customTitle);
 d.setMessage("Message");
 d.setNeutralButton("OK", null);
 d.show();

customtitlebar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#525f67">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_launcher"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" >
    </ImageView>

    <TextView
        android:id="@+id/customtitlebar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:textColor="#ffffff"
        android:text="Title Name"
        android:padding="3px"
        android:textStyle="bold" 
        android:layout_toRightOf="@id/icon"
        android:layout_alignParentTop="true"
        android:gravity="center_vertical"/>

     <ImageView
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#ff0000" 
        android:layout_below="@id/icon"><!-- This is line below the title -->
    </ImageView>

</RelativeLayout>
Kirill Smirnov
  • 131
  • 2
  • 12
Amol Wadekar
  • 886
  • 2
  • 14
  • 28
1
    ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.BLACK);

    String title = context.getString(R.string.agreement_popup_message);
    SpannableStringBuilder ssBuilder = new SpannableStringBuilder(title);
    ssBuilder.setSpan(
            foregroundColorSpan,
            0,
            title.length(),
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
    );

AlertDialog.Builder alertDialogBuilderUserInput = new AlertDialog.Builder(context);
alertDialogBuilderUserInput.setTitle(ssBuilder)
Samet ÖZTOPRAK
  • 3,112
  • 3
  • 32
  • 33
0

Continuing from this answer: https://stackoverflow.com/a/15285514/1865860, I forked the nice github repo from @daniel-smith and made some improvements:

  • improved example Activity
  • improved layouts
  • fixed setItems method
  • added dividers into items_list
  • dismiss dialogs on click
  • support for disabled items in setItems methods
  • listItem touch feedback
  • scrollable dialog message

link: https://github.com/dentex/QustomDialog

Community
  • 1
  • 1
dentex
  • 3,223
  • 4
  • 28
  • 47
0

Instead of using divider in dialog, use the view in the custom layout and set the layout as custom layout in dialog.

custom_popup.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

    <com.divago.view.TextViewMedium
        android:id="@+id/txtTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="AlertDialog"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <View
        android:id="@+id/border"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@id/txtTitle"
        android:background="@color/txt_dark_grey" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/border"
        android:scrollbars="vertical">

        <com.divago.view.TextViewRegular
            android:id="@+id/txtPopup"
            android:layout_margin="15dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </ScrollView>
</RelativeLayout>

activity.java:

public void showPopUp(String title, String text) {

    LayoutInflater inflater = getLayoutInflater();
    View alertLayout = inflater.inflate(R.layout.custom_popup, null);

    TextView txtContent = alertLayout.findViewById(R.id.txtPopup);
    txtContent.setText(text);

    TextView txtTitle = alertLayout.findViewById(R.id.txtTitle);
    txtTitle.setText(title);

    AlertDialog.Builder alert = new AlertDialog.Builder(this);
    alert.setView(alertLayout);
    alert.setCancelable(true);

    alert.setPositiveButton("Done", new DialogInterface.OnClickListener() {

        @Override
        public void onClick(DialogInterface dialog, int which) {
            dialog.dismiss();
        }
    });

    AlertDialog dialog = alert.create();
    dialog.show();
}
Pang
  • 9,564
  • 146
  • 81
  • 122
Velayutham M
  • 1,119
  • 14
  • 18
-1

In case you are using extending the dialog the use:

requestWindowFeature(Window.FEATURE_NO_TITLE);
Pang
  • 9,564
  • 146
  • 81
  • 122
Mahesh
  • 2,862
  • 2
  • 31
  • 41