Dialog width and height issue

material-ui dialog height
material dialog full height
spfx dialog width
material dialog max-height
office-ui-fabric dialog width
material-ui modal
mui dialog onclose
dialog mui api

i use custom dialog but in mobile device and in tab view but design is change when i check on tab

i want same same dialog in all device.

See my below code.

private void startDialog() {

    final Dialog dialog = new Dialog(activity);
    int width = (int)(getResources().getDisplayMetrics().widthPixels*0.70);
    int height = (int)(getResources().getDisplayMetrics().heightPixels*0.65);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

    dialog.setContentView(R.layout.checkout_alert_dialog);
    dialog.show();
    dialog.getWindow().setLayout(width, height);


    btn_cancle = dialog.findViewById(R.id.btn_cancle);
    btn_cancle.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(activity, "Cancel coming soon", Toast.LENGTH_LONG).show();
            dialog.dismiss();
        }
    });

    btn_continue = dialog.findViewById(R.id.btn_continue);
    btn_continue.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(activity, " Ok coming soon", Toast.LENGTH_LONG).show();
            dialog.dismiss();
        }
    });
}

Below is Dialog.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >

            <ImageView
                android:id="@+id/iv_pointBox"
                android:layout_width="@dimen/_80sdp"
                android:layout_height="@dimen/_80sdp"
                android:src="@drawable/ic_chekout_popup"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="@dimen/_30sdp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="@dimen/normal_input_text_size"
                android:text="You've chosen to redeem 865 Points and pay 44.44 AED. The Payment process might take Some times, please do not hit the back button or close the app. Would you like to continue. "
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="@dimen/_20sdp"
                android:layout_marginRight="@dimen/_20sdp"
                android:layout_below="@+id/iv_pointBox"
                android:layout_marginTop="@dimen/_15sdp"
                />
         <View
             android:layout_width="match_parent"
             android:layout_height="@dimen/_1sdp"
             android:background="@color/view_color"
             android:layout_above="@+id/linerbutton"
             />
         <LinearLayout
             android:id="@+id/linerbutton"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:orientation="horizontal"
             android:layout_alignParentBottom="true"
             >
            <Button
                android:id="@+id/btn_cancle"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/lable_cancel"
                android:textColor="@color/black"
                android:textSize="@dimen/normal_input_text_size"
                android:textStyle="bold"
                android:background="@null"
                android:gravity="center"
                android:layout_weight="1"
                />

             <View
                 android:layout_width="@dimen/_1sdp"
                 android:layout_height="@dimen/_45sdp"
                 android:background="@color/view_color"
                 />
            <Button
                android:id="@+id/btn_continue"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/lable_continue"
                android:textColor="@color/black"
                android:textSize="@dimen/normal_input_text_size"
                android:textStyle="bold"
                android:background="@null"
                android:layout_weight="1"
                android:gravity="center"
                />
         </LinearLayout>
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

I mention 2 screenshot of my device :

Mobile Device Screen shot:

Tab Screenshot :

See in screenshot dialog was change. So how to i fix it

Thanks in Advance :

Just look at your layout.xml Your layout height and width is match_parent then it's create a spaces.

Just replace your xml with my xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/_250sdp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/white"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >

            <ImageView
                android:id="@+id/iv_pointBox"
                android:layout_width="@dimen/_80sdp"
                android:layout_height="@dimen/_80sdp"
                android:src="@drawable/ic_chekout_popup"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="@dimen/_30sdp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="@dimen/normal_input_text_size"
                android:text="You've chosen to redeem 865 Points and pay 44.44 AED. The Payment process might take Some times, please do not hit the back button or close the app. Would you like to continue. "
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="@dimen/_20sdp"
                android:layout_marginRight="@dimen/_20sdp"
                android:layout_below="@+id/iv_pointBox"
                android:layout_marginTop="@dimen/_15sdp"
                />
         <View
             android:layout_width="match_parent"
             android:layout_height="@dimen/_1sdp"
             android:background="@color/view_color"
             android:layout_marginTop="@dimen/_50sdp"
             />
         <LinearLayout
             android:id="@+id/linerbutton"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:orientation="horizontal"
             >
            <Button
                android:id="@+id/btn_cancle"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/lable_cancel"
                android:textColor="@color/black"
                android:textSize="@dimen/normal_input_text_size"
                android:textStyle="bold"
                android:background="@null"
                android:gravity="center"
                android:layout_weight="1"
                />

             <View
                 android:layout_width="@dimen/_1sdp"
                 android:layout_height="@dimen/_45sdp"
                 android:background="@color/view_color"
                 />
            <Button
                android:id="@+id/btn_continue"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/lable_continue"
                android:textColor="@color/black"
                android:textSize="@dimen/normal_input_text_size"
                android:textStyle="bold"
                android:background="@null"
                android:layout_weight="1"
                android:gravity="center"
                />
         </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

And remove below three lines in java file No need to change height and width at run time:

int width = (int)(getResources().getDisplayMetrics().widthPixels*0.70);
 int height = (int)(getResources().getDisplayMetrics().heightPixels*0.65);
 dialog.getWindow().setLayout(width, height);

Cannot customize width and height of dialog · Issue #9477 · mui-org , We want to have a dialog with scroll bar where we want height of dialog to be fixed, irrespective of number of items inside list. We have  However, the width and the height of the dialog do not conform to the width, height specified in the control or CSS. Also get a warning(on bundling) about '.ms-Dialog-main'not being camel case - Warning - [sass] The local CSS class 'ms-Dialog-main' is not camelCase and will not be type-safe. How can this issue with dialog dimensions be tackled?

try custom layout

custom.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="@+id/imageDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="6dp" />
<TextView
android:id="@+id/textDialog"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#FFF"
android:layout_toRightOf="@+id/imageDialog"/>
<Button
android:id="@+id/declineButton"
android:layout_width="100px"
android:layout_height="wrap_content"
android:text=" Submit "
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_below="@+id/textDialog"
android:layout_toRightOf="@+id/imageDialog"
/>
</RelativeLayout>

in java file

final Dialog dialog = new Dialog(context);
dialog.setContentView(R.layout.custom);
dialog.setTitle("Title");

to open dialog use

dialog.show();

to dismiss dialog use

dialog.dismiss();

[Dialog] How to modify max width of dialog box? · Issue #1467 · mui , I am having the same issue. style={{width: "100%", maxWidth: "none"}} do not work. I want to make dialog 100% height and weight. I even tried  initially i am showing jquery dialog with fixed height and width at center of page. now i want to put a div with lots of html content inside the dialog. now i want to dynamically increase dialog height & width according to the div height & width with animate function but i want that dialog should stick at the center of page.

Personally, I prefer to create DialogFragment and set width and height like that:

@Override
public void onResume() {
    super.onResume();
    Window window = getDialog().getWindow();
    int width = getArguments().getInt(BUNDLE_KEY_WIDTH);
    int height = getArguments().getInt(BUNDLE_KEY_HEIGHT);
    window.setLayout(width, height);
}

Considerations for Styling a Modal, If you are absolutely certain of the height and width of the modal, you could fixed positioning can be a problem and you might consider something like position:  According to the specs whe width should wrap the content, but in 56dp steps, with a minimum of 5 x 56dp. I'm mentioning this, because when I use a simple dialog on a Nexus 7 its width is almost as wide as the entire screen (in portrait mode), which is clearly not in accordance with the specs.

Replace the

myAlertDialog.show();

by

alertDialog.show();

and then

alertDialog.getWindow().setLayout(width,height);  

it will work perfectly

complete code:

  private void startDialog() {
    AlertDialog.Builder myAlertDialog = new AlertDialog.Builder(this);
    myAlertDialog.setTitle("title");
    myAlertDialog.setMessage("use this");
    AlertDialog alertDialog = myAlertDialog.create();

    DisplayMetrics displaymetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
    int width = (int) ((int)displaymetrics.widthPixels * 0.9);
    int height = (int) ((int)displaymetrics.heightPixels * 0.7);


    myAlertDialog.setPositiveButton("Gallery", new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface arg0, int arg1) {
            Intent pictureActionIntent = null;

            pictureActionIntent = new Intent(Intent.ACTION_PICK,
                    android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
            startActivityForResult(pictureActionIntent, GALLERY_PICTURE);

        }
    });

    myAlertDialog.setNegativeButton("Camera", new DialogInterface.OnClickListener() {

        public void onClick(DialogInterface arg0, int arg1) {

            StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
            StrictMode.setVmPolicy(builder.build());

            Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
            startActivityForResult(intent, 15);

        }
    });
    alertDialog.show();
    alertDialog.getWindow().setLayout(width,height);

}

if still not working then you can use like this:

class DialogView extends DialogFragment {
    Context context;

    public static DialogView newInstance() {
        DialogView f = new DialogView();
        return f;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NO_TITLE, android.R.style.Theme);
        context = this.getActivity();
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

        return new Dialog(getActivity(), getTheme()) {
            @Override
            public void onBackPressed() {
                //do your stuff

            }
        };
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.button_layout_view, container, false);
        setCancelable(false);
             //  RelativeLayout closeBtn = (RelativeLayout) view.findViewById(R.id.bottom_separator);  get button ids like this- gallery camera etc and you can use click listener on that

        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        int width = (int) (metrics.widthPixels * 0.90);
        int height = (int) (metrics.heightPixels * 0.95);
        this.getDialog().getWindow().setLayout(width, height);
        return view;
    }

    public static DisplayMetrics getDeviceMetrics(Context context) {
        DisplayMetrics metrics = new DisplayMetrics();
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Display display = wm.getDefaultDisplay();
        display.getMetrics(metrics);
        return metrics;
    }

}

create xml for that with two button and title

button_layout_view

then call like this :

 android.support.v4.app.FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        DialogFragment newFragment = DialogView.newInstance();
       newFragment.show(ft, "");

Dialog Widget, closeOnEscape. closeText. dialogClass. draggable. height. hide. maxHeight. maxWidth. minHeight. minWidth. modal. position. resizable. show. title. width  < Dialog title = " Dialog " modal = {true} autoDetectWindowHeight = {false} autoScrollBodyContent = {false} contentStyle = {{width: " 100% ", maxWidth: " none "}} / > If you look at src/dialog.jsx lines 141 and 142 , styles.content is what you want to override with the contentStyle prop.

Your dialog's width and height is fine in both devices (you are setting them in your startDialog() method). If you want the ImageView to be smaller in tablet devices, so the proportions are the same in both mobile and tablets, you should use a different dimens file for them:

First, define a dimen for your image:

Inside dimens.xml

<dimen name="dialog_image_size">XXXdp</dimen>

Then, define the same dimen inside /res/values-sw720dp/dimens.xml for 10'' tablets and inside /res/values-sw600dp/dimens.xml for 7'' tablets, and set a smaller dp for them.

Now, when you are on a tablet, a different size will be loaded, so you can use a smaller one to keep the same proportions than in mobile.

Dialog Auto Width, about setting dialog's width option to 'auto' not working properly. We do support height: 'auto', but I really don't know how width: 'auto'  The dialog width is set to 300px, even if the width is set to auto. Also, not responsive. Expected behavior The dialog should by default take the width of the window, as per issue 1262. However, an auto width does not work at all. My aim is to set the dialog width to 90% of the screen. Angular version: 2.4.6; PrimeNG version: 2.0.0-rc3; Browser: [all]

How to auto resize modal dialog when content change [#2891942 , I am opening a form in modal dialog using a link as follows: <a class="use-ajax" data-dialog-type="modal" data-dialog-options='{"height":"650"  Dialog 4: Create a new transformation. Go to Tools > Show plugin information, we can increase the height of this dialog in order to see more rows. Check image dialog4. Dialog 5 Open the step CSV file input. We can increase the height to see more rows of the populate fields. Check image dialog5. Dialog 6 Open the step Data Grid. We can

How to Change the Default Width of Bootstrap Modal Box, However, if you still want to customize the size of the modal window you can override the CSS width property of the .modal-dialog class to resize the default  If you do not do IE check, FF and Chrome will use the width and height value as the result dialog width and heigth. 3. Finally, add the following javascript code on the page. This piece of code will find the actual width and height and update the dialog to the current width and height.

Element: <oj-dialog>, Dialog dimensions, including height, width, min-width, max-width, most of the clipping and positioning issues of a completely inline design.

Comments
  • In your code, you set the size before calling show(), have you tried to do it after calling show()?
  • yes i tried also but didn't work @jhamon
  • use dialog instead of AlertDialog.
  • This is the normal behavior. If you want the same appearance you must create different layouts under layout folder for different resolutions and orientations.
  • how it do that ? @mTak
  • great this is same what i need. But why remove this 3 lines ??
  • beoz this is change your dialog size at run time.
  • what is a (R.layout.custom);
  • its a custom dialog xml file now i update my code please check
  • but i used alert dialog
  • i tried also this think. if you see my code perfectly. i add this line in comment alertDialog.getWindow().setLayout(800, 800);
  • sry didn't work brother, i'll try most of examples but don't know why not change the height and width
  • ok brother @MohammadAli i have change in my answer. please check. you can also create dialog like this.
  • i try this but same out it's show me or 1 one more think i'll use sdp library for the height and width size on xml
  • If you set a smaller dp (for example, 80dp in mobiles, 50dp in 7'' tablets and 35dp in 10'' tablets), it shouldn't be the same at all. Then you can try-error until the proportions are similar for any device.