Develop Reference

RelativeLayout with overlapping views

I need to create a UI design like image below. I have used RelativeLayout, but the top view is hiding behind the CardView. I have tried so many ways, couldn't get it done.
here is my code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="150dp"
tools:context=".activity.LoginActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:elevation="4dp"
android:layout_margin="10dp"
>
</android.support.v7.widget.CardView>
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:background="#drawable/square_items">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_aboutus"/>
</FrameLayout>
</RelativeLayout>

You need to put ImageView in Cardview so that elevation becomes equal for both. Try this
<?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="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:elevation="4dp"
android:padding="10dp"
app:cardCornerRadius="6dp">
</android.support.v7.widget.CardView>
</RelativeLayout>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#color/red" />
</android.support.v7.widget.CardView>
</RelativeLayout>
</RelativeLayout>

How to make two cardview scrolling horizontally?

I have two cardview which have different childview and i want them to display at the bottom of my screen and want them horizontally scrolling, i have read other docs. but none of them fits for me. i have tried Horizontalscrollview but it didn't help.
Thanks in advance.
<android.support.v7.widget.CardView
android:id="#+id/cardViewDemo1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:elevation="5dp"
app:cardBackgroundColor="#e4a455"
app:cardCornerRadius="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:weightSum="1">
<FrameLayout
android:id="#+id/frameDemoOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".2">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="3dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="3dp"
android:scaleType="fitXY"
android:src="#drawable/demo_one" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/frame" />
</FrameLayout>
<android.support.v7.widget.CardView
android:id="#+id/cardViewDemo3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_weight=".8"
app:cardBackgroundColor="#e9e6e3"
app:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="DEMOVIDEOONE"
android:textColor="#c9750f"
android:textSize="15sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/cardViewDemo2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:elevation="5dp"
app:cardBackgroundColor="#e4a455"
app:cardCornerRadius="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
android:weightSum="1">
<FrameLayout
android:layout_weight=".2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/demo_one" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/frame" />
</FrameLayout>
<android.support.v7.widget.CardView
app:cardBackgroundColor="#e1b784"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_weight=".8"
app:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="DEMOVIDEOONE"
android:textColor="#fff"
android:textSize="15sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v7.widget.CardView>

Use NestedScrollView as a container of two CardView.
Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/card_view_one"
android:layout_width="300dp"
android:layout_height="200dp">
<!-- Content -->
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_view_two"
android:layout_width="300dp"
android:layout_height="200dp">
<!-- Content -->
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>

Android - CardView contents not being displayed

I am trying to create three CardView, with each of them containing some ImageView and TextView. I am not using RecyclerViewas I will always have these 3 CardViews in that activity. But why are the contents of the CardViewsuch as the texts being displayed (both in Preview and the app) ?
This is what I get:
Here is my XML code for the activity. I have set the corresponding values in strings.xml.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
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.example.yankee.cw.ll_home">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
app:cardUseCompatPadding="true"
android:id="#+id/card_view0"
android:layout_gravity="center"
android:padding="16dp"
android:clickable="true"
card_view:contentPadding="24dp"
android:foreground="?android:attr/selectableItemBackground"
android:layout_width="match_parent"
android:layout_height="200dp"
card_view:cardBackgroundColor="#color/cardview_light_background"
card_view:cardElevation="#dimen/cardview_default_elevation"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:weightSum="1"
android:layout_height="0dp">
<ImageView
android:layout_width="0dp"
android:layout_weight="0.15"
android:layout_height="match_parent" />
<TextView
android:layout_width="0dp"
android:layout_weight="0.70"
android:layout_gravity="center"
android:textAllCaps="true"
android:text="#string/ll_home_card_title_1"
android:layout_height="match_parent" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.15"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:text="#string/ll_home_card_content_1"
android:layout_height="0dp" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
app:cardUseCompatPadding="true"
android:id="#+id/card_view1"
android:layout_gravity="center"
android:padding="16dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:layout_width="match_parent"
android:layout_height="200dp"
card_view:cardBackgroundColor="#color/cardview_light_background"
card_view:cardElevation="#dimen/cardview_default_elevation"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:weightSum="1"
android:layout_height="0dp">
<ImageView
android:layout_width="0dp"
android:layout_weight="0.15"
android:layout_height="match_parent" />
<TextView
android:layout_width="0dp"
android:layout_weight="0.70"
android:layout_gravity="center"
android:textAllCaps="true"
android:text="#string/ll_home_card_title_2"
android:layout_height="match_parent" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.15"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:text="#string/ll_home_card_content_2"
android:layout_height="0dp" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
app:cardUseCompatPadding="true"
android:id="#+id/card_view2"
android:layout_gravity="center"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="200dp"
card_view:cardBackgroundColor="#color/cardview_light_background"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:weightSum="1"
android:layout_height="0dp">
<ImageView
android:layout_width="0dp"
android:layout_weight="0.15"
android:layout_height="match_parent" />
<TextView
android:layout_width="0dp"
android:layout_weight="0.70"
android:layout_gravity="center"
android:textAllCaps="true"
android:text="#string/ll_home_card_title_3"
android:layout_height="match_parent" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.15"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:text="#string/ll_home_card_content_3"
android:layout_height="0dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>

you need to set height in LinearLayout to match_parent, not 0dp,
and also the last TextView in each CardView is set to 0 height, so you should change it, you can use weights inside LinearLayout but not on it (unless it is inside other linearlayout)

Android put Cardview top of parent Cardview in RelativeLayout

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>

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>

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
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
Wrap "linearLayout3" & "robot_dialog_icon" inside individual CardViews.

I don't Understand what you want but I am thinking you want below thing.
If you want this type of like 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 require 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 dependecies in build.gradle file to create Round image.
compile 'de.hdodenhof:circleimageview:2.0.0

Designing with card view?

You can see in below image i have to place a image view center of strike in the first card view partition.i know how to do if the card view got a fixed size but in this case i should wrap it according to screen size.what i yet is pasting below.i have tried many ways but not that image getting in exact position in all devices..
<LinearLayout 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="match_parent"
android:orientation="vertical"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<ImageView
android:id="#+id/img_thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/ic_profile_thumb" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
card_view:cardCornerRadius="1dp"
card_view:cardElevation="1dp">
</android.support.v7.widget.CardView>
</LinearLayout>
Any help will be appreciated..
For reference...

This layout will produce the desired effects! (You'll have to put in margins etc yourself).
It uses CoordinatorLayout, which you can find out more about here
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="192dp"
/>
<View
android:layout_width="match_parent"
android:layout_height="56dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="192dp"/>
</LinearLayout>
<View
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#android:color/black"
android:layout_margin="16dp"
app:layout_anchor="#+id/image"
app:layout_anchorGravity="bottom|end"
/>
<android.support.design.widget.FloatingActionButton
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#android:color/black"
android:layout_margin="16dp"
app:layout_anchor="#+id/card"
app:layout_anchorGravity="bottom|end"
/>
</android.support.design.widget.CoordinatorLayout>

What about this...
<LinearLayout 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="match_parent"
android:orientation="vertical"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="1dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_profile_thumb" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/red_primary_color"></LinearLayout>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="right|bottom"
android:layout_marginBottom="25dp"
android:layout_marginRight="20dp"
android:src="#drawable/abc_ic_menu_cut_mtrl_alpha" />
</FrameLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
card_view:cardCornerRadius="1dp"
card_view:cardElevation="1dp">
</android.support.v7.widget.CardView>
</LinearLayout>