Android - Constraint layout - How to align a view centered over edge of other view?

Question

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 of the banner and then there is another Image View that is center aligned with the top edge of the card.

The problem I am facing is that the second Image View (GREEN one) when aligned with the card goes in the background instead of staying in the foreground.

Here is the xml,

<android.support.constraint.ConstraintLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:fitsSystemWindows="true"             app:layout_collapseMode="parallax"             android:paddingBottom="@dimen/padding_10">              <ImageView                 android:id="@+id/imageView_jobBackdrop_jobDetails"                 android:layout_width="match_parent"                 android:layout_height="175dp"                 android:fitsSystemWindows="true"                 android:scaleType="centerCrop"                 android:src="@drawable/backdrop_job_details"                 app:layout_constraintEnd_toEndOf="parent"                 app:layout_constraintStart_toStartOf="parent"                 app:layout_constraintTop_toTopOf="parent"                 app:layout_collapseMode="parallax"/>              <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" />              <android.support.v7.widget.CardView                 android:id="@+id/cardView_jobHeader_jobDetails"                 android:layout_width="0dp"                 android:layout_height="wrap_content"                 android:layout_marginBottom="24dp"                 android:layout_marginEnd="16dp"                 android:layout_marginStart="16dp"                 app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"                 app:layout_constraintEnd_toEndOf="parent"                 app:layout_constraintStart_toStartOf="parent"                 app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails"                 app:layout_constraintVertical_bias="0.5">                  <android.support.constraint.ConstraintLayout                     android:id="@+id/parent"                     android:layout_width="match_parent"                     android:layout_height="wrap_content">                      <TextView                         android:id="@+id/textView_jobTitle_jobDetails"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_marginEnd="16dp"                         android:layout_marginStart="16dp"                         android:layout_marginTop="32dp"                         android:gravity="center"                         android:text="Fresher Software Developer Job. Urgent Openning. Angular Js, HTML, JavaScript, CSS"                         app:layout_constraintEnd_toEndOf="parent"                         app:layout_constraintStart_toStartOf="parent"                         app:layout_constraintTop_toTopOf="parent" />                  </android.support.constraint.ConstraintLayout>             </android.support.v7.widget.CardView>         </android.support.constraint.ConstraintLayout> 

Answer 1

Try this:

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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:orientation="vertical"     android:padding="20dp">      <android.support.v7.widget.CardView         android: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.CardView         android: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"