Custom DialogFragment with ConstraintLayout

Question

I'm building a DialogFragment used to display some filters an user can apply. This is the layout of the custom view I want to build:

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent">

<android.support.constraint.Guideline
    android:id="@+id/guideline_vertical_centered"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<CheckBox
    android:id="@+id/checkbox_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="4dp"
    android:layout_marginStart="100dp"
    android:layout_marginTop="16dp"
    android:checked="true"
    app:layout_constraintEnd_toStartOf="@+id/search_by_title"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/search_by_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="22dp"
    android:text="Titolo"
    app:layout_constraintStart_toEndOf="@+id/checkbox_title"
    app:layout_constraintTop_toTopOf="parent" />

<CheckBox
    android:id="@+id/checkbox_author"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:checked="true"
    app:layout_constraintStart_toEndOf="@+id/guideline_vertical_centered"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="22dp"
    android:text="Autore"
    app:layout_constraintStart_toEndOf="@+id/checkbox_author"
    app:layout_constraintTop_toTopOf="parent" />

<CheckBox
    android:id="@+id/checkbox_publisher"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="100dp"
    android:checked="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="6dp"
    android:text="Editore"
    app:layout_constraintStart_toEndOf="@+id/checkbox_publisher"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<CheckBox
    android:id="@+id/checkbox_tags"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:checked="true"
    app:layout_constraintStart_toEndOf="@+id/guideline_vertical_centered"
    app:layout_constraintTop_toBottomOf="@+id/guideline7" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="6dp"
    android:text="Tags"
    app:layout_constraintStart_toEndOf="@+id/checkbox_tags"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<android.support.constraint.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="64dp"
    app:layout_constraintStart_toStartOf="parent" />


</android.support.constraint.ConstraintLayout>

Which on the preview looks like this:

But, since I want the dialog to not fill the entire screen, I set its size this way:

    Window window = getDialog().getWindow();
    Point size = new Point();
    Display display = window.getWindowManager().getDefaultDisplay();
    display.getSize(size);
    window.setLayout((int) (size.x * 0.75), WindowManager.LayoutParams.WRAP_CONTENT);
    window.setGravity(Gravity.CENTER);
    super.onResume();

Which results in this:

So my question is: how can I use constraint layout and then make its constraints scale to the dimension of the window?
I know that for the elements I added a constraint layout is unnecessary, but I plan on adding much more elements with a non-fixed layout.
Thank you all in advance!

Answer 1

Just a hack. You can wrap your dialog layout by a parent node and can set ConstraintLayout width and height wrap_content. By this way you can also set background color, dialog margin, gravity.

Just replace your dialog layout by this.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorTransparentGray"
    android:gravity="center"
    android:padding="20dp">

    <android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <android.support.constraint.Guideline
            android:id="@+id/guideline_vertical_centered"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.5" />

        <CheckBox
            android:id="@+id/checkbox_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="4dp"
            android:layout_marginStart="100dp"
            android:layout_marginTop="16dp"
            android:checked="true"
            app:layout_constraintEnd_toStartOf="@+id/search_by_title"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/search_by_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginTop="22dp"
            android:text="Titolo"
            app:layout_constraintStart_toEndOf="@+id/checkbox_title"
            app:layout_constraintTop_toTopOf="parent" />

        <CheckBox
            android:id="@+id/checkbox_author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:checked="true"
            app:layout_constraintStart_toEndOf="@+id/guideline_vertical_centered"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginTop="22dp"
            android:text="Autore"
            app:layout_constraintStart_toEndOf="@+id/checkbox_author"
            app:layout_constraintTop_toTopOf="parent" />

        <CheckBox
            android:id="@+id/checkbox_publisher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="100dp"
            android:checked="true"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/guideline7" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginTop="6dp"
            android:text="Editore"
            app:layout_constraintStart_toEndOf="@+id/checkbox_publisher"
            app:layout_constraintTop_toTopOf="@+id/guideline7" />

        <CheckBox
            android:id="@+id/checkbox_tags"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:checked="true"
            app:layout_constraintStart_toEndOf="@+id/guideline_vertical_centered"
            app:layout_constraintTop_toBottomOf="@+id/guideline7" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginTop="6dp"
            android:text="Tags"
            app:layout_constraintStart_toEndOf="@+id/checkbox_tags"
            app:layout_constraintTop_toTopOf="@+id/guideline7" />

        <android.support.constraint.Guideline
            android:id="@+id/guideline7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_begin="64dp"
            app:layout_constraintStart_toStartOf="parent" />


    </android.support.constraint.ConstraintLayout>
</LinearLayout>

Remove all stuff written for dialog size, gravity etc.

Answer 2

It looks like you want the controls in your layout to be grouped together in the center of the layout. As things stand, your views are tied in with the size of the container with large margins, etc. that prevents it from resizing properly. It would be better to organize the controls around each other and to lightly tie the group to the container.

Here is another way to look at organizing your controls. The video shows how the controls change positions in the designer as the size of the ConstraintLayout is changed. I think this is along the lines of what you are looking for.

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <CheckBox
        android:id="@+id/checkbox_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        app:layout_constraintBottom_toTopOf="@+id/checkbox_publisher"
        app:layout_constraintEnd_toStartOf="@+id/search_by_title"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/search_by_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Titolo"
        app:layout_constraintBottom_toBottomOf="@+id/checkbox_title"
        app:layout_constraintEnd_toStartOf="@+id/checkbox_author"
        app:layout_constraintStart_toEndOf="@+id/checkbox_title"
        app:layout_constraintTop_toTopOf="@+id/checkbox_title" />

    <CheckBox
        android:id="@+id/checkbox_author"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:checked="true"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintStart_toEndOf="@+id/search_by_title"
        app:layout_constraintTop_toTopOf="@+id/checkbox_title" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Autore"
        app:layout_constraintBottom_toBottomOf="@+id/checkbox_author"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/checkbox_author"
        app:layout_constraintTop_toTopOf="@+id/checkbox_author" />

    <CheckBox
        android:id="@+id/checkbox_publisher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:checked="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/checkbox_title"
        app:layout_constraintTop_toBottomOf="@+id/checkbox_title" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Editore"
        app:layout_constraintBottom_toBottomOf="@+id/checkbox_publisher"
        app:layout_constraintStart_toStartOf="@+id/search_by_title"
        app:layout_constraintTop_toTopOf="@+id/checkbox_publisher" />

    <CheckBox
        android:id="@+id/checkbox_tags"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        app:layout_constraintStart_toStartOf="@id/checkbox_author"
        app:layout_constraintTop_toTopOf="@+id/checkbox_publisher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tags"
        app:layout_constraintBottom_toBottomOf="@+id/checkbox_tags"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toTopOf="@+id/checkbox_tags" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="64dp"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>