Full width button material dialogs

Question

I am trying to find an example code to implement a material dialog with full width buttons as shown in the screenshot below.

Can someone help by sharing example code on how to replicate this design?

Answer 1

You could achieve that with using ONLY AppCompat, check my workaround:

Code

    import android.support.v7.app.AlertDialog;

    AlertDialog.Builder builder;
    builder = new AlertDialog.Builder(context, R.style.StackedAlertDialogStyle);
    builder.setTitle("Title");
    builder.setMessage("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dignissim purus eget gravida mollis. Integer in auctor turpis. Morbi auctor, diam eget vestibulum congue, quam arcu pulvinar dui, blandit egestas erat enim non ligula." +
            " Nunc quis laoreet libero. Aliquam consectetur nibh eu arcu eleifend efficitur.");
    builder.setPositiveButton("Positive Button", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
        }
    });
    builder.setNeutralButton("Neutral Button", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
        }
    });
    builder.setNegativeButton("Cancel Button", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
        }
    });
    AlertDialog alertDialog = builder.create();
    alertDialog.show();
        try{
            final Button button = alertDialog.getButton(AlertDialog.BUTTON_POSITIVE);
            LinearLayout linearLayout = (LinearLayout) button.getParent();
            linearLayout.setOrientation(LinearLayout.VERTICAL);
        } catch(Exception ex){
            //ignore it
        }

Style

<style name="StackedAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="buttonBarButtonStyle">@style/StackedButtonBarButtonStyle</item>
</style>

<style name="StackedButtonBarButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:layout_gravity">right</item>
</style>

Result

Answer 2

Here's how i am doing in my app using ONLY AppCompat library You can any number of options

String[] mOptionsArray = new String[]{"Option 1", "Option 2"};
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    AlertDialog.Builder builder = new AlertDialog.Builder(getContext());
    builder.setTitle("Cool! title");
    builder.setMessage("Cool! message");

    LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.dialog_list_view, null);
    ListView listView = (ListView) view.findViewById(R.id.list_view);
    listView.setAdapter(new ArrayAdapter<>(
            getContext(),
            R.layout.dialog_list_item,
            R.id.button,
            mOptionsArray
    ));
    listView.setDivider(null);
    listView.setOnItemClickListener(mOnItemClickListener);
    builder.setView(view);

    return builder.create();
}

dialog_list_view.xml

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="8dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" />

dialog_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button"
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@null"
    android:clickable="false"
    android:focusable="false"
    android:gravity="right|center_vertical"
    android:paddingRight="8dp"
    android:paddingLeft="8dp"
    android:text="Button"
    android:textAllCaps="true" />

Ref: http://www.materialdoc.com/flat-button/, https://material.io/guidelines/components/dialogs.html#dialogs-specs, https://material.io/guidelines/components/buttons.html#buttons-style

Answer 3

It is automatic if buttons have long message text.

new MaterialAlertDialogBuilder(this)
                .setTitle("Title")
                .setMessage(R.string.lorem_inpsum)
                .setPositiveButton(getResources().getString(R.string.long_positive), null)
                .setNegativeButton(getResources().getString(R.string.long_negative), null)
                .show();