Search code examples
androidandroid-alertdialogcustom-titlebar

AlertDialog setCustomTitle styling to match standard AlertDialog title


I'm working on an Android app and I have an AlertDialog subclass. I would like to put 2 ImageButtons on the right side of the title area of the dialog (similar to an the ActionBar in an Activity). I'm using setCustomTitle() to do this, which replaces the title area with a custom view of my own creation. This works fine, but the styling of my custom title area is not the same as the standard title styling (height, color, separator, etc).

My question is: with the understanding that styling varies by OS version and manufacturer, how can I style my custom title in the dialog so that it will match the standard title styling for other AlertDialogs?

Here is an image of anAlertDialog with standard styling (this is from ICS, but I want to be able to match any variant -- not this particular style) enter image description here

And here is an image of an AlertDialog with custom title and buttons (note how the title height and color don't match the standard dialog) enter image description here

EDIT: I can't just add the ImageButtons to the standard title view, because I don't have access to it. If you know of a (reliable, non-hack) method for me to add buttons to the standard title area, I would accept that as well.


Solution

  • Given that there is new interest in this question, let me elaborate about how I "solved" this.

    First, I use ActionBarSherlock in my app. This is not necessary, I suppose, though it helps a lot because the styles and themes defined in the ABS project allow me to mimic the Holo theme on pre-ICS devices, which provides a consistent experience in the app.

    Second, my "dialog" is no longer a dialog -- it's an activity themed as a dialog. This makes manipulation of the view hierarchy simpler, because I have complete control. So adding buttons to the title area is now trivial.

    Here are the screenshots (2.2 device and 4.1 emulator). Note that the only significant styling difference is the EditText, which I have chosen not to address.

    2.2 device 4.1 emulator

    Here is my onCreate in my dialog activity:

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
    
        setContentView(R.layout.activity_tag);
        setTitle(R.string.tag_dialog_title);
    
        View sherlockTitle = findViewById(android.R.id.title);
        if (sherlockTitle != null) {
            sherlockTitle.setVisibility(View.GONE);
        }
        View sherlockDivider = findViewById(R.id.abs__titleDivider);
        if (sherlockDivider != null) {
            sherlockDivider.setVisibility(View.GONE);
        }
    
        // setup custom title area
        final View titleArea = findViewById(R.id.dialog_custom_title_area);
        if (titleArea != null) {
            titleArea.setVisibility(View.VISIBLE);
    
            TextView titleView = (TextView) titleArea.findViewById(R.id.custom_title);
            if (titleView != null) {
                titleView.setText(R.string.tag_dialog_title);
            }
    
            ImageButton cancelBtn = (ImageButton) titleArea.findViewById(R.id.cancel_btn);
            cancelBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    finish();
                }
            });
            cancelBtn.setVisibility(View.VISIBLE);
    
            ImageButton okBtn = (ImageButton) titleArea.findViewById(R.id.ok_btn);
            okBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // do stuff here
                    finish();
                }
            });
            okBtn.setVisibility(View.VISIBLE);
        }
    }
    

    And here is the relevant layout for the activity:

    <LinearLayout
        android:orientation="vertical"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent">
        <LinearLayout
            android:id="@+id/dialog_custom_title_area"
            android:orientation="vertical"
            android:fitsSystemWindows="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingRight="10dp">
                <TextView
                    android:id="@+id/custom_title" style="?android:attr/windowTitleStyle"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:minHeight="@dimen/abs__alert_dialog_title_height"
                    android:paddingLeft="16dip"
                    android:paddingRight="16dip"
                    android:textColor="#ffffff"
                    android:gravity="center_vertical|left" />
    
                <ImageButton
                    android:id="@+id/ok_btn"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:minWidth="@dimen/abs__action_button_min_width"
                    android:minHeight="@dimen/abs__alert_dialog_title_height"
                    android:scaleType="center"
                    android:src="@drawable/ic_action_accept"
                    android:background="@drawable/abs__item_background_holo_dark"
                    android:visibility="visible"
                    android:layout_gravity="center_vertical"
                    android:contentDescription="@string/acc_done"/>
    
                <ImageButton
                    android:id="@+id/cancel_btn"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:minWidth="@dimen/abs__action_button_min_width"
                    android:minHeight="@dimen/abs__alert_dialog_title_height"
                    android:scaleType="center"
                    android:src="@drawable/ic_action_cancel"
                    android:background="@drawable/abs__item_background_holo_dark"
                    android:visibility="visible"
                    android:layout_gravity="center_vertical"
                    android:contentDescription="@string/acc_cancel"
                    />
            </LinearLayout>
            <View
                android:id="@+id/dialog_title_divider"
                android:layout_width="fill_parent"
                android:layout_height="2dip"
                android:background="@color/abs__holo_blue_light" />
        </LinearLayout>
    
        <RelativeLayout
            android:id="@+id/list_suggestions_layout"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent">
    
            <!-- this is where the main dialog area is laid out -->
    
        </RelativeLayout>
    
    </LinearLayout>
    

    And finally, in my AndroidManifext.xml, here is how I define my TagActivity:

    <activity 
        android:icon="@drawable/ic_home" 
        android:name=".activity.TagActivity" 
        android:theme="@style/Theme.Sherlock.Dialog"/>