CODEWITHSUNDEEP
androidkotlinandroidx
Jonny
Jonny

Reputation: 428

ConstraintLayout, move a LinearLayout up (negatively)

I'm migrating some projects to AndroidX with Kotlin. I'm having some issues with ConstraintLayout, I already know that, according to the documentation:

Negative margins will not be supported in ConstraintLayout. [...]

But I have the following situation:

enter image description here

I need to move up in 5dp the LinearLayout, however I need the height to continue to match the lower limit of the screen. That is, I move up 5dp and increment the height by 5dp.

As it's in the image, I've already tried translateY, but it just moves the entire view (not what I need). Also I can not create a view inside the id#top with height of 5dp and align with constraintTop_toTopOf, since they are part of different groups.

Is there any solution for this case?

Upvotes: 1

Views: 1623

Answers (2)

Rasmusob
Rasmusob

Reputation: 508

It's tricky to get views to overlap in ConstraintLayout, but you can do it by adding an invisible view and constraining the overlapping view to the invisible view.

In this case the invisible view's bottom could be constrained to the bottom of the green LinearLayout, with a bottom margin of 5dp. The red LinearLayout can then have its top constrained to the bottom of the invisible view. This should give you 5dp of overlap.

Try copy-pasting the following into your constraint layout

            <LinearLayout
                android:id="@+id/green"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:orientation="vertical"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:background="@android:color/holo_green_light" />

            <View
                android:id="@+id/dummyView"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginBottom="5dp"
                android:visibility="invisible"
                app:layout_constraintBottom_toBottomOf="@id/green"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"/>

            <LinearLayout
                android:id="@+id/red"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:orientation="vertical"
                app:layout_constraintTop_toBottomOf="@id/dummyView"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:background="@android:color/holo_red_light" />

Note that a dimension of "0dp" means "match constraints" when set on a child view of a ConstraintLayout. This is not obvious, but is in fact documented here https://developer.android.com/reference/android/support/constraint/ConstraintLayout

Upvotes: 1

ArcDexx
ArcDexx

Reputation: 483

The whole purpose of ConstraintLayout is to have a flat view hierarchy. Therefore, having LinearLayouts nested in defeats the purpose.

I suggest you get rid of the nested LinearLayouts and do everything using constraints.

Upvotes: 0

Related Questions