Develop Reference

How to set position floatingactionbutton abave bottom bar

I have activity with FloatingActionButton and BottomNavigationView.
I want FloatingActionButton have position above BottomNavigationView. but no matter what I do, it is always with BottomNavigationView like on img
<?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"
tools:context=".MainActivity2">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
app:defaultNavHost="true"
app:navGraph="#navigation/mobile_navigation" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/ic_baseline_addchart_24" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/yu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="#menu/bottom_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Place FAB button inside the constraint layout and then set the property
app:layout_constraintTop_toBottomOf="#id/fab"
to your Navigation View and
app:layout_constraintBottom_toTopOf="#id/bottom_bar"
android:layout_margin="16dp"
In this way the FAB button will always stay on top of navigation view.

here you go just replace it with your floatbutton tag
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginBottom="70dp"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_baseline_addchart_24" />
the bottom navigation is almost 56dp height so what we did is we added 70dp to marginBottom to lift it above the navigation and it will stay there always, you can change that value as your likings :)

Android layout problem, ImageView not appearing in desired place (between two other Views)

I'm new to android development and I'm trying to make a screen (a layout) that resembles this: a spinner, and two text fields on top, a thumbnail (ImageView) just below on the left side, and a fragment container view below that I will use to show a different page. Right now I'm not looking for beautiful design, I just want to make android display it like this.
The problem is that, even though on the design tab of android studio the thumbnail is shown in the correct place, on runtime is completely wrong:
Here is the Component Tree and the layout's xml in case it's useful:
<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:id="#+id/activity_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NoteActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:theme="#style/Theme.NoteKeeper.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.NoteKeeper.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/include"
layout="#layout/content_note" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_gravity="bottom|center">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center|left"
android:layout_marginStart="4dp"
app:layout_constraintBottom_toTopOf="#+id/fragmentContainerView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView2"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="367dp"
android:layout_gravity="bottom|center"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:navGraph="#navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="#dimen/fab_margin"
android:layout_marginBottom="16dp"
app:srcCompat="#android:drawable/ic_menu_camera" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
EDIT:
In the end, I had to use constraint layout like this:
<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:id="#+id/activity_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NoteActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarContentNoteLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:theme="#style/Theme.NoteKeeper.AppBarOverlay"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.NoteKeeper.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/include"
layout="#layout/content_note"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarContentNoteLayout" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/include"
tools:srcCompat="#tools:sample/avatars" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#AC1A1A"
android:backgroundTint="#C51111"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:navGraph="#navigation/nav_graph" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#android:drawable/ic_menu_camera" />
</androidx.constraintlayout.widget.ConstraintLayout>
Added tint so that the fragment view would show the borders

The problem is you are using layout_gravity in your xml code that works in some view groups like FrameLayout but it doesn't work in ConstraintLayout. And the second fact is you don't need to use nested ConstraontLayouts and one will handle All of your ui requirements. So for the first one that is AppBar you can use app:layout_constraintTop_toTopOf="parent" and for content note, you can constraint it to bottom of the appBar as well. Like this: app:layout_constraintTop_toBottomOf="#+id/appBar" and also for the image thumbnail use this: app:layout_constraintTop_toBottomOf="#+id/contentNote" together with app:layout_constraintStart_toStartOf="parent" and for the last one as fragmentContainer you can use this app:layout_constraintTop_toBottomOf="#+id/imageView".
This way all of them will be constrainted to each other and works well. And for any other constraints for them related to the parent layout, you can add their constraints as well.

Your constraints are wrong in the ImageView.
Try getting rid of the following line
app:layout_constraintTop_toTopOf="parent"
in your ImageView as this line of code is trying to pull the top of your image all the way to the top of the parent.
Lmk if that works. Otherwise, I can send you a complete layout code snippet instead.

FAB doesn't stick to bottom|end when using ViewPager

I'm using a fragment with a ViewPager+TabLayout:
<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:orientation="vertical"
tools:context=".ui.view.InventoryOverviewFragment">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="scrollable"
app:tabTextColor="#android:color/white" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
The ViewPager in turn hosts three different options you can click on (goods received, goods sold, inventory levels). Two of these fragments contain a recyclerView and should have a FAB (goods received and goods sold).
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.view.InventoryReceivedFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewReceived"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/addReceived"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="24dp"
android:src="#drawable/ic_add_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
It is supposed to be on the bottom right corner when I test it on my device, however, the FAB is always on the top right corner. As shown in the code, I've also tried using a constraintLayout where the constraints for bottom and end are set, but no luck...
Could someone pls help me out with this? It's driving me crazy ^-^

You make the ViewPager height to match the constraints wit 0dp, and you didn't add any constraints that controls its height; so add app:layout_constraintBottom_toBottomOf="parent" to the ViewPager so that it always has the entire height of the parent so that the underlying tabs will take the entire height as well.
If it didn't work, then make the ViewPager height as match_parent

You need to give viewpager bottom constraint.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="scrollable"
app:tabTextColor="#android:color/white" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

Frame layout is not positioned properly inside ConstraintLayout

I've placed a FrameLayout inside ConstraintLayout and I think it's constrained properly. But in the app, it's not positioned properly. FrameLayout is replaced by appropriate fragment at runtime.
<?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=".ui.chapters.ChapterActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_chapter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Chapters"
app:titleTextColor="#color/White" />
<FrameLayout
android:id="#+id/chapter_fragment_container_frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="500dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.388"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_chapter"
app:layout_constraintVertical_bias="1.0" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:itemIconTint="#color/White"
app:itemTextColor="#color/Wheat"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/chapter_bottom_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</androidx.constraintlayout.widget.ConstraintLayout>
Here's what is shown in IDE:
But this is what I get in device:
FrameLayout should be placed in-between toolbar & the bottom navigation bar, it should be done by LinearLayout/Relative one, haven't tried though.. but what's wrong with this.

Change this FrameLayout part as below:
<FrameLayout
android:id="#+id/chapter_fragment_container_frameLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:minHeight="500dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.388"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_chapter"
app:layout_constraintVertical_bias="1.0" />
The reason why it is happening is because of match_constraint. If you have defined constraint for top, bottom, start, and end you should define 0dp for height and width to View.

Change framelayout's android:layout_height property from "match_parent" to "wrap_content"

Change FrameLayout height to 0dp,
<FrameLayout
android:id="#+id/chapter_fragment_container_frameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:minHeight="500dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.388"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_chapter"
app:layout_constraintVertical_bias="1.0" />

Bottom Navigation with fab

I am currently working with BottomNavigationView and FloatingActionButton.
What i want to achieve is this below design:
And what i have tried:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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"
app:layout_insetEdge="bottom"
tools:context=".activity.BottomNavPrimary">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_insetEdge="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_primary"></android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>

Your design looks as if you want to use the new BottomAppBar from the MaterialComponents that will fully be release with Android P. Especially if the left icon stands for a kind of side navigation it could be the right navigation element.
However, you have to be aware, that the elements on the left and right of the FAB have a different purpose than a bottom navigation. Instead of being entry points to "primary destinations" in an app, the BottomAppBar is defined as:
A bottom app bar displays navigation and key actions at the bottom of mobile screens.
So it is for page actions (like opening the dashboard or search). More explanation can be found in the design documentation.
I haven't had a chance to implement it yet (because I really needed it with a bottom navigation), but here is the code documentation example:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:navigationIcon="#drawable/ic_menu_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bar"/>
</android.support.design.widget.CoordinatorLayout>
So to me, it sounds as if you define your two page menu options and since the FAB is anchored to the bar it will push them to the sides.
The documentation also includes options for the optional FAB cradle that was shown during this year's Google I/O and shows how to handle menu and click handling.
Here is another useful link on how to set up gradle to include the new material components in your project.

I used this, to get something similar.
BottomNavigationView + FloatingActionButton
<androidx.constraintlayout.widget.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_button"
style="#style/Widget.MaterialComponents.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:backgroundTint="#color/colorPrimaryLight"
app:elevation="#dimen/padding_10"
app:layout_constraintBottom_toTopOf="#id/navigation"
app:layout_constraintLeft_toRightOf="#id/navigation"
app:layout_constraintRight_toLeftOf="#id/navigation"
app:layout_constraintTop_toBottomOf="#id/navigation"
app:layout_constraintTop_toTopOf="#id/navigation"
app:layout_insetEdge="bottom"
app:srcCompat="#drawable/ic_add_black_24dp"
app:tint="#color/colorPrimary" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimaryDark"
android:visibility="visible"
app:itemIconTint="#drawable/bottom_navigation_icons"
app:itemTextColor="#drawable/bottom_navigation_icons"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>

My solution simple and cool.
Parent layout must be a CoordinatorLayout and use BottomAppBar with FloatingActionButton as you can see below
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<-- your other views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/homePage"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/your_drawable"
android:padding="#dimen/small_margin"
app:tint="#color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:padding="#dimen/small_margin"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/your_drawable" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/categories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_drawable"
app:backgroundTint="#color/colorPrimary"
app:layout_anchor="#id/navigation"
app:tint="#android:color/white" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Result:

You could wrap your BottomNavigationView and your FloatingActionButton in a ConstraintLayout and use the following constraints on the FloatingActionButton:
app:layout_constraintTop_toBottomOf="#id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="#id/bottomNavPrimary"
app:layout_constraintLeft_toRightOf="#id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="#id/bottomNavPrimary"
This will center your FloatingActionButton vertically and horizontally relative to your BottomnavigationView
I hope that is what you asked for.
Final code would look something like this:
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="#id/bottomNavPrimary"
app:layout_constraintLeft_toRightOf="#id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="#id/bottomNavPrimary"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toTopOf="parent"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_primary" />
</android.support.constraint.ConstraintLayout>

I think you can do this with bottomAppBar and embed some button inside that like below
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:fabCradleDiameter="8dp"
style="#style/Widget.MaterialComponents.BottomAppBar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/btnReport"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/ic_play"
android:layout_weight="1"
android:paddingRight="20dp"
/>
<ImageButton
android:id="#+id/btnPlayWords"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/ic_show_chart"
android:layout_weight="1"
android:paddingLeft="20dp"
/>
</LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fabAddWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>