Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Full width button material dialogs

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? enter image description here

like image 841
Sweety Bertilla Avatar asked Mar 20 '15 13:03

Sweety Bertilla


2 Answers

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

Stacked Alert Dialog

like image 175
Andrey T Avatar answered Sep 30 '22 14:09

Andrey T


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

Dialog with stacked full-width buttons

like image 30
Farhan Avatar answered Sep 30 '22 14:09

Farhan