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

回答1:

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.

回答2:

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.

回答3:

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

imageView.bringToFront();

回答4:

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>

回答5:

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

回答6:

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

回答7:

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!

回答8:

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

来源：https://stackoverflow.com/questions/34523871/how-to-bring-imageview-in-front-of-cardview-when-both-are-of-relative-layout-c