How would I be able to "cut out" a circular shape for a fab button in my ui background?

Question

I'm trying to achieve the same as what's boxed in the image only I'm a programmer and I'm not sure how to start.

Could this be achieved with a drawable? If so, would yo be able to point me in the right direction, or is it much more complex and something a graphics designer would need to achieve?

Answer 1

You can simply do this using the help of Material BottomAppBar along with Floating Action Button(FAB). You need to simply place both of them under the NestedScrollView of the layout which is shown below

<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Note: A RecyclerView can also be used -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="100dp"
        android:clipToPadding="false">

        <!-- Scrollable content -->

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        app:navigationIcon="@drawable/ic_menu_24dp"
        app:menu="@menu/bottom_app_bar"
        />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_add_24dp"
        app:layout_anchor="@id/bottomAppBar"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Set these attributes accordingly to achieve the shape what you want. Use fabCradleMargin and fabCradleRoundedCornerRadius attributes in BottomAppBar to set the rounded Corner and margin.

Kindly refer to the official documentation for more information about implementation.

Answer 2

You need to have a basic knowledge of how to create custom Path in Android using code or XML I would suggest not doing something like this, before learning about the same

Here is a similar build up that can help you