How to customize the Title Section of a Dialog

Question

I have created a customized dialog and applied the layout xml to it. But the layout is always applied to the body of the dialog and never to the title section. All what I can do is to set the title of the dilaog programmatically using setTitle and add an icon using setFeatureDrawableResource. Please let me know how to customize the title section of a customized dialog?

Side Question: today when I accessed my stackoverflow account I found that, there are more than 200 points are deducted? any Idea why?

Java_Code:

reportDialog = new Dialog(MeetingPointFix.this);
            reportDialog.requestWindowFeature(Window.FEATURE_LEFT_ICON);
            reportDialog.setCancelable(false);
            LayoutInflater reportAlertDialogLayoutInflater = LayoutInflater.from(getApplicationContext());
            View reportAlertDialogInflatedView = reportAlertDialogLayoutInflater.inflate(R.layout.meetingpointfix_report_dialog, null);
            reportDialog.setContentView(reportAlertDialogInflatedView);

            int [] viewsRefsIds = {R.id.reportLocNameValue, R.id.reportLocLatValue, R.id.reportLocLngValue, R.id.reportTimeValue,
                    R.id.reportDateValue, R.id.reportImgTitleValue, R.id.reportImgPathValue
            };              
            reportDialog.setTitle(REPORT_ALERT_DIALOG_TITLE);
            reportDialog.setFeatureDrawableResource(Window.FEATURE_LEFT_ICON,R.drawable.reporticon01);

            TextView reportDialogMSG = (TextView) reportDialog.findViewById(R.id.reportDialogMessageValue);
            Button reportOkBtn = (Button) reportDialog.findViewById(R.id.reportOkBtnID);
            Button reportNavigateBtn = (Button) reportDialog.findViewById(R.id.reportNavigateBtnID);

What exactly you wanna customize in your title. Please be precise. — CodeWarrior, Jun 12 '14 at 07:22
you can use a style to remove the title from the dialog, then set it as you want in the layout xml: — Guy S, Jun 12 '14 at 07:22
@Elpharoh i have edited my answer belove..Please try it..I have tested it and its working — Wasim Ahmed, Jun 12 '14 at 07:51

score 3 · Answer 1 · answered Jun 12 '14 at 07:57

Yes , I agree that some times the default dialog title doesn'nt match the theme style of your app .

Luckily android provides you a way to update the title layout you just need to take care of these three lines of code while you are creating your dialog.

dialog.requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
dialog.setContentView(R.layout.test);
dialog.getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.dialog_title_test);

Make sure that the call to setContentView() occurs after requestWindowFeature() and before setFetureInt()

So , suppose for a dialog Fragment you can do that as

public class DialogTest extends DialogFragment{

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        Dialog dialog = super.onCreateDialog(savedInstanceState);
        dialog.requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
        dialog.setContentView(R.layout.test);
        dialog.getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.dialog_title_test);
        return dialog;
    }


}

Happy Coding ! :)

score 1 · Accepted Answer · answered Jun 12 '14 at 07:30

add the following to your styles xml file:

<style name="FullHeightDialog" parent="android:style/Theme.Dialog">
    <item name="android:windowNoTitle">true</item>
</style>

use this to create the dialog (modify as you wish and set your ids for buttons)

private void showDialog() {

    final Dialog dialog = new Dialog(this, R.style.FullHeightDialog);
    dialog.setContentView(R.layout.alert_dialog); //replace with your layout xml
    dialog.setCancelable(false);
    Button ignoreButton = (Button) dialog.findViewById(R.id.ignore_button);
    ignoreButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            dialog.dismiss();
        }
    });
    Button answerButton = (Button) dialog.findViewById(R.id.answer_button);
    answerButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {

            dialog.dismiss();
        }
    });
    dialog.show();

would you please tell me how to set the style xml to my layout — Amrmsmb, Jun 12 '14 at 07:35
add the FullHeightDialog style snippet in your project --> res folder --> values folder --> styles.xml file. when you create the dialog use : final Dialog dialog = new Dialog(YourActivty.this, R.style.FullHeightDialog); dialog.setContentView(R.layout.your_dialog_layout);. that should do it — Guy S, Jun 12 '14 at 07:40

score 1 · Answer 3 · answered Jun 12 '14 at 07:36

The easiest way would be to use this library. I read other answers in this post and wanted to add one like to the code similar to theirs. You can provide custom title bar in your layout file itself. See this code:

public void createDialogLanguage() {
    ListView listViewLanguage;
    final Dialog dialog = new Dialog(getActivity());
    dialog.getWindow().addFlags(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawableResource(
            android.R.color.transparent);
    dialog.setContentView(R.layout.dialog_language);
    dialog.show();

}

Please note this line:

dialog.getWindow().setBackgroundDrawableResource(
            android.R.color.transparent);

This causes your dialog border and title bar to be transparent. It is useful if you are setting custom background with border(mycase: rounded corners) to display appropriately. No edges visible.

score 0 · Answer 4 · answered Jun 12 '14 at 07:22

To customize completely your Dialog the best would be probably to extend it and create a custom Dialog.

This will give you all the freedom that you need, but of course you have to do more work.

public class MyDialog extends Dialog {

    public MyDialog(Context context) {
        super(context, android.R.style.Theme_Black_NoTitleBar);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setCanceledOnTouchOutside(false);
        setContentView(R.layout.my_dialog_layout);

        TextView title = (TextView) findViewById(R.id.my_dialog_title);
        title.setText(context.getString(R.string.my_dialog_title_text));

        findViewById(R.id.error_dialog_btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // do something
                MyDialog.this.dismiss();
            }
        });

        findViewById(R.id.success_dialog_btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // do something
                MyDialog.this.dismiss();
            }
        });
    }
}

thank you for answering. But I think the code you posted does not customize the title section?does it? — Amrmsmb, Jun 12 '14 at 07:34
It depends on your layout! You can build the my_dialog_layout.xml as you wish, so you can add titles, images and everything. This is the best (and only) way to customize completely a Dialog. :) — Enrichman, Jun 12 '14 at 07:38

Wasim Ahmed · Answer 5 · 2014-06-12T07:50:22.170

Try this, This will definitly solve youre problem

      AlertDialog.Builder builder = new AlertDialog.Builder(MeetingPointFix.this);


    builder.setCancelable(false);
    LayoutInflater reportAlertDialogLayoutInflater = LayoutInflater.from(getApplicationContext());
    View reportAlertDialogInflatedView = reportAlertDialogLayoutInflater.inflate(R.layout.meetingpointfix_report_dialog, null);
    builder.setView(reportAlertDialogInflatedView);

    int [] viewsRefsIds = {R.id.reportLocNameValue, R.id.reportLocLatValue,   R.id.reportLocLngValue, R.id.reportTimeValue,
            R.id.reportDateValue, R.id.reportImgTitleValue, R.id.reportImgPathValue
    };              

    builder.setFeatureDrawableResource(Window.FEATURE_LEFT_ICON,R.drawable.reporticon01);

    TextView reportDialogMSG = (TextView)     reportDialog.findViewById(R.id.reportDialogMessageValue);
    Button reportOkBtn = (Button) reportDialog.findViewById(R.id.reportOkBtnID);
    Button reportNavigateBtn = (Button) reportDialog.findViewById(R.id.reportNavigateBtnID);

reportDialog=builder.create();

thank you for answering. but it seems to me that, the code you posted is not different than the code i posted, which does not help customizing the title section — Amrmsmb, Jun 12 '14 at 07:36
now check..it will definitly solve your problem..i have tested this and its working.. All that you have to do is to completely customize the xml Layout including title bar — Wasim Ahmed, Jun 12 '14 at 07:52

score 0 · Answer 6 · edited May 23 '17 at 10:29

You need to create a custom AlertDialog for this:

public class CustomAlertDialogBuilder extends AlertDialog.Builder {

    private final Context mContext;
    private TextView mTitle;
    private ImageView mIcon;
    private TextView mMessage;

    public CustomAlertDialogBuilder(Context context) {

        super(context);
        mContext = context; 

        View customTitle = View.inflate(mContext, R.layout.dialog_title, null);
        mTitle = (TextView) customTitle.findViewById(R.id.alertTitle);
        mIcon = (ImageView) customTitle.findViewById(R.id.icon);
        setCustomTitle(customTitle);

    }

    @Override
    public CustomAlertDialogBuilder setTitle(int textResId) {
        mTitle.setText(textResId);
        return this;
    }
    @Override
    public CustomAlertDialogBuilder setTitle(CharSequence text) {
        mTitle.setText(text);
        return this;
    }

    @Override
    public CustomAlertDialogBuilder setIcon(int drawableResId) {
        mIcon.setImageResource(drawableResId);
        return this;
    }

    @Override
    public CustomAlertDialogBuilder setIcon(Drawable icon) {
        mIcon.setImageDrawable(icon);
        return this;
    }

}

You also need a custom layout:

res/layout/dialog_title.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/title_template"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:layout_marginTop="6dip"
        android:layout_marginBottom="9dip"
        android:layout_marginLeft="10dip"
        android:layout_marginRight="10dip">

        <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:paddingTop="6dip"
            android:paddingRight="10dip"
            android:src="@drawable/ic_dialog_alert" />

        <TextView
            android:id="@+id/alertTitle"
            style="@style/?android:attr/textAppearanceLarge"
            android:singleLine="true"
            android:ellipsize="end"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <ImageView android:id="@+id/titleDivider"
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:scaleType="fitXY"
        android:gravity="fill_horizontal"
        android:src="@drawable/divider_horizontal_bright" />

</LinearLayout>

Hope this helps.

You can find more info here: How to change theme for AlertDialog

FYI your StackOverflow account was created less than 24 hours ago, so it looks like you made a new account rather than accessing your original one.

How to customize the Title Section of a Dialog

6 Answers6