Weird behavior when using ConstraintLayout as the root layout of a DialogFragment

Question

I am constructing a custom dialog using a DialogFragment. I've noticed very odd behavior with various ViewGroups used as the root of the dialog's layout. I assume this is due to some strange interaction between the system's windows and how it displays dialogs. In this particular instance, I am using a ConstraintLayout as the root view of the layout.

When displayed, the dialog extends to the edges of the screen, and the Layout Inspector shows a measured width of over 16,000,000. Even weirder is that the ConstraintLayout defines padding, which can still be seen on the screen.

Below is the dialog's class:

public class AgreementDialog extends DialogFragment {

    // Bindings..

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.dialog_agreement, container);
        ButterKnife.bind(this, view);

        return view;
    }
}

Here is the layout, dialog_agreement:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#fff"
    android:padding="@dimen/margin_large"
    android:layout_margin="@dimen/margin_xlarge"
    >

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />


    <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/margin_standard"
        android:text="this is some text. "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/checkbox"
        />

    <TextView
        android:id="@+id/id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/margin_large"
        android:text="123456789"
        app:layout_constraintBottom_toTopOf="@+id/negative"
        app:layout_constraintTop_toBottomOf="@id/description"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

    <Button
        android:id="@+id/positive"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/confirm"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="24dp"/>

    <Button
        android:id="@+id/negative"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="20dp"
        android:text="@string/cancel"
        app:layout_constraintBaseline_toBaselineOf="@id/positive"
        app:layout_constraintEnd_toStartOf="@id/positive"
        />


</android.support.constraint.ConstraintLayout>

Questions:

1. Why is the measured width such a large number?
2. Given the measured width at over 16,000,000, one would expect the end padding to also be off screen. Why is it visible?
3. How can these issues be remedied so that a normal dialog that wraps it's content can be displayed?

EDIT: I've noticed that removing the padding seems to cause the width to hit that large number. Keeping the padding causes the dialog to maintain a normal margin to the edge of the screen, but clips the content.

Answer 1

I created a sample app with your layout dialog_agreement.xml, and it worked properly:

1. Why is the measured width such a large number?

The layout dialog_agreement.xml refers to dimension resources:

• @dimen/margin_standard
• @dimen/margin_large
• @dimen/margin_xlarge

If their values are not moderate, the dialog will be weired.

2. Given the measured width at over 16,000,000, one would expect the end padding to also be off screen. Why is it visible?

According to the guide, each child view makes a wish for its size. But the parent view initially takes into account its own padding. So, the dialog will be within the screen size, and also retain its padding.

The size of a view is expressed with a width and a height. A view actually possess two pairs of width and height values.

The first pair is known as measured width and measured height. These dimensions define how big a view wants to be within its parent. ...

The second pair is simply known as width and height, or sometimes drawing width and drawing height. These dimensions define the actual size of the view on screen, at drawing time and after layout. These values may, but do not have to, be different from the measured width and height. ...

To measure its dimensions, a view takes into account its padding. ...

3. How can these issues be remedied so that a normal dialog that wraps it's content can be displayed?

Set moderate values in res/values/dimens.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="margin_standard">16dp</dimen>
    <dimen name="margin_large">16dp</dimen>
    <dimen name="margin_xlarge">16dp</dimen>
</resources>

The sample app showed AgreementDialog as in the screenshot above.