CODEWITHSUNDEEP
androidandroid-constraintlayout
terencey
terencey

Reputation: 3332

ConstraintLayout height with `wrap_content`

I have the following xml:

<ImageView
    android:id="@+id/iv1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/gray"
    android:layout_margin="8dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/iv2"
    app:layout_constraintDimensionRatio="1:1"
    />

<ImageView
    android:id="@+id/iv2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/red"
    android:layout_margin="8dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/iv1"
    app:layout_constraintRight_toLeftOf="@id/iv3"
    app:layout_constraintDimensionRatio="1:1"
    />

<ImageView
    android:id="@+id/iv3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_margin="8dp"
    android:background="@color/yellow"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/iv2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    />

which gives me the following in the layout preview:

enter image description here

However, I intend for ConstraintLayout to be a child of a RelativeLayout, with ConstraintLayout's height set to wrap_content. But setting wrap_content results in the entire ConstraintLayout shrinking to 0 in height. How do I make wrap_content work?

Upvotes: 0

Views: 5311

Answers (3)

Manish Karena
Manish Karena

Reputation: 734

You can't divide the screen directly in ConstraintLayout. You must need to add Guideline to set max-width for your ImageView. You can get more information about Guideline here.

BTW, as per your need that you described in comment section you can make your layout with the use of GuideLine like below:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sunriseContainerRL"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

        <!-- first box end guide-line -->
        <android.support.constraint.Guideline
            android:id="@+id/firstBoxEndGL"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.33" />

        <!-- second box end guide-line -->
        <android.support.constraint.Guideline
            android:id="@+id/secondBoxEndGL"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.66" />

        <!-- third box end guide-line -->
        <android.support.constraint.Guideline
            android:id="@+id/thirdBoxEndGL"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.99" />

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="8dp"
            android:background="@color/colorTimeText"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/firstBoxEndGL"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="8dp"
            android:background="@color/colorTimeText"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/secondBoxEndGL"
            app:layout_constraintLeft_toRightOf="@+id/iv1"
            app:layout_constraintRight_toLeftOf="@+id/iv3"
            app:layout_constraintStart_toEndOf="@+id/firstBoxEndGL"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="8dp"
            android:background="@color/colorTimeText"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="@+id/thirdBoxEndGL"
            app:layout_constraintStart_toEndOf="@+id/secondBoxEndGL"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

</RelativeLayout>

Upvotes: 0

Abhishek D
Abhishek D

Reputation: 475

You can use Linear Layout and Weights to make it compatible for all screen sizes.

Below is one such sample,

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="3">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="2" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3" />

</LinearLayout>

Upvotes: 0

K. Hakvoort
K. Hakvoort

Reputation: 71

Oké, first of all you probably should not put an ConstraintLayout inside of an RelativeLayout.

Second, you can not "make wrap_content work" if your Constraintlayout has no defined size and its childeren also have no defined size

to make this work you can A: set Constraintlayout height and width to 100dp or match_parent, or B: set the height and width of the childeren of Constraintlayout to 100dp

100dp is an example

Upvotes: 2

Related Questions