CODEWITHSUNDEEP
androidandroid-cardviewandroid-elevation
Vatish Sharma
Vatish Sharma

Reputation: 1576

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

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

Upvotes: 20

Views: 18604

Answers (9)

mahamrauf
mahamrauf

Reputation: 21

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>

Upvotes: 0

DevEloper
DevEloper

Reputation: 39

CardView -> app:cardElevation ="4dp"

ImageView -> android:translationZ="6dp"

Send the CardView to the back.

Upvotes: 0

Islam Alshnawey
Islam Alshnawey

Reputation: 862

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

Upvotes: 6

Wale
Wale

Reputation: 1806

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

Upvotes: 2

Nick Sherbina
Nick Sherbina

Reputation: 29

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

Upvotes: 2

Vatish Sharma
Vatish Sharma

Reputation: 1576

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.

Upvotes: 60

priyanka
priyanka

Reputation: 378

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.

Upvotes: 4

Madhur
Madhur

Reputation: 3353

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>

Upvotes: 1

Eric B.
Eric B.

Reputation: 4702

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

imageView.bringToFront();

Upvotes: 2

Related Questions