[FIXED] How to put ImageView on top of CardView in ConstraintLayout

Issue

I want to create a layout like this, but I don't know how to place the CardView background under the ImageView and then set TextView below the image. The image should have 300dp height and 200dp width.

Solution

Constrain the bottom and top of your first card with the top of the second CardView, this allows you to align the center of the first card view with the top of the second CardView. and so that the First CradView is above just add an elevation higher than that of the card below

for example :

<?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"
    tools:context=".MainActivity2">

    <androidx.cardview.widget.CardView
        app:cardCornerRadius="15dp"
        android:id="@+id/bottomCard"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_margin="20dp"
        app:cardElevation="9dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias=".7">

    </androidx.cardview.widget.CardView>


    <androidx.cardview.widget.CardView
        app:cardElevation="10dp"

        app:cardBackgroundColor="@color/purple_700"
        app:cardCornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/bottomCard"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/bottomCard">

        <ImageView
            android:id="@+id/image"
            android:layout_width="250dp"
            android:layout_height="300dp"
            android:background="@drawable/ic_android_black_24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.cardview.widget.CardView>


</androidx.constraintlayout.widget.ConstraintLayout>

this is the output

Answered By - Shay Kin
Answer Checked By - Katrina (JavaFixing Volunteer)