Android put Cardview top of parent Cardview in RelativeLayout

Question

how can i put cardview on top of parent cardview in below screen shot?

when i put image to CardView that cause of broken my view

correct view must be:

My xml layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/content_background">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/activity_main_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="65dp"
                    android:background="@color/colorPrimary"
                    android:titleTextColor="#ffffff">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">

                        <com.joanzapata.iconify.widget.IconTextView
                            android:id="@+id/icon_signal_robot"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_marginRight="10dp"
                            android:clickable="true"
                            android:gravity="center|right"
                            android:shadowColor="#22000000"
                            android:shadowDx="3"
                            android:shadowDy="3"
                            android:shadowRadius="1"
                            android:text="{fa-android}"
                            android:textColor="@color/quote"
                            android:textSize="30sp"/>

                        <com.joanzapata.iconify.widget.IconTextView
                            android:id="@+id/icon_search_icon"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_marginRight="10dp"
                            android:clickable="true"
                            android:gravity="center|right"
                            android:shadowColor="#22000000"
                            android:shadowDx="3"
                            android:shadowDy="3"
                            android:shadowRadius="1"
                            android:text="{fa-search}"
                            android:textColor="#ffffff"
                            android:textSize="25sp"/>

                        <com.gigamole.library.ntb.NavigationTabBar
                            android:id="@+id/market_detail_navigation_tab_bar"
                            android:layout_width="90dp"
                            android:layout_height="30dp"
                            android:layout_gravity="center_vertical|left"
                            android:background="@drawable/bg_round_circle"
                            app:ntb_active_color="#4527A0"
                            app:ntb_animation_duration="150"
                            app:ntb_corners_radius="50dp"
                            app:ntb_inactive_color="#dddfec"
                            app:ntb_preview_colors="@array/red_wine"/>

                        <TextView
                            android:id="@+id/signal_application_detail_activity_title"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:clickable="true"
                            android:gravity="center|right"
                            android:text="@string/app_name"
                            android:textColor="#ffffff"
                            android:textSize="19sp"/>

                        <ImageView
                            android:id="@+id/activity_main_hearing_status"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginLeft="5dp"
                            android:layout_marginRight="10dp"
                            android:gravity="center|right"
                            android:src="@drawable/ic_antenna_white"/>

                    </LinearLayout>
                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.AppBarLayout>

            <LinearLayout
                android:id="@+id/signal_loading_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:background="@color/colorPrimary"
                android:gravity="center"
                android:orientation="vertical"
                android:visibility="gone">

                <TextView
                    android:id="@+id/loading_view_title"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:gravity="center"
                    android:text="@string/app_name"
                    android:textColor="#FFF"
                    android:textSize="35sp"
                    />

                <TextView
                    android:id="@+id/loading_view_description"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:gravity="center"
                    android:text="@string/app_description"
                    android:textColor="#FFF"
                    android:textSize="18dp"
                    />

                <com.zl.reik.dilatingdotsprogressbar.DilatingDotsProgressBar
                    android:id="@+id/dots_progressBar"
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:color="#ffee00"
                    android:radius="4dp"
                    app:dd_animationDuration="300"
                    app:dd_horizontalSpacing="7dp"
                    app:dd_numDots="5"
                    app:dd_scaleMultiplier="1.5"
                    />
            </LinearLayout>

            <RelativeLayout
                android:id="@+id/frame"
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:background="@drawable/content_background">

                <android.support.v7.widget.CardView
                    android:id="@+id/malam"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:id="@+id/imageView2"
                        android:layout_width="match_parent"
                        android:layout_height="230dp"
                        android:scaleType="centerCrop"
                        android:src="@drawable/background"/>
                </android.support.v7.widget.CardView>


                <LinearLayout
                    android:id="@+id/linearLayout3"
                    android:layout_width="match_parent"
                    android:layout_height="180dp"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="30dp"
                    android:layout_marginRight="30dp"
                    android:layout_marginTop="120dp"
                    android:fitsSystemWindows="true"
                    android:orientation="vertical">

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentTop="true"
                        app:cardCornerRadius="0dp"
                        app:elevation="2dp">

                    </android.support.v7.widget.CardView>
                </LinearLayout>
                <ImageView
                    android:id="@+id/robot_dialog_icon"
                    android:layout_width="65dp"
                    android:layout_height="65dp"
                    android:layout_alignBottom="@+id/malam"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="75dp"
                    android:fitsSystemWindows="true"
                    android:src="@drawable/dialog_robot_dialog"
                    app:layout_collapseMode="parallax"/>
            </RelativeLayout>

        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>

</FrameLayout>

Answer 1

Frame and coordinator layout work in the same way: The first View is the most background, the next View is located on the top of the previous.

So I think you should just change the order of your CardViews in xml.

You also could try to use android:elevation in order to achhive desirable result.

After some tries I have achived such result:

My xml is:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/frame"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:background="@color/colorAccent">

    <android.support.v7.widget.CardView
        android:id="@+id/malam"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="230dp"
            android:scaleType="centerCrop"
            android:background="@android:color/holo_blue_dark"/>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/white_card"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="120dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        app:cardCornerRadius="0dp"
        app:elevation="10dp">
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:translationY="32dp"
        app:layout_anchor="@id/white_card"
        app:layout_anchorGravity="center_horizontal"
        android:layout_gravity="center_horizontal">
    <ImageView
        android:id="@+id/robot_dialog_icon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"/>
    </android.support.v7.widget.CardView>

</android.support.design.widget.CoordinatorLayout>

Answer 2

CardView has default cardElevation=4. Because of that all other Views coming inside the same parent layout of that carview will be below that cardview.

In your code, the cardview with id 'malam' will be above other views because of the default cardElevation. Try setting its cardElevation as 0dp to override that.

<android.support.v7.widget.CardView
        android:id="@+id/malam"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="0dp">

UPDATE

Setting 0dp will remove the shadow of that cardview. If shadow is required, then either

1. Remove cardElevation property from CardView "malam" & set "android:elevation" to the views with id "linearLayout3" & "robot_dialog_icon" so that value is greater than 4dp.
   (Note : This works for lollipop & higher versions only)

   OR

2. Wrap "linearLayout3" & "robot_dialog_icon" inside individual CardViews.