How i can add fab in the drawer header?

Question

I have tried already but not able to develop same as shown in above picture.Below is the image which i develop.

when i try to develop it looks like this image

kindly tell me how to make design like this.Below is my source code for this.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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="wrap_content"


    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <LinearLayout
        android:id="@+id/ll_Nav_header_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="@drawable/side_nav_bar"

        android:orientation="vertical"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp">


        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/nav_header_desc"
            android:paddingTop="@dimen/nav_header_vertical_spacing"

            app:srcCompat="@mipmap/ic_launcher_round" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            android:text="@string/nav_header_title"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/nav_header_subtitle" />
    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="40dp"
        app:layout_anchor="@id/ll_Nav_header_main"
        app:layout_anchorGravity="end|center_vertical"
        android:layout_marginStart="80dp"
        app:borderWidth="5dp"
        android:padding="10dp"
        android:background="@color/teal_200"
        android:translationX="@dimen/cardview_default_elevation"
        android:transformPivotX="@dimen/activity_horizontal_margin"
        android:outlineAmbientShadowColor="@color/black"
        app:shapeAppearance="@style/Theme.MyApplication.PopupOverlay"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

score 0 · Answer 1 · answered Nov 19 '21 at 18:20

Based on my answer here in a similar situation you can achieve this using a custom ShapeAppearanceModel and set a custom CutoutCircleEdgeTreatment( a subclass of EdgeTreatment) to the Right Edge only.

Example Usage:

LinearLayout linearLayout = findViewById(R.id.ll_Nav_header_main);
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
        .toBuilder()
        .setRightEdge(new CutoutCircleEdgeTreatment(getResources(), 80, 20))
        .build();
MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this, android.R.color.holo_blue_dark));
ViewCompat.setBackground(linearLayout, shapeDrawable);

Xml:

<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="@android:color/white">

    <LinearLayout
        android:id="@+id/ll_Nav_header_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginEnd="70dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            app:srcCompat="@mipmap/ic_launcher_round" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="35dp"
            android:text="Header Title Text"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="35dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />

    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="-35dp"
        app:backgroundTint="@android:color/holo_blue_dark"
        app:elevation="3dp"
        app:fabCustomSize="70dp"
        app:layout_constraintTop_toTopOf="@+id/ll_Nav_header_main"
        app:layout_constraintStart_toStartOf="@+id/ll_Nav_header_main"
        app:layout_constraintEnd_toEndOf="@+id/ll_Nav_header_main"
        app:layout_constraintHorizontal_bias="1"
        app:srcCompat="@android:drawable/ic_menu_close_clear_cancel"
        app:tint="@android:color/white" />

</androidx.constraintlayout.widget.ConstraintLayout>

Result:

How i can add fab in the drawer header?

1 Answers1