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 59 · Accepted Answer · edited Jul 11 '16 at 14:23

59

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

6,405
16
66
120

answered Dec 30 '15 at 09:34

Vatish Sharma

1,536
3
16
35

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 6 · Answer 2 · edited Jul 27 '19 at 13:08

6

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

34,372
9
61
83

answered Jul 27 '19 at 12:11

Islam Alshnawey

692
10
15

score 4 · Answer 3 · edited Jul 11 '16 at 14:19

4

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

6,405
16
66
120

answered Dec 30 '15 at 06:26

priyanka

376
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 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,622
2
18
33

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 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 2 · Answer 6 · 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,644
15
31

Madhur · Answer 7 · 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

Hossein Karami · Answer 8 · 2022-04-22T07:22:31.527

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!

https://stacklearn.ir/course/kotlin-basic-programming-course

score 0 · Answer 9 · answered Jul 01 '21 at 08:42

0

CardView -> app:cardElevation ="4dp"

ImageView -> android:translationZ="6dp"

Send the CardView to the back.

answered Jul 01 '21 at 08:42

DevEloper

39
4

If your card and imageview is same position then card will cover the imageView. So if you pull the imageView over cardview as using translationZ then you will see result. Also if you do not want to use elevation then increase just translationZ value. – DevEloper Jul 07 '21 at 07:12

score 0 · Answer 10 · answered Aug 01 '23 at 18:02

this will work.

        <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_gravity="center">

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:layout_margin="16dp"
            app:cardElevation="5dp"
            app:cardCornerRadius="8dp">

        </androidx.cardview.widget.CardView>

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/volume"
            android:translationZ="6dp"
            android:layout_gravity="center_horizontal" />
    </FrameLayout>

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

10 Answers10

Linked