Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 in total, the text isn't wrapped in multiple lines for those buttons as in previous themes. Instead the following buttons get squeezed out of the dialog, being unreachable (see image below).

Screenshot: http://s29.postimg.org/3vqp884cn/dialogs_light_holo_material.png

I've spent a lot of time on this problem so far and the only topic regarding it, that I could find on the internet is this: https://code.google.com/p/android/issues/detail?id=78302

So I'm taking the advice there and ask this question here..

What I've tried is looking into the source (buttons are defined with maxLines = 2) and changing different parameters on buttonBarStyle and buttonBarButtonStyle but with no success.

I'm looking for a simple style-solution and do not want to use third party libraries because of this.

May this only be an emulator problem? I don't think so.

Help is very much appreciated. Thanks in advance.

Edit: To follow up, see my own answer from Dec 3, which is not a solution.

like image 469
sec_aw Avatar asked Nov 28 '14 11:11

sec_aw


2 Answers

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 = 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 132
Andrey T Avatar answered Nov 18 '22 19:11

Andrey T


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).

like image 16
sec_aw Avatar answered Nov 18 '22 21:11

sec_aw