CODEWITHSUNDEEP
androidandroid-coordinatorlayoutbottomnavigationview
OoO 3
OoO 3

Reputation: 113

How to show BottomNavigation CoordinatorLayout in Android

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 ?

Upvotes: 10

Views: 17267

Answers (2)

Biju
Biju

Reputation: 21

This helps me resolve the issue of bottom of view going behind bottom navigation bar. I have resolved it by:

  1. adding app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" to the BottomNavigationView.

  2. Changing the parent layout of ActivityMain to CoordinatorLayout &

  3. Adding android:layout_gravity="bottom" to BottomNavigationView.

Upvotes: 1

Suleyman
Suleyman

Reputation: 2943

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!

Upvotes: 24

Related Questions