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.

Nazler

Answer 1

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.

Reluctant

@Nazler , nice :D – Reluctant

In order to make this work, you'll need CoordinatorLayout as parent – Michaella

Answer 2

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.

Cray

still imageview is behind the card – Boss

remove this line from cardview properties app:cardElevation="4dp" – Phosphene

Answer 3

Do it as follows

<FrameLayout>

    <CardView> //set marginTop of 10 dp so that it will be half the height of CirccularImageView

    <CircularImageView> //set some height to it like 20dp and gravity center horizontal.
</FrameLayout>

Contusion

Answer 4

this will work in your case.

        <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_gravity="center">

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:layout_margin="16dp"
            app:cardElevation="5dp"
            app:cardCornerRadius="8dp">

        </androidx.cardview.widget.CardView>

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/volume"
            android:translationZ="6dp"
            android:layout_gravity="center_horizontal" />
    </FrameLayout>

Hashim

Answer 5

<CardView> //set marginTop of 10 dp so that it will be half the height of CirccularImageView

<CircularImageView> //set some height to it like 20dpand gravity center horizontal.

// also give some elevation to

Carpus