How to bring imageView in front of cardview ? When both are of Relative Layout childs

Question

I have a layout XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/containor"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff6da"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.vats.vatishs.cardviewprogrammatically.MainActivity">

        <FrameLayout
            android:id="@+id/card"
            android:layout_width="220dp"
            android:layout_marginTop="10dp"
            android:layout_height="wrap_content">

            <TextView
                android:background="@color/white"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="10dp"
                android:text="Hello I am a text View." />

        </FrameLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="210dp"
        android:background="@drawable/select_delete_chim" />

</RelativeLayout>

which works fine. The result will be a image view above frame layout but when I use the following xml in which i have replace frame layout with CardView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/containor"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff6da"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.vats.vatishs.cardviewprogrammatically.MainActivity">

        <android.support.v7.widget.CardView
            android:id="@+id/card"
            android:layout_width="220dp"
            android:layout_marginTop="10dp"
            android:layout_height="wrap_content">

            <TextView
                android:background="@color/white"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="10dp"
                android:text="Hello I am a text View." />

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="210dp"
        android:background="@drawable/select_delete_chim" />
</RelativeLayout>

then the result will be: ImageView at the back of CardView.

Any Solution for this?

One thing more, It will work fine on pre-lollipop devices but on lollipop it doesn't work.

Output with CardView on pre-lollipop devices (required output)

Output with CardView on lollipop devices

score 57 · Accepted Answer · edited Jul 11 '16 at 14:23

57

CardView has default elevation which is greater than ImageView, So we have to add greater elevation in ImageView than CardView's elevation.

e.g. imageView.setElevation(10); and cardView.setElevation(5);

Now, its working fine on all devices.

edited Jul 11 '16 at 14:23

Sufian

5,997
14
60
111

answered Dec 30 '15 at 09:34

Vatish Sharma

1,386
1
10
28

4

You can also do the above in your xml as follows: android:elevation="10dp" for your ImageView and card_view:cardElevation="5dp" for your CardView. – ProgDevCode Jan 07 '17 at 01:02

score 5 · Answer 2 · edited Jul 11 '16 at 14:19

5

Do it like this,

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/myCardView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardElevation="0dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            android:background="@android:color/transparent"/>

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

It will bring the ImageView to front.

edited Jul 11 '16 at 14:19

Sufian

5,997
14
60
111

answered Dec 30 '15 at 06:26

priyanka

416
2
10

Add elevation as "0dp". – priyanka Dec 30 '15 at 06:40
i don't want that imageView will become a child of cardView, because imageView is a cross icon which I have to display at the corner of cardview in such a way that it appears 1/4th in cardView and rest outside of cardView. – Vatish Sharma Dec 30 '15 at 06:42
edited the ans. The imageView to be in separate cardview with transparent background. And you can place it wherever is required. – priyanka Dec 30 '15 at 06:54
I want to place it halfly above cardview and halfly outside cardview. So it is not possibe by addind imageview in cardview. – Vatish Sharma Dec 30 '15 at 07:01
If you want to place a view half on elevation(CardView) and half without elevation, How will it be possible? To place something on elevated surface, the view has to be elevated only. – priyanka Dec 30 '15 at 07:25
check out the attached images – Vatish Sharma Dec 30 '15 at 07:53

score 3 · Answer 3 · edited Jul 27 '19 at 13:08

3

You can use this attr

  app:cardElevation="0dp"

to the CardView in XMl .

Like this

   <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:cardElevation="0dp"
        app:cardUseCompatPadding="true">

This will make other view in Front of CardView

edited Jul 27 '19 at 13:08

adiga

28,937
7
45
66

answered Jul 27 '19 at 12:11

Islam Alshnawey

71
3

score 2 · Answer 4 · answered Dec 30 '15 at 06:13

2

Write this line in your java code after initializing the ImageView.

imageView.bringToFront();

answered Dec 30 '15 at 06:13

Eric B.

4,412
2
13
32

nothing special in code, there is just onCreate() method in which i have called setContentView() – Vatish Sharma Dec 30 '15 at 06:44
1

The main problem is that It should work on all devices but not on lollipop. – Vatish Sharma Dec 30 '15 at 06:45

score 2 · Answer 5 · answered Dec 16 '18 at 20:43

2

Adding just app:cardElevation="-1dp" to the CardView in your xml will fix the issue.

answered Dec 16 '18 at 20:43

Wale

1,307
8
25

Madhur · Answer 6 · 2015-12-30T06:18:43.797

Write Image view Above cardview,hopefully it solve the problem

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/containor"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff6da"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.vats.vatishs.cardviewprogrammatically.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="210dp"
        android:src="@drawable/select_delete_chim" />

        <android.support.v7.widget.CardView
            android:id="@+id/card"
            android:layout_width="220dp"
            android:layout_marginTop="10dp"
            android:layout_height="wrap_content">

            <TextView
                android:background="@color/white"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="10dp"
                android:text="Hello I am a text View." />

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

    </RelativeLayout>

No, It doesn't works. Even my first xml i.e frame layout will fail if i change image view position in xml — Vatish Sharma, Dec 30 '15 at 06:13

score 1 · Answer 7 · answered Aug 31 '18 at 11:01

Here is a complete answer to your question You can wrap CardView with a FrameLayout and put an ImageView outside of the CardView's parent like that

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout ...>
    <FrameLayout...>
        <android.support.v7.widget.CardView...>
            <Content/>
        </android.support.v7.widget.CardView>
    </FrameLayout>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ... />
</RelativeLayout>

alternatively here is the Java code that supports Android versions below and after lollipop

image.bringToFront();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
     image.setElevation(10);
}

this will bring the image to the front

score 1 · Answer 8 · answered Mar 15 '19 at 19:29

an easy way is to use something like this:

<RelativeLayout  
android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">  

<LinearLayout
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
....
</android.support.v7.widget.CardView>
</LinearLayout>

<ImageView
android:layout_width="wrap_parent"
    android:layout_height="wrap_content">

note that this is because the elevation of cardview. its default elevation is bigger than ImageView. this way you can use a LinearLayout to put CardView inside it. then you can use RelativeLayout to make ImageView on the top of CardView!

How to bring imageView in front of cardview ? When both are of Relative Layout childs

8 Answers8

Linked