CODEWITHSUNDEEP
androidalignment
Chris
Chris

Reputation: 119

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

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.

Upvotes: 0

Views: 476

Answers (1)

Yvgen
Yvgen

Reputation: 2212

You can do it with Guideline

enter image description here

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>

Upvotes: 1

Related Questions