Imageview on the top of cardview

Question

I have circular imageview that I need to align above cardview but it should be like half circle of the image will be outside the cardview and remaining half circle of the image to be inside cardview. Like top border center of cardview will have circular imageview present on it.

How can I do this, I will be unable to upload image because my proxy dont allow me sorry for inconvenience.

Answer 1

This can be done like so.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    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"
    tools:context="com.simplebox.demo.MainActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/first"
        app:cardBackgroundColor="@android:color/white"
        app:cardCornerRadius="@dimen/cardview_default_radius"
        app:cardElevation="4dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        card_view:cardUseCompatPadding="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="#FFF000">
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        android:background="#000000"
        android:contentDescription="@null" />

</FrameLayout>

Output will be. Use Circular ImageView for round Image.

Answer 2

try out this code

<android.support.design.widget.FloatingActionButton
    android:id="@+id/btn_contacts"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:scaleType="center"
    android:src="@drawable/ic_contacts_36px"
    app:fabSize="normal"
    app:layout_anchor="@id/ll_cardView"
    app:layout_anchorGravity="center|top" />

change app:layout_anchor id name to your card view id.