Android puts Cardview at the top of parent Cardview in RelativeLayout

Question

How can I put cardview on top of the parent cardview in the screenshot?

when I put an image in cardview , which cardview my view

The correct view should 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

The frame frame and the coordinator work the same way: the first View is the background, the next View is at the top of the previous one.

So, I think you just need to reorder your CardViews in xml .

You can also try using android:elevation to get the desired result.

After some attempts, I achieved this result:

My xml:

 <?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 a default value of cardElevation = 4 . Because of this, all other views included in the same parent layout of this carview will be below this map view.

In your code, the map with the identifier "malam" will be higher than other representations due to the standard map. Try setting its cardElevation to 0dp to override this.

 <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 this map view. If a shadow is required, then either

• Remove the CardElevation property from CardView " malam " and set " android: height " to the views with the identifiers " linearLayout3 and" robot_dialog_icon ", so that the value is greater than 4dp.
  ( Note: this only works for candies and higher versions )

  OR

• Wrap " linearLayout3 " and " robot_dialog_icon " inside separate cards.

Answer 3

I don’t understand what you want, but I think you want less.

If you want this type of image

Then use this code.

XML code:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.example.softeng.aab.MainActivity" tools:showIn="@layout/activity_main"> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="5dp"> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/card_view" card_view:cardCornerRadius="1dp" android:foreground="?android:attr/selectableItemBackground" android:layout_marginTop="5dp"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" > <ProgressBar android:id="@+id/progress" android:visibility="visible" style="?android:attr/progressBarStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /> </RelativeLayout> <LinearLayout android:id="@+id/content_loading" android:visibility="invisible" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:padding="5dp" android:orientation="vertical"> <TextView android:id="@+id/text_description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="@dimen/abc_text_size_medium_material" android:layout_marginBottom="5dp" /> <TextView android:id="@+id/text_owner" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="@dimen/abc_text_size_small_material" android:layout_marginBottom="5dp" /> <TextView android:id="@+id/text_networks" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="@dimen/abc_text_size_small_material" /> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="5dp" /> </LinearLayout> </android.support.v7.widget.CardView> </RelativeLayout> <LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="100dp" app:layout_anchor="@id/card_view" app:layout_anchorGravity="right|end|bottom" android:layout_marginRight="@dimen/fab_margin"> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" > <ImageView android:id="@+id/image_avatar" android:layout_width="20dp" android:layout_height="20dp" android:src="@android:color/holo_red_dark" android:layout_centerHorizontal="true" /> </RelativeLayout> </android.support.design.widget.CoordinatorLayout> </RelativeLayout> 

UpDate:

I think you need this

code:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.example.softeng.aab.MainActivity" tools:showIn="@layout/activity_main"> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="5dp" > <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/card_view" card_view:cardCornerRadius="1dp" android:foreground="?android:attr/selectableItemBackground" android:layout_marginTop="5dp"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" > <ProgressBar android:id="@+id/progress" android:visibility="visible" style="?android:attr/progressBarStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /> </RelativeLayout> <LinearLayout android:id="@+id/content_loading" android:visibility="invisible" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:padding="5dp" android:orientation="vertical"> <TextView android:id="@+id/text_description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="@dimen/abc_text_size_medium_material" android:layout_marginBottom="5dp" /> <TextView android:id="@+id/text_owner" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="@dimen/abc_text_size_small_material" android:layout_marginBottom="5dp" /> <TextView android:id="@+id/text_networks" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="@dimen/abc_text_size_small_material" /> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="5dp" /> </LinearLayout> </android.support.v7.widget.CardView> </RelativeLayout> <LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="100dp" app:layout_anchor="@id/card_view" app:layout_anchorGravity="right|end|bottom" android:layout_marginRight="@dimen/fab_margin"> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="100dp" android:layout_margin="5dp" > <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/image_avatar" android:layout_width="20dp" android:layout_height="20dp" android:src="@android:color/holo_red_dark" android:layout_centerHorizontal="true" /> </RelativeLayout> </android.support.design.widget.CoordinatorLayout> </RelativeLayout> 

To change Image in round shape, just change ImageView to de.hdodenhof.circleimageview.CircleImageView , it will solve your problem.

add below dependencies in the build.gradle file to create a round image.

  compile 'de.hdodenhof:circleimageview:2.0.0