Bottom Navigation with fab

Question

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>

Answer 1

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.

Answer 2

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>