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>

use elevation. a higher elevation should have the green thing on the top. if cardview has say elevation 3dp make the green thing elevation higher say 5dp — Raghunandan, Oct 09 '17 at 12:02

rupinderjeet · Accepted Answer · 2021-10-03T15:49:05.840

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"

This can be used as an alternative to directly using the image view over the card view. Thanks! — Suhas Shelar, Oct 09 '17 at 12:22

score 6 · Answer 2 · edited Dec 22 '17 at 13:11

try below:

<?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:fitsSystemWindows="true"
    app:layout_collapseMode="parallax">


    <ImageView
        android: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" />

    <ImageView
        android: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"  />

    <ImageView
        android: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>

I believe the constraints that I have posted are same as the ones you have used. I am not getting the desired output though. There is a card view and image view. — Suhas Shelar, Oct 09 '17 at 12:09
These constraints do not work with card view. I tried changing your middle ImageView to CardView and the other image went in the background. — Suhas Shelar, Oct 09 '17 at 12:15

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

2 Answers2

Linked