Menu
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!
568
Most of what can be achieved in LinearLayout and RelativeLayout can be done in ConstraintLayout. However, learning the basics of LinearLayout and RelativeLayout is important before trying to understand how to use it with ConstraintLayout.
A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).
Dialog: A dialog is a small window that prompts the user to make a decision or enter additional information. DialogFragment: A DialogFragment is a special fragment subclass that is designed for creating and hosting dialogs.
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.
189
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
