I am trying to achieve a custom Z-shaped curved layout at the top of my screen similar to the design shown in the image.

The entire top section is a single toolbar/header layout. The video call and voice call icons are also part of the same toolbar and are only visually separated by the curve. I am not trying to create multiple toolbars or floating buttons.The curve starts from the top toolbar area and goes downward with rounded edges before the screen content begins.

I tried it with custom vector but failed to get desired design.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="300dp"
    android:viewportWidth="400"
    android:viewportHeight="300">
    <path
        android:fillColor="#81C784"
        android:pathData="M0,0 H260 C310,0 310,100 400,100 V300 H0 Z" />
</vector>

The complete xml code.

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    android:background="@color/white">

    <!-- Top Curve Header Background -->
    <ImageView
        android:id="@+id/topHeaderBg"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:scaleType="fitXY"
        android:src="@drawable/bg_chat_top_curve"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="ContentDescription" />

    <!-- Back Arrow (as seen in test.jpg) -->
    <ImageButton
        android:id="@+id/backBtn"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="12dp"
        android:layout_marginTop="40dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:src="@drawable/ic_arrow_back_24px"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tint="@color/white"
        tools:ignore="ContentDescription" />

    <!-- Contact Info (Avatar + Text) -->
    <LinearLayout
        android:id="@+id/contactInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="@+id/backBtn"
        app:layout_constraintStart_toEndOf="@+id/backBtn"
        app:layout_constraintTop_toTopOf="@+id/backBtn">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profileImage"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_user"
            app:civ_border_color="#EEEEEE"
            app:civ_border_width="1dp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/contactName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Larry Machigo"
                android:textColor="@color/white"
                android:textSize="16sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/contactSubtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Online"
                android:textColor="#DDDDDD"
                android:textSize="12sp" />
        </LinearLayout>
    </LinearLayout>

    <!-- Call Buttons - Positioned in the White Pocket -->
    <LinearLayout
        android:id="@+id/callActions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="40dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageButton
            android:id="@+id/videoCallBtn"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:visibility="gone"
            android:background="@drawable/bg_circle_action"
            android:padding="12dp"
            android:scaleType="centerInside"
            android:src="@drawable/ic_video_call"
            app:tint="@color/black"
            tools:ignore="ContentDescription" />

        <ImageButton
            android:id="@+id/voiceCallBtn"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:visibility="gone"
            android:layout_marginStart="8dp"
            android:background="@drawable/bg_circle_action"
            android:padding="12dp"
            android:scaleType="centerInside"
            android:src="@drawable/ic_voice_call"
            app:tint="@color/black"
            tools:ignore="ContentDescription" />
    </LinearLayout>

    <!-- Message area placeholder -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/chatRecyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/topHeaderBg" />

    <!-- Bottom Bar -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="12dp"
        app:layout_constraintBottom_toBottomOf="parent">

        <ImageButton
            android:id="@+id/addBtn"
            android:layout_width="44dp"
            android:layout_height="44dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_add_black_24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="ContentDescription" />

        <LinearLayout
            android:id="@+id/inputContainer"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:background="@drawable/bg_chat_input"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingStart="16dp"
            android:paddingEnd="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/micBtn"
            app:layout_constraintStart_toEndOf="@+id/addBtn"
            app:layout_constraintTop_toTopOf="parent">

            <EditText
                android:id="@+id/messageEditText"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                android:hint="Type a message..."
                android:imeOptions="actionSend"
                android:importantForAutofill="no"
                android:inputType="textShortMessage"
                android:textSize="15sp" />

            <ImageButton
                android:id="@+id/emojiBtn"
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/ic_emoji"
                app:tint="#888888"
                tools:ignore="ContentDescription" />
        </LinearLayout>

        <ImageButton
            android:id="@+id/micBtn"
            android:layout_width="44dp"
            android:layout_height="44dp"
            android:layout_marginEnd="4dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_baseline_mic_24"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/cameraBtn"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/black"
            tools:ignore="ContentDescription" />

        <ImageButton
            android:id="@+id/cameraBtn"
            android:layout_width="44dp"
            android:layout_height="44dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/camera"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/black"
            tools:ignore="ContentDescription" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

That's what i created with above code.