Full Width Button Material Dialogs

Question

I am trying to find sample code for implementing a material dialog box with full-width buttons, as shown in the screenshot below.

Can anyone help by sharing an example code on how to reproduce this design?

Answer 1

I use this and it works great for me:

https://github.com/afollestad/material-dialogs

Here is a demo: https://play.google.com/store/apps/details?id=com.afollestad.materialdialogssample (including buttons on the stack)

Answer 2

You can achieve this with AppCompat ONLY, check out my workaround:

The 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 3

Here, as I work in my application, using the AppCompat library ONLY, you can select 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" /> 

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