Dialog Buttons With Long Text Not Wrapping / Squeezed Out - Material Theme On Android 5.0 Lollipop

While optimizing an app for material theme on lollipop, I'm encountering this annoying problem: Whenever there is long text on dialog buttons, that doesn't fit the button bar width

Solution 1:

This could be fixed with using stacked buttons instead of row buttons. Here my workaround how it could be achieved with using AppCompat lib :

Code import android.support.v7.app.AlertDialog;

    AlertDialog.Builder builder;
    builder = newAlertDialog.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", newDialogInterface.OnClickListener() {
        @OverridepublicvoidonClick(DialogInterface dialog, int which) {
        }
    });
    builder.setNeutralButton("Neutral Button", newDialogInterface.OnClickListener() {
        @OverridepublicvoidonClick(DialogInterface dialog, int which) {
        }
    });
    builder.setNegativeButton("Cancel Button", newDialogInterface.OnClickListener() {
        @OverridepublicvoidonClick(DialogInterface dialog, int which) {
        }
    });
    AlertDialogalertDialog= builder.create();
    alertDialog.show();
        try{
            finalButtonbutton= alertDialog.getButton(AlertDialog.BUTTON_POSITIVE);
            LinearLayoutlinearLayout= (LinearLayout) button.getParent();
            linearLayout.setOrientation(LinearLayout.VERTICAL);
        } catch(Exception ex){
            //ignore it
        }

Style

<stylename="StackedAlertDialogStyle"parent="Theme.AppCompat.Light.Dialog.Alert"><itemname="buttonBarButtonStyle">@style/StackedButtonBarButtonStyle</item></style><stylename="StackedButtonBarButtonStyle"parent="Widget.AppCompat.Button.ButtonBar.AlertDialog"><itemname="android:layout_gravity">right</item></style>

Result

Solution 2:

Following up - Since I'm not able to post more than two links due to my beginners reputation, I have to post an answer to my question instead of editing it.

Below is how I tried to style the buttons using buttonBarStyle and buttonBarButtonStyle to achieve any improvement - see the results here:

unfortunately those are obviously not desirable solutions.

<resources><stylename="AppBaseTheme"parent="android:Theme.Material.Light"><!-- AlertDialog Style override in order to try to fix non line breaking buttons --><itemname="android:alertDialogTheme">@style/CustomAlertDialogStyle</item></style><stylename="CustomAlertDialogStyle"parent="android:Theme.Material.Light.Dialog.Alert"><itemname="android:buttonBarButtonStyle">@style/CustomButtonBarButtonStyle</item><itemname="android:buttonBarStyle">@style/CustomButtonBarStyle</item></style><stylename="CustomButtonBarStyle"parent="@android:style/Widget.Material.Light.ButtonBar.AlertDialog"><!-- Making sure, the button bar uses parent width and is not restricted in height --><itemname="android:layout_width">match_parent</item><itemname="android:layout_height">wrap_content</item><itemname="android:height">@null</item><itemname="android:minHeight">@null</item></style><stylename="CustomButtonBarButtonStyle"parent="@android:style/Widget.Material.Light.Button.Borderless.Colored"><!-- Setting the weight as follows should result in equally wide buttons filling the alert dialog width,
            but instead they span further out of the dialog, breaking in multiple lines though --><itemname="android:layout_width">0dp</item><itemname="android:layout_weight">1</item><!-- setting a fixed width as follows results in narrow buttons with line breaks, but of course this is not a solution --><!-- <item name="android:width">100dp</item> --></style></resources>

Solution 3:

To summarize this topic for anyone interested:

Android Material theme seems to have a bug with automatic button-width-span in alert dialogs.

When you have for example 3 buttons, one of which having more than one word, the positive button will likely be squeezed out of the dialog to the right, instead of the button with more than one word being wrapped in multiple lines, so that all buttons fit in the button bar like the basic theme / holo theme are doing.

There don't seem to be solutions solely by applying changes to buttonBarStyle and/or buttonBarButtonStyle, since their styles are not restricting button texts being wrapped in multiple lines by default.

Sure, Material theme dialog buttons require more space than in other themes in general, due to caps, boldness and generous padding and background, but that is not the source of the problem, it just makes it appear sooner than if the styling was less space requiring.

The only way to solve this problem seems to be giving your buttons shorter titles, if you don't want to style away from Material's look and feel (like making the button text size smaller and / or setting allCaps to false).

Solution 4:

use following code, let buttons on the right and vertical arrangement

alertDialog.setOnShowListener(newDialogInterface.OnShowListener() {
        @OverridepublicvoidonShow(DialogInterface dialog) {
            try {
                LinearLayoutlinearLayout= (LinearLayout) alertDialog.getButton(DialogInterface.BUTTON_POSITIVE).getParent();
                if (linearLayout != null) {
                    linearLayout.setOrientation(LinearLayout.VERTICAL);
                    linearLayout.setGravity(Gravity.RIGHT);
                }
            } catch (Exception ignored) {

            }
        }
    });

Solution 5:

A quick soln that is not dynamic is to add \n to break the long string up