How to anchor a custom item/layout on a BottomAppBar instead of a floating action button?

Question

I want to anchor a custom item/layout/element on a BottomAppBar instead of a floating action button. For example, anchoring a relative Layout that contains multiple buttons. here is my code.

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/white"
    app:fabCradleRoundedCornerRadius="50dp"
    app:fabCradleMargin="10dp">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationAppView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_menu"
        android:background="@android:color/transparent"
        android:layout_marginRight="20dp"
        app:labelVisibilityMode="labeled"/>

</com.google.android.material.bottomappbar.BottomAppBar>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/bottomAppBar"
    android:layout_gravity="center"
    android:gravity="center">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="but1"/>

    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="but2"
        android:layout_toRightOf="@+id/button_1"/>
</RelativeLayout>

I want the output to be something like this