Bottom Navigation with fab

android android-layout android-coordinatorlayout floating-action-button bottomnavigationview

27,288

Solution 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.

Solution 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>

Solution 3

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:

Solution 4

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>

Solution 5

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>

View more solutions

27,288

Author by

Sumit Shukla

Connect with me LinkedIn

Updated on July 23, 2022

Comments

Sumit Shukla almost 2 years

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>

ravi almost 6 years

@ShuklaSwapnil Yes you can use anything that you think works best for your requirements. What I understood was that you wanted a BottomBar with FAB on the middle. BottomAppBar is specifically used for: Access to a bottom navigation drawer. I quoted this from guidelines
ravi almost 6 years

make sure you read this and this
Sumit Shukla almost 6 years

And +1 for your answer.
Sumit Shukla almost 6 years

But how will i adjust menu items not to be centered.
ravi almost 6 years

@ShuklaSwapnil How many menu items to do we have? If you only have three menu items as shown in the picture; is it necessary that they be not centered?
Sumit Shukla almost 6 years

Fab is having image in itself.
ravi almost 6 years

If you have two menu items and they are centered relative to each other and the FAB too, then you can have an empty menu item on the middle to achieve centering.
Kunwar Shekhar Singh over 4 years

Worked like a charm !
Fazal Jarral about 4 years

I was thinking how could i get menu items to left side of fab. Works perfect.
Cyd over 3 years

The FAB will not working if you want to use navigation component,
vijay kumar over 3 years

cant use BottomAppBar when we use action bar