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!

Tahsildar

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.

Oscillation

This solution made the constraint layout look good, but I could not manage to make the external linear layout transparent, don't know if because of some property of the DialogFragment. But just using the constraint layout with width and height set to wrap_content, did the trick (also by removing all the stuff i wrote for dialog size and gravity), so thank you so much! – Tahsildar

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>

Bathsheb

Answer 3

    @NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    Dialog dialog = super.onCreateDialog(savedInstanceState);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    dialog.getWindow().setLayout(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    dialog.setCanceledOnTouchOutside(false);
    dialog.setContentView(R.layout.yourlayout);
    return dialog;
}

This solution is the best way to do this. You do not need to override onCreateView(). Make sure your constraint layout has height and width both as wrap_content. match_parent doesn't work with dialog,it's automatically set as wrap-content. so it may happen that your layout looks fine in the preview window because you have used match_parent but it shows just as a thick vertical line when you use it in dialog. So design your layout to look correct in preview with height and width as wrap_content

Bassarisk