How to set edge of one view to center of another in ConstraintLayout?

Question

I know this question has been asked before, but can't figure out why this code won't work. I'm trying to align bottom edge of view1 to the center of view2:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <View
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/view2"
        app:layout_constraintBottom_toBottomOf="@id/view2"
        android:background="@color/colorPrimary" />

    <View
        android:id="@+id/view2"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="200dp"
        android:background="@color/colorSecondary" />

</android.support.constraint.ConstraintLayout>

From everything I can find, this looks to me like it should work. The two constraints on the bottom of view1 should balance one another out and align it to the center of view2. Instead, "constraintBottom_toTopOf" seems to override the other constraint and "constraintBottom_toBottomOf" is ignored (if I remove the first constraint the second works properly). What am I missing here?

Similar posts like this have asked the opposite: how to center one view over another's edge. The answer...

<ImageView
    android:id="@+id/imageView_companyLogo_jobDetails"
    android:layout_width="75dp"
    android:layout_height="75dp"
    android:fitsSystemWindows="true"
    app:layout_collapseMode="parallax"            
    app:layout_constraintBottom_toTopOf="@+id/cardView_jobHeader_jobDetails"            
    app:layout_constraintEnd_toEndOf="@id/cardView_jobHeader_jobDetails"            
    app:layout_constraintStart_toStartOf="@id/cardView_jobHeader_jobDetails"            
    app:layout_constraintTop_toTopOf="@+id/cardView_jobHeader_jobDetails" />

...makes sense to me, with the Bottom_toTopOf and Top_toTopOf constraints cancelling and forcing the view to be centered over the top of the view. I tried something like this elsewhere and it was fine problem. Can't figure out why it won't work when trying to do it the other way around.

Thanks.

You should link to those prior questions and explain what parts of their answers you can't figure out. Otherwise you risk this being closed as a duplicate. — Haem, Jul 17 '18 at 06:36
The other ones were a little different, but I've explained how and fixed the post anyway. Hope this helps. — Chris, Jul 17 '18 at 06:59

score 1 · Answer 1 · answered Nov 04 '22 at 20:10

You can do it with Guideline

And here is the code for it:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="#EFEFEF"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.33" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageView"
        android:layout_width="@dimen/imageViewDiameter"
        android:layout_height="@dimen/imageViewDiameter"
        android:elevation="6dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/guideline"
        app:roundPercent="1"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="330dp"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        android:elevation="6dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline" />

</androidx.constraintlayout.widget.ConstraintLayout>

How to set edge of one view to center of another in ConstraintLayout?

1 Answers1