How to bring ImageView over the CardView? Please see details

Question

I'm developing an app and I have made the below shown layout:

There is a CircleImageView and a CardView.

Here's the XML code:

<RelativeLayout
    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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.playrapp.playr.Profile"
    tools:showIn="@layout/activity_profile">

    <android.support.v7.widget.CardView
        android:id="@+id/profileCard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:contentPadding="10dp">

    </android.support.v7.widget.CardView>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/userImageProfile"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="50dp"
        android:src="@mipmap/ic_launcher"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Here, the CardView is over the ImageView. I want ImageView to be over the CardView. How can I do that?

Please let me know.

wrap it in a dummy LinearLayout – AbdulMomen عبدالمؤمن Feb 22 '18 at 17:25 — AbdulMomen عبدالمؤمن, Feb 22 '18 at 17:25

score 42 · Answer 1 · edited Jun 20 '20 at 09:12

Elevation of CardView is more higher than CircleImageView. So, you have to set higher elevation to CircleImageView to show it over CardVew.

Set CardView elevation as app:cardElevation="4dp" and set CircleImageView elevation as android:elevation="8dp"

Here is the working XML code. Try this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.CardView
        android:id="@+id/profileCard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="16dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="false" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center_horizontal"
            android:layout_marginTop="75dp"
            android:padding="24dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hammad Nasir"
                android:textSize="32sp"
                android:textColor="#727272"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="\@hammadnasir"
                android:textSize="24sp"
                android:textColor="#727272" />

        </LinearLayout>
    </android.support.v7.widget.CardView>


    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/userImageProfile"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="75dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_launcher"
        android:elevation="8dp" />

</RelativeLayout>

OUTPUT:

Hope this will help~

score 2 · Answer 2 · answered Sep 13 '16 at 20:00

2

The CardView has an elevation set by default set app:elevation="0dp"in the xml file.

answered Sep 13 '16 at 20:00

Katharina

1,612
15
27

2

this did the job, but the cardview doesn't look as a card anymore! :/ – Hammad Nasir Sep 13 '16 at 20:02
how do you mean? could you share a screenshot? – Katharina Sep 13 '16 at 20:04
Just one question - why do you want to place an image on top of the cardview? Couldn't you just put it inside? – Katharina Sep 13 '16 at 20:04
mam, this layout is of user's profile. I want to develop it like that. What's the default elevation of a cardview? – Hammad Nasir Sep 13 '16 at 20:06
I don't know the default value - I'm sorry. But I just had another idea. You could maybe place the imageview inside another cardview (with transparent background). I didn't try it but it could work this way – Katharina Sep 13 '16 at 20:09
the default elevation is 2dp and by setting imageview's elevation as 3dp I got the wanted results. Can you tell me how to specify `android:elevation=""` for API level below 21? – Hammad Nasir Sep 13 '16 at 20:11
You can't set an elevation to views below API 21... It's just possible for the `CardView`because it's part of the support lib. That's why I suggested to put the image in a `CardView` – Katharina Sep 13 '16 at 20:13
putting the imageview in another cardview is making it look weird and setting the elevation of the given cardview as 0dp is also making it look weird. :/ – Hammad Nasir Sep 13 '16 at 20:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/123287/discussion-between-katharina-and-hammad-nasir). – Katharina Sep 13 '16 at 20:18

score 0 · Answer 3 · answered Jan 05 '22 at 09:38

0

CardView -> app:cardElevation ="4dp" ImageView -> android:translationZ="6dp"

answered Jan 05 '22 at 09:38

Sahil Choudhary

181
1
7

How to bring ImageView over the CardView? Please see details

3 Answers3