'How to put ImageView on top of CardView in ConstraintLayout

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.

enter image description here

javaandroidandroid-constraintlayout


Solution 1:[1]

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

enter image description here

Solution 2:[2]

you must use app:cardElevation attr for card view and use android:elevation attr for other views for do that

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 7Cloner

Related Questions