How to implement a bottom navigation with floating actionbar center

Question

I am using bottom navigation bar with view pager for my android app and it has 5 tabs and i want the middle tab to circularly or like a floating action bar in middle

here is the idea https://github.com/ittianyu/BottomNavigationViewEx/blob/master/read_me_images/center_fab.jpg

check this https://stackoverflow.com/a/53865195/7666442 – AskNilesh May 03 '19 at 07:50 — AskNilesh, May 03 '19 at 07:50

score 0 · Answer 1 · answered May 03 '19 at 11:44

Take a look at this article:
https://medium.com/material-design-in-action/implementing-bottomappbar-material-components-for-android-f490c4a01708

It uses the official librarys, which sadly are still at alpha Stage, but they work just fine for me. So in short: add

implementation 'com.google.android.material:material:1.1.0-alpha05'

to your build.gradle

Then build up your activity.xml like this:

<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 content here>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_appbar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:hideOnScroll="true"
        app:layout_scrollFlags="scroll|enterAlways"
        app:navigationIcon="@drawable/ic_menu_white_24dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_stop_white_24dp"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@+id/bottom_appbar"
        app:tint="@color/colorWhite" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

And you should be good to go

How to implement a bottom navigation with floating actionbar center

1 Answers1