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.

Cathrine

wrap it in a dummy LinearLayout – Cosby

Answer 1

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~

Grape

Answer 2

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

Alphonsa

this did the job, but the cardview doesn't look as a card anymore! :/ – Cathrine

how do you mean? could you share a screenshot? – Alphonsa

Just one question - why do you want to place an image on top of the cardview? Couldn't you just put it inside? – Alphonsa

mam, this layout is of user's profile. I want to develop it like that. What's the default elevation of a cardview? – Cathrine

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 – Alphonsa

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? – Cathrine

You can't set an elevation to views below API 21... It's just possible for the CardViewbecause it's part of the support lib. That's why I suggested to put the image in a CardView – Alphonsa

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. :/ – Cathrine

Let us continue this discussion in chat. – Alphonsa

Answer 3

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

Brasher