Floating Action Button Refuse to stay in center

Question

Am currently trying to make a geo tracking app however am now stuck trying to implement menu. I saw many different implementation but ultimate went with the bottom navigation bar which would look something like this as the end result

However with all of the tutorials and help pages all of them uses a component called Bottom App Bar which requires it to be used inside a Coordinator Layout.

As am using a google map fragment as my main object to look at I have it inside a constraint layout. So i got around this my putting a coordinator layout inside my constraint layout under my map fragment and then I added everything else in.

This worked out perfectly fine until the final add button thats suppose to be in the center and all nice looking, but it just refuse to go in the center and stays in the bottom right.

When messing around with it most if not all tutorials at the end move the icon /floating action button by using

app:layout_achnor="@id/bottom app bar"(its just an bottom app bar can be named anything you want)

when i apply that line it just gets stuck to the bottom right and just refuse to stay in center no matter what unlike what the other turtorials showed. it would look something like this

I couldn't seem to find anyone else encountering this solution, i tried searching floating action button not centered or aligned and they all came up with the image or icon not centered to the button which is not my issue.

Im still very new to android studio and it's definitely has to do with something in my layout or how ive done the layout of certain components but i just cant seem to figure it out.

Ive currently got around it by just manually specifying the margin limit like so

Is there any way to get it like the way I wanted to ?

here is my 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"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.widget.SearchView
        android:id="@+id/mapSearch"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:queryHint="Search . . ."
        android:iconifiedByDefault="false"
        android:elevation="5dp"
        android:background = "@drawable/bg_search_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

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

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottomAppBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:fabCradleMargin="10dp"
            app:fabCradleRoundedCornerRadius="50dp"
            >
            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/bottomNavigationView"
                android:layout_marginRight="20dp"
                app:labelVisibilityMode="labeled"
                app:menu="@menu/bottom_navigation_menu"
                android:background="@drawable/transparent_background"
                />
        </com.google.android.material.bottomappbar.BottomAppBar>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floating_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/white"
            android:src="@drawable/baseline_add_24"
            android:layout_gravity="bottom|center"
            android:layout_marginBottom="15dp"/>
<!--            app:layout_anchorGravity="center"-->
<!--            app:layout_anchor="@id/bottomAppBar"-->
<!--            />-->
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Never mind I figured it out, it had to do with my theme

In my theme the default theme they set under you res/values/theme.xml is this

<style name="Base.Theme.Coursework2" parent="Theme.Material3.DayNight.NoActionBar">

however make sure you're using this instead

<style name="Base.Theme.Coursework2" parent="Theme.MaterialComponents">

and in my floating action bar my code is this

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floating_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/white"
            android:src="@drawable/baseline_add_24"
            app:layout_anchor="@id/bottomAppBar"
            />