Android - Constraint Layout - How To Align A View Centered Over Edge Of Other View?

I want to build a layout like this: Inside the constraint layout there is an Image View which acts like a banner, then there is a Card that is center aligned with the bottom edge

Solution 1:

Try this:

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayoutxmlns: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:orientation="vertical"android:padding="20dp"><android.support.v7.widget.CardViewandroid:id="@+id/card_1"android:layout_width="0dp"android:layout_height="200dp"android:layout_marginStart="8dp"android:layout_marginEnd="8dp"android:layout_marginTop="8dp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintTop_toTopOf="parent" /><android.support.v7.widget.CardViewandroid:id="@+id/card_2"android:layout_width="100dp"android:layout_height="100dp"android:layout_marginBottom="8dp"android:layout_marginStart="8dp"android:layout_marginEnd="8dp"android:layout_marginTop="0dp"app:cardBackgroundColor="#69F"app:layout_constraintBottom_toBottomOf="@+id/card_1"app:layout_constraintStart_toStartOf="@+id/card_1"app:layout_constraintEnd_toEndOf="@+id/card_1"app:layout_constraintTop_toBottomOf="@+id/card_1" /></android.support.constraint.ConstraintLayout>

Explanation :- This works because of these four lines

Following lines sets the blue CardView centered on the bottom edge of White CardView.

<!-- top constraint is set to bottom of White CardView -->
app:layout_constraintTop_toBottomOf="@+id/card_1"

<!-- bottom constraint is set to bottom of White CardView -->
app:layout_constraintBottom_toBottomOf="@+id/card_1"

Following lines set the blue CardView centered horizontally

<!-- left/start constraint is set to left/start of White CardView -->
app:layout_constraintStart_toStartOf="@+id/card_1"

<!-- right/end constraint is set to right/end of White CardView -->
app:layout_constraintEnd_toEndOf="@+id/card_1"

Solution 2:

try below:

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayoutxmlns: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:fitsSystemWindows="true"app:layout_collapseMode="parallax"><ImageViewandroid:id="@+id/imageView_jobBackdrop_jobDetails"android:layout_width="match_parent"android:layout_height="175dp"android:fitsSystemWindows="true"android:scaleType="centerCrop"android:background="@android:color/white"app:layout_collapseMode="parallax"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><ImageViewandroid:id="@+id/imageView2"android:layout_width="match_parent"android:layout_height="60dp"android:layout_marginBottom="8dp"android:layout_marginEnd="8dp"android:layout_marginStart="8dp"android:background="@android:color/black"app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"app:layout_constraintEnd_toEndOf="@+id/imageView_jobBackdrop_jobDetails"app:layout_constraintStart_toStartOf="@+id/imageView_jobBackdrop_jobDetails"app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"  /><ImageViewandroid:id="@+id/imageView3"android:layout_width="75dp"android:layout_height="75dp"android:layout_marginBottom="8dp"android:layout_marginEnd="8dp"android:background="@android:color/darker_gray"app:layout_constraintBottom_toTopOf="@+id/imageView2"app:layout_constraintEnd_toEndOf="@+id/imageView2"app:layout_constraintStart_toStartOf="@+id/imageView2"app:layout_constraintTop_toTopOf="@+id/imageView2"  /></android.support.constraint.ConstraintLayout>