Styling titleDivider in Dialog

Question

I am wondering how it is possible to get rid of (or change color) titleDivider in Dialog. It is a blue line below dialog title shown on honeycomb+ devices.

Annoying titleDivider line

I guess this is relevant piece of layout from SDK, but since there is no style attribute I dont know how to style it. If i try with findViewById there is no android.R.id.titleDivider

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:fitsSystemWindows="true">
    <TextView android:id="@android:id/title" style="?android:attr/windowTitleStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="@android:dimen/alert_dialog_title_height"
        android:paddingLeft="16dip"
        android:paddingRight="16dip"
        android:gravity="center_vertical|left" />
    <View android:id="@+id/titleDivider"
            android:layout_width="match_parent"
            android:layout_height="2dip"
            android:background="@android:color/holo_blue_light" />
    <FrameLayout
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:foreground="?android:attr/windowContentOverlay">
        <FrameLayout android:id="@android:id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>
</LinearLayout>

I have tried to override dialogTitleDecorLayout which is only reference to dialog_title_holo.xml in my theme.xml, but without success. Error is:

error: Error: No resource found that matches the given name: attr 'dialogTitleDecorLayout'.

if you want to get rid of some part of default style, you must drop it completely, because it differs between devices and OS versions — Display Name, Dec 31 '13 at 08:03
You can always go with custom layout.. Design your custom layout and put it inn dailog — SweetWisher ツ, Dec 31 '13 at 08:18
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

score 23 · Answer 1 · edited Jan 17 '22 at 11:53

23

To get a reference to titleDivider of AlertDialog to change its color:

int divierId = dialog.getContext().getResources()
                .getIdentifier("android:id/titleDivider", null, null);
View divider = dialog.findViewById(divierId);
divider.setBackgroundColor(getResources().getColor(R.color.creamcolor));

edited Jan 17 '22 at 11:53

Rafael Tavares

5,678
4
32
48

answered Dec 31 '13 at 09:26

Sharad Mhaske

1,103
9
19

great answer, thanks alot for it. for the null pointer stuff, you need to check frameworks/base/core/res/res/layout/alert_dialog.xml file or just in HierarchyViewer, what are the exact resource names – Maciej Boguta Sep 10 '14 at 16:20
divider is null. same to dialog.findViewById(android.R.id.message) for custom message. why is that? – stackunderflow Oct 02 '14 at 06:00
Please be sure to have check for amazon kindle devices as it doesnt show blue line by default. – Sharad Mhaske Apr 30 '15 at 06:36
@test I also got a null pointer exception using this code snippet, but only on CyanogenMod roms. This code works perfectly on MIUI roms. Is there a global way to do the same?? – Ali_Waris Dec 29 '15 at 13:14
In case of using `DialogFragment`, `dialog` in this example is a `getDialog()`, NOT `getView()`. And always check `if (divider != null)`. – lomza Oct 11 '16 at 18:25

score 13 · Answer 2 · edited Jan 05 '18 at 14:37

You need to implement

myDialog = builder.create();
myDialog.setOnShowListener(new OnShowListenerMultiple());

//----------------------------
//Function to change the color of title and divider of AlertDialog
public static class OnShowListenerMultiple implements DialogInterface.OnShowListener {
    @Override
    public void onShow( DialogInterface dialog ) {
        if( !(dialog instanceof Dialog) )
            return;

        Dialog d = ((Dialog) dialog);
        final Resources resources = d.getContext().getResources();
        final int color = AppUtility.getColor( resources, R.color.defaultColor );

        try {
            int titleId = resources.getIdentifier( "android:id/alertTitle", null, null );
            TextView titleView = d.findViewById( titleId );
            titleView.setTextColor( color );
        }
        catch( Exception e ) {
            Log.e( "XXXXXX", "alertTitle could not change color" );
        }

        try {
            int divierId = resources.getIdentifier( "android:id/titleDivider", null, null );
            View divider = d.findViewById( divierId );
            divider.setBackgroundColor( color );
        }
        catch( Exception e ) {
            Log.e( "XXXXXX", "titleDivider could not change color" );
        }
    }
}

can you tell identifier for button dividers? – khunshan Mar 01 '15 at 15:10 — khunshan, Mar 01 '15 at 15:10

score 9 · Accepted Answer · answered Jun 11 '12 at 11:29

9

I solved the issue by using DialogFragment.STYLE_NO_TITLE theme and then faking title bar in dialog layout.

answered Jun 11 '12 at 11:29

Andraz

709
2
7
16

1

Great idea. I was struggling with the EXACT same problem until i found your answe. I was afraid i would have to copy the alert dialog layout and adjust it to my needs but your solution is much, much better. It's kind of silly how Android sometimes makes such simple tasks so hard... – Paul Dec 16 '12 at 16:26
@Andraz: I know you did this work a while ago but was hoping you could share more of the specifics. For example, how did you set the theme? Does that have app-wide effect or can you limit it to just the the dialogs? Also, how did you "fake" the title bar? – PeteH Sep 16 '13 at 18:11
setStyle(SherlockDialogFragment.STYLE_NO_TITLE, R.style.Your_Style) - I was using SherlockActionBar. Then I faked it with image (actually I wanted divider bar to be same color as title bar - orange). Dont really remember all details, quite long time ago. – Andraz Sep 18 '13 at 12:01

score 3 · Answer 4 · edited Jul 14 '16 at 05:54

Here is how I resolved that (thanks to http://joerg-richter.fuyosoft.com/?p=181 ):

MyDialogBuilder.class

public class MyDialogBuilder extends android.app.AlertDialog.Builder {

public MyDialogBuilder(Context context) {
    super(context);
}

@NonNull
@Override
public android.app.AlertDialog create() {
    final android.app.AlertDialog alertDialog = super.create();

    alertDialog.setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            int titleDividerId = getContext().getResources()
                    .getIdentifier("titleDivider", "id", "android");

            View titleDivider = alertDialog.findViewById(titleDividerId);
            if (titleDivider != null) {
                titleDivider.setBackgroundColor(getContext().getResources()
                        .getColor(R.color.alert_dialog_divider));
            }
        }
    });

    return alertDialog;
}
}

score 2 · Answer 5 · answered Jun 11 '12 at 10:55

2

use

 <View android:id="@+id/titleDivider"
        android:layout_width="match_parent"
        android:layout_height="2dip"
        android:background=#CC3232 />

answered Jun 11 '12 at 10:55

Pankaj Singhal

15,283
9
47
86

1

The xml i posted is part of android source, so i cannot really change it – Andraz Jun 11 '12 at 11:15

score 2 · Answer 6 · edited Jul 14 '16 at 06:02

2

Before write dialog.show(), write:

int divierId = dialog.getContext().getResources().getIdentifier("android:id/titleDivider",   null, null);
View divider = dialog.findViewById(divierId);
if(divider!=null){
divider.setBackgroundColor(getResources().getColor(R.color.transparent));}

In colors.xml:

<color name="transparent">#00000000</color>

edited Jul 14 '16 at 06:02

Kapil Rajput

11,429
9
50
65

answered Jan 25 '16 at 05:57

Luvnish Monga

7,072
3
23
30

This works for me but you should put a null pointer check on divider. This will not work on 5.0 and up. – Aaron Dancygier Jan 27 '16 at 00:47

score 1 · Answer 7 · answered Dec 31 '13 at 08:08

1

If you don't want to use Default style, don't use AlertDialog. You could go with Activity(with your custom layout) with Dialog Theme.

<activity android:theme="@android:style/Theme.Dialog">

answered Dec 31 '13 at 08:08

Seshu Vinay

13,560
9
60
109

score 0 · Answer 8 · answered Jul 04 '13 at 14:48

0

This one is tested on some 4.x devices:

    TextView title = (TextView)getWindow().getDecorView().findViewById(android.R.id.title);
    ((ViewGroup)title.getParent()).getChildAt(1).setVisibility(View.GONE);

answered Jul 04 '13 at 14:48

neworld

7,757
3
39
61

this yielded a NPE. Was the purpose to eliminate the title separator as per the original question? Or something else? – PeteH Sep 12 '13 at 09:26

score 0 · Answer 9 · answered Dec 17 '13 at 15:58

Your idea was correct. However, dialogTitleDecorLayout you were looking for is a private resource, so you can't access it in a normal way. But you still can access it using * syntax:

<item name="*android:dialogTitleDecorLayout">@layout/dialog_title</item>

Adding this to my own style and simply copying dialog_title.xml to my app and changing it slightly solved the problem in my case.

score 0 · Answer 10 · edited May 23 '17 at 11:47

0

Do you watchthis and there is a pcecial library for that, you can watch it there. And the last link will solve you problem

edited May 23 '17 at 11:47

Community

1
1

answered Dec 31 '13 at 08:09

Kostya Khuta

673
2
7
21

Kirk · Answer 11 · 2013-12-31T08:19:29.807

These is no way hiding it by control brotha.. I've had the same problem. only thing you can do is create your own CustomDialog

Here is a sample App

Download and have look at the design pattern, then it will be easy

Here is one Tutorial About making Custom Dialog

Important part is after creating the DialogObject don't set the Title by setTitle() create TextView inside your CustomLayout and call it from findViewByID() and set your title

score 0 · Answer 12 · answered Dec 31 '13 at 08:14

you can make a custom dialog like this:

    Dialog dialog = new Dialog(this);
    dialog.setContentView(R.layout.custom_dialog);
    Button okay = (Button) dialog.findViewById(R.id.button1);
    okay.setOnClickListener(new OnClickListener() {

         public void onClick(View arg0) {

           // do your work
         }
    });

Set a custom title in layout don't use android

     dialog.setTitle();

and your custom_dialog.xml

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:android1="http://schemas.android.com/apk/res/android"
   android:id="@+id/layout_root"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical"
   android:padding="10dp">

  <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textColor="#ffffff"
      android:textSize="40sp" 
      android:text="Hello"/>


    <Button
        android:id="@+id/button1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="150dp"
        android:text="OK" />

    </RelativeLayout>

score 0 · Answer 13 · answered Dec 31 '13 at 08:16

"Removing the blue line" if I guess correctly means dropping the border between the title of the dialog and it's body. That border come from the Holo theme, so it's not possible to drop it without using your custom layout.

Create a file named custom-dialog.xml with the following content (it's just an example..modify it as you want):

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

    <ImageView
        android:id="@+id/dialogTopImage"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.12"
        android:padding="10dp" />

    <LinearLayout
        android:id="@+id/dialogLine"
        android:layout_width="fill_parent"
        android:layout_height="3dp"
        android:background="@drawable/green_btn"
        android:orientation="vertical" />

    <TextView
        android:id="@+id/dialogText"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.32"
        android:padding="5dp"
        android:text=""
         />

    <LinearLayout
        android:id="@+id/general_dialog_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_marginBottom="5dp"
        android:layout_weight="0.11"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/dialogButton"
            android:layout_width="100dp"
            android:textSize="8pt"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:background="@drawable/green_btn"
            android:gravity="center"
            android:text="Ok" />

</LinearLayout>

As you see I'm using resources and stuff that won't be in your project, but you can remove them safely. The result in my case is more or less the following one, with an image at top that I'll programatically set in the code.

simple screenshot

To create the dialog then use something like:

private Dialog createAndShowCustomDialog(String message, Boolean positive, Drawable d, View.OnClickListener cl, String text1) {

    final Dialog dialog = new Dialog(this);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.setContentView(R.layout.general_dialog_layout);
    // BIND
    ImageView image = (ImageView) dialog.findViewById(R.id.dialogTopImage);
    TextView text = (TextView) dialog.findViewById(R.id.dialogText);
    Button button = (Button) dialog.findViewById(R.id.dialogButton);
    LinearLayout line = (LinearLayout) dialog.findViewById(R.id.dialogLine);

    // SET WIDTH AND HEIGHT
    DisplayMetrics displaymetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
    int width = (int) (displaymetrics.widthPixels * 0.85);
    int height = (int) (displaymetrics.heightPixels * 0.60);
    WindowManager.LayoutParams params = getWindow().getAttributes();
    params.width = width;
    dialog.getWindow().setLayout(width, height);


    // SET TEXTS
    text.setText(message);
    button.setText(text1);

    // SET IMAGE
    if (d == null) {
        image.setImageDrawable(getResources().getDrawable(R.drawable.font_error_red));
    } else {
        image.setImageDrawable(d);
    }

    // SET ACTION
    if (cl == null) {
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });
    } else {
        button.setOnClickListener(cl);
    }


    // SHOW
    dialog.show();
    return dialog;
}

score 0 · Answer 14 · answered Jan 25 '16 at 06:02

In colors.xml:

<color name="transparent">#00000000</color>

In dialog:

int divierId = dialog.getContext().getResources().getIdentifier("android:id/titleDivider",null, null);

View divider = d.findViewById(divierId); divider.setBackgroundColor(getResources().getColor(R.color.transparent));

lomza · Answer 15 · 2016-10-11T18:40:00.830

In order to hide the default blue line completely (assuming you're in DialogFragment):

    Dialog dialog = getDialog();
    if (dialog != null) {
        final int dividerId = dialog.getContext().getResources()
                .getIdentifier("android:id/titleDivider", null, null);
        View divider = dialog.findViewById(dividerId);
        if  (divider != null) {
            divider.setBackground(null);
        }
    }

Styling titleDivider in Dialog

15 Answers15

Linked

Related