How to show BottomNavigation CoordinatorLayout in Android

Question

In my application I want show BottomNavigation bottom of CoordinatorLayout and for this I write below code :

<?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"
    android:fitsSystemWindows="true"
   >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <include
                android:id="@+id/mainToolbar"
                layout="@layout/toolbar_main" />

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

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


    <com.aurelhubert.ahbottomnavigation.AHBottomNavigationViewPager
        android:id="@+id/mainViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/mainBottomNavigation"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/mainBottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:layout_anchorGravity="bottom"
        app:selectedBackgroundVisible="true" />

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

But when run application show me BottomNavigation top of CoordinatorLayout!

How can I show BottomNavigation bottom of CoordinatorLayout ?

Solution

I hope the answer is not too late. I just had the same problem, I used android:layout_gravity="bottom". I have a Toolbar, a BottomNavigationView, and in the middle, I have a FrameLayout that is used as a placeholder for a fragment. Here is my XML layout:

<?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"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/bg_main"
  android:minHeight="?attr/actionBarSize">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorTab"
    app:layout_scrollFlags="scroll|enterAlways"
    />
</android.support.design.widget.AppBarLayout>

<FrameLayout
    android:id="@+id/fragment_placeholder"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/slide_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:itemBackground="@color/colorTab"
    app:itemIconTint="@drawable/bottom_navigation_toolbar"
    app:itemTextColor="@drawable/bottom_navigation_toolbar"
    app:menu="@menu/bottom_bar"
    />

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

Also check out this question, it uses almost the same layout, and it also shows how to change the behavior of the BottomNavigationView so that it hides when you scroll. If you wish to implement that feature make sure to create the class BottomNavigationBehavior (or whatever you want to call it) and add this line to your BottomNavigationView in XML:

app:layout_behavior="com.yourpackage.yourpackage.BottomNavigationBehavior"

Hope it helps!

Comments

[A1m]

This will cause the FrameLayout to be too large and continue behind the BottomNavigationView?

[Suleyman]

@A1m you'd have to check that, I believe not, but you can always resize it.

[A1m]

My problem is that for certain views the BottomNavigationView is gone ... so I would need to write special code to handle that unless the layout takes care of it. (Which it doesn't here)

[Suleyman]

@A1m hmm, I have a similar setup where I hide BottomNavigationView in some cases. Just looked at my code, the layout does continue behind the view, but I just set bottom margin to account for the BottomNavigationView.