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

android relativelayout bring to front xml
android bring view to front
image over cardview android
cardview with image android
cardview background image android
cardview examples in android
android cardview rounded corners image
cardview border color android

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

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.

Cardview overlapping other views : androiddev, How to bring imageView in front of cardview ? When both are of Relative Layout childs - android. 16 How to bring imageView in front of cardview ? When both are of Relative Layout childs When both are of Relative Layout childs View more network posts →

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.

Frame Layout Tutorial With Example In Android Studio, I have a layout XML: ?xml version=1.0 encoding=utf-8?& When both are of Relative Layout childs It will bring the ImageView to front. 16 How to bring imageView in front of cardview ? When both are of Relative Layout childs When both are of Relative Layout childs View more network posts →

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

imageView.bringToFront();

Android: Card View, Put text view below card view in the child order, not above. <FrameLayout <​android.support.v7.widget.CardView> </android.support. First add the two ImageViews as children of a RelativeLayout. To position it relative to the edges or to another view, use the various align settings of the ImageView.

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>

Using CoordinatorLayout in Android apps, Tutorial on Frame Layout with lots of examples in Android Studio using XML frameLayout so the ImageView and other child views of this layout will not be Both the fill_horizontal and top gravity are set to framelayout. Here we will put textview at different position in Frame Layout. MATCH_PARENT, RelativeLayout. This widget can be used to display a card sort of a layout in android. Mostly it displays views on top of each other, with shadows. Mostly it displays views on top of each other, with shadows. Simply we can say, Android CardView is such a view which has all material design properties, most importantly showing shadows according to the elevation.

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

Beautiful animations using Android ConstraintLayout, It is recommended to use a container view like RelativeLayout or LinearLayout as the first child in the card view. Then you can place the content in that layout  The problem is you’ll get to use it just one time on one view in a single layout. And no there’s no sendToBack() method, so you can’t send the View to back after getting it to the front. I’ll call bringToFront() on another View and the previous one will be automatically send to background 😉

A FrameLayout should be used most often to hold a single child view. is handled automatically, to make sure that both widgets do not overlap. Rather, the root layout is a RelativeLayout, and the CoordinatorLayout is it's only child. This is Note that the FAB doesn't scroll off screen with the CardView. A card is a sheet of material that serves as an entry point to more detailed information. Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length. (from: Google Material Design) Add the card view library to your project.

For the purposes of animations, it's also good to take a peek at the In it's simplest form, ConstraintLayout gives you the ability to animate between two sets of This is just a basic XML file that defines an ImageView on top of the single element on the page (the card view, the custom keypad, the FAB, etc.)  So as a test I simply contained the imageview within the cardview. It is an item for my RecyclerView as I have mentioned already. This layout will be inflated in the custom adapter class for the RecyclerView based on the image count. Yes I have tried setting background in both RelativeLayout and CardView but the effect is the same

It does not seem to behave correctly if I set scaleType of the ImageView to be centerCrop. Still zooms the image to the actual size. Still zooms the image to the actual size. This comment has been minimized.

Comments
  • 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.
  • Add elevation as "0dp".
  • 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.
  • edited the ans. The imageView to be in separate cardview with transparent background. And you can place it wherever is required.
  • I want to place it halfly above cardview and halfly outside cardview. So it is not possibe by addind imageview in cardview.
  • 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.
  • nothing special in code, there is just onCreate() method in which i have called setContentView()
  • The main problem is that It should work on all devices but not on lollipop.
  • No, It doesn't works. Even my first xml i.e frame layout will fail if i change image view position in xml
  • and also use src instead of background