How should I make this button design responsive on android?

Question

I've spent the last two days trying to wrap my head around this layout I got asked by the designer to do, the shape is something like:

|         ___         |
|___ ___ /   \ ___ ___|
|btn|btn\\btn//btn|btn|    
|___|____\\_//____|___|

That part of the screen is a button row at the bottom of the screen, the problem comes with responsiveness, if I use an image button on the non square buttons they dont resize properly, adding margins instead of reshaping the image itself, but if I use regular buttons, i lose the cool shapes they ask for. Any ideas/tutorials I could use? Maybe I'm not looking it up as it should be done, but I don't seem to find anything relevant to my problem.

Answer 1

I have made this with the help of floating action button and the bottom navigation view.Check out given code.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple_500"
    tools:context=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/btmbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/purple_200"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="40dp"
        app:fabCradleVerticalOffset="10dp">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/menu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:background="@android:color/transparent"
            app:labelVisibilityMode="unlabeled"
            app:menu="@menu/btm_menu" />

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="10"
        android:background="@null"
        android:elevation="0dp"
        android:src="@drawable/fire"
        app:backgroundTint="@android:color/transparent"
        app:elevation="0dp"
        app:fabSize="normal"
        app:layout_anchor="@id/btmbar"
        app:tint="@null" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

Output will look like this:

You can make the changes in below properties to make the space between the bottom app bar.

    app:fabCradleMargin="16dp"

    app:fabCradleRoundedCornerRadius="40dp"

    app:fabCradleVerticalOffset="10dp"