3

I've been searching for an easy and clean way to change my AlertDialog side margin but with no success. Just to be extra clear, what I want is to change the distance between each of sides of the dialog and the side/edge of the screen. I would like my dialogs to show up similar to those that appears in the Material Design specification

Here's an image of what I would like/expect from a simple android AlertDialog, and on the right, what I'm actually seeing with the code below.

Here's my code.

AlertDialog.Builder builder = new AlertDialog.Builder(context);
builder.setMessage(message);
builder.setTitle(title);
builder.setPositiveButton(positiveId, positiveListener);
builder.show();

Before you jump to the obvious answer of setting the LayoutParams of the dialog programmatically, let me say that I know that I can do something like this and get away with it.

final AlertDialog dialog = builder.create();
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
float dialogWidth = width - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2 * SIDE_MARGIN_IN_DPS, r.getDisplayMetrics());

WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
lp.copyFrom(dialog.getWindow().getAttributes());
lp.width = (int) dialogWidth;
lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
dialog.getWindow().setAttributes(lp);
dialog.show();

But I can't believe there's no easier and cleaner way to this, and that we should do this every time we want to open an AlertDialog. I tried setting margins to styles applied to the dialog but either it didn't do anything or it changed the inner margins of the dialog (the ones between the content and the side/edge of the dialog). I'm guess that I'm looking at the wrong styles.

Has anyone came up with this same problem? Any ideas as to how to set this margins in styles and not in code?

UPDATE:

Here's my app style/theme:

<style name="Base.Theme.App" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:windowBackground">@color/activity_background</item>
    <item name="android:textColor">@color/primary_text</item>
    <item name="android:textColorSecondary">@color/secondary_text</item>

    <item name="colorControlHighlight">@color/control_highlight</item>
    <item name="colorControlActivated">?attr/colorAccent</item>
    <!-- You can also set colorControlNormal and colorSwitchThumbNormal. -->

    <!--<item name="android:colorButtonNormal">@color/primary</item>-->

    <item name="android:spinnerStyle">@style/form_spinner</item>
    <item name="spinnerStyle">@style/form_spinner</item>
    <item name="android:spinnerItemStyle">@style/form_spinner_item</item>
    <item name="editTextStyle">@style/form_edittext</item>
    <item name="android:editTextStyle">@style/form_edittext</item>

    <item name="alertDialogTheme">@style/Theme.App.Dialog.Alert</item>
</style>

And here's my alertDialogTheme

<style name="Theme.App.Dialog.Alert" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorAccent">@color/primary</item>
    <item name="android:windowBackground">@color/activity_background</item>
    <item name="android:textColor">@color/primary_text</item>
    <item name="android:textColorSecondary">@color/secondary_text</item>
    <item name="colorControlHighlight">@color/control_highlight</item>
</style>
acrespo
  • 1,134
  • 1
  • 10
  • 33
  • What's your base app style/theme? – dieter_h Sep 10 '15 at 16:52
  • Maybe try looking at the XML file that has the main layout that hosts the alert dialog in it, then change the left and right padding of the root element in that file. – Bryan Herrera Sep 10 '15 at 16:54
  • @dieter_h I've added my base app style/theme. – acrespo Sep 10 '15 at 20:53
  • @BryanHerrera I've tried that in some cases where I use a custom view for the content of the alertdialog but in this case I do not set a custom view, I use the default/simple AlertDialog component, so I cannot really change the xml. Either way, I don't think that would really help, unless I took the approach of Mike and build my own Dialog class – acrespo Sep 10 '15 at 20:59
  • duplicate of: https://stackoverflow.com/questions/42451806/how-to-add-margin-right-and-left-of-dialog/52060685 – hmac Feb 23 '22 at 15:27

2 Answers2

3

Use the following theme:

 <style name="custom_alert_dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Dialog
</item>
        <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
    </style>

in your code like:

AlertDialog.Builder builder = new AlertDialog.Builder(context, R.style.custom_alert_dialog);

Frankenxtein
  • 483
  • 7
  • 18
  • how does this allow you to set side margins? I tried this with side margin on the root view but doesn't work.... – hmac Feb 23 '22 at 15:20
1

My recommendation would be(and probably this is because I love building custom views in general) is to build your own Dialog and use the FEATURE_NO_TITLE WindowFeature. From there on, set your own xml layout file which you can customize to your needs and keep Material Design Guidelines too. This way you allow yourself to customize anything the way you want to.

Something like this:

public class MaterialDialog extends Dialog {

    protected MaterialDialog(Context context) {
        super(context);

        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.dialog_material);
        // From here on, you initialize your title, message and negative and(or) positive buttons.
    }
}
Mike
  • 4,550
  • 4
  • 33
  • 47