CODEWITHSUNDEEP
androidandroid-constraintlayout
lostScriptie
lostScriptie

Reputation: 367

Constraint layout Nested Centered Views

I am trying to make an image containing layered Views (a layout with a background color would likely be fine also as I am just trying to represent a series of data in a single square). This is shown in my image, where every color is a different layout or view (sorry for bad paint skills, pretend it is evenly spaced and aligned). To accomplish this I was hoping to use the percentage attributes of ConstraintLayout but they don't seem to be working for me... all i can get is the lowest-most layer's color. How can I stack percentage layers?

Desired output

Below code I thought would give me 3 layers each at 80% of the above parent? It does not though.

<android.support.constraint.ConstraintLayout
    android:id="@+id/cell_afflictionsAura"
    style="@style/CenteredBox"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:foregroundGravity="center"
    app:layout_constraintWidth_default="spread"
    app:layout_constraintHeight_default="spread"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">
    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:foregroundGravity="center"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="80%"
        app:layout_constraintWidth_percent="80%">
        <android.support.constraint.ConstraintLayout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/solid_black"
            app:layout_constraintWidth_default="percent"
            app:layout_constraintHeight_default="percent"
            android:foregroundGravity="center"
            app:layout_constraintHeight_percent="80%"
            app:layout_constraintWidth_percent="80%">

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

Upvotes: 0

Views: 235

Answers (1)

Cau&#234; Jannini
Cau&#234; Jannini

Reputation: 551

This is possible, you just have to make some corrections:

1 - specify the percentage you want in decimals, like .8 instead of 80%

2 - you are forgetting to constraint the position of child layouts: you are only constraining the height and weight. If you want a view centralized in it's parent view, for example, you should add these attributes to it: 

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"

3 - finally, after these changes, I believe app:layout_constraintWidth_default="percent" is not necessary.

So, your xml would be like this:

<android.support.constraint.ConstraintLayout
    android:id="@+id/cell_afflictionsAura"
    style="@style/CenteredBox"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:foregroundGravity="center"
    app:layout_constraintWidth_default="spread"
    app:layout_constraintHeight_default="spread">
    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:foregroundGravity="center"
        app:layout_constraintHeight_percent=".8"
        app:layout_constraintWidth_percent=".8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <!--Transparent horizontal constraint-->
        <android.support.constraint.ConstraintLayout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/solid_black"
            app:layout_constraintHeight_percent=".8"
            app:layout_constraintWidth_percent=".8"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

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

Hope it works!

Upvotes: 2

Related Questions