Bottom Navigation with fab
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>
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>
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.
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:
