BottomNavigationBar, Fab Button and ActionBar in a single layout

Question

I want to have my MainActivity layout to be like this The top white bar is the NotificationBar. The grey color bar is ActionBar. The center white content is the place I want to place my fragments (upon selection using the Bottombar)

This is my layout file for the same. The Toolbar is hiding behind the notificationbar after installing the app on my device. What changes shall I do to make it work?

<LinearLayout 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">

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="top"
    android:foregroundGravity="top"
    android:layout_gravity="top"
    android:background="@color/colorPrimary"
    android:id="@+id/toolbar">

</android.support.v7.widget.Toolbar>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1">


    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        app:useCompatPadding="true"
        android:src="@drawable/ic_add_dark" />

</FrameLayout>

<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:gravity="bottom"
    android:foregroundGravity="bottom"
    android:layout_gravity="bottom"
    app:bb_tabXmlResource="@xml/bottombar_tabs"
    app:bb_inActiveTabAlpha="0.6"
    app:bb_inActiveTabColor="#ffffff"
    app:bb_activeTabColor="#ffffff"
    app:bb_behavior="shifting|underNavbar"/>

Answer 1

Try this xml code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="@color/gray"
        android:foregroundGravity="top"
        android:gravity="top">

    </android.support.v7.widget.Toolbar>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">


        <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:backgroundTint="@color/orange"
            android:src="@drawable/ic_add_black_24dp"
            app:fabSize="normal"
            app:useCompatPadding="true" />

    </FrameLayout>

    <!--<com.roughike.bottombar.BottomBar-->
    <!--android:id="@+id/bottomBar"-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="56dp"-->
    <!--android:gravity="bottom"-->
    <!--android:foregroundGravity="bottom"-->
    <!--android:layout_gravity="bottom"-->
    <!--app:bb_tabXmlResource="@xml/bottombar_tabs"-->
    <!--app:bb_inActiveTabAlpha="0.6"-->
    <!--app:bb_inActiveTabColor="#ffffff"-->
    <!--app:bb_activeTabColor="#ffffff"-->
    <!--app:bb_behavior="shifting|underNavbar"/>-->

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/green"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/main">


    </android.support.design.widget.BottomNavigationView>

    </LinearLayout>

Bottom navigation view Helper class :

public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}

and in java file

 BottomNavigationView bnav = (BottomNavigationView) findViewById(R.id.bottomnav);
       BottomNavigationViewHelper.disableShiftMode(bnav);

Answer 2

This is the example of BottomNavigationBar, Fab Button, ActionBar and Navigation Drawer also in a single layout. Hope it might help you...

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.alisonstech.pos.ui.HomeActivity"
    tools:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="center"
                android:background="?attr/colorPrimary"
                android:gravity="center"
                android:theme="@style/AppTheme.ActionBar"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:titleTextColor="@color/text_color_light">

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="?attr/actionBarSize"
            android:layout_marginTop="?attr/actionBarSize" />

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="?android:attr/windowBackground"
            app:menu="@menu/home_navigation" />

        <io.github.yavski.fabspeeddial.FabSpeedDial
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="?attr/actionBarSize"
            app:fabGravity="bottom_end"
            app:fabMenu="@menu/fab_menu"
            app:miniFabBackgroundTint="@android:color/white"
            app:miniFabDrawableTint="?attr/colorPrimaryDark"
            app:miniFabTitleTextColor="?attr/colorPrimaryDark" />

        </android.support.design.widget.CoordinatorLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/nvView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/white"
            android:paddingTop="@dimen/activity_vertical_margin"
            app:menu="@menu/drawer_navigation" />

</android.support.v4.widget.DrawerLayout>