Placing BottomNavigationView below a Layout in CoordinatorLayout

Question

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

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

    <!-- This coordinator Layout matches the parent's height, I want to height to match till the BottomNaviagtionView and not below it -->

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/primaryDarkColor"
        app:itemIconTint="@color/primaryColor"
        android:layout_gravity="bottom"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:itemTextColor="@color/primaryTextColor"
        app:menu="@menu/bottom_navigation_items"/>

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

In this Layout, I have placed a BottomNavigationView in a CoordinatorLayout and there is another CoordinatorLayout inside it. The Problem is that the BottomNavigationView overlaps the bottom part of the Inner Coordinator Layout. So need suggestions to make the Inner Coordinator Layout match_parent until BottomNavigationView and not below that.

Why do you need the outer coordinator layout? Use a linear or relative layout instead? — Udit, Jun 20 '18 at 12:09
I needed the Outer Coordinator Layout for the scrolling behavior of BottomNavigationView : https://stackoverflow.com/a/44778453/8540753 — Zain, Jun 20 '18 at 12:22

AskNilesh · Accepted Answer · 2018-06-20T12:30:57.253

Try this

<LinearLayout
    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:orientation="vertical"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorContent"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="match_parent">

        <!-- This coordinator Layout matches the parent's height, I want to height to match till the BottomNaviagtionView and not below it -->

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primaryDarkColor"
        app:itemIconTint="@color/primaryColor"
        android:layout_gravity="bottom"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:itemTextColor="@color/primaryTextColor"
        app:menu="@menu/bottom_navigation_items"/>

</LinearLayout>

EDIT

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/coordinatorContent"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="match_parent">


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

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#ff00"
            app:itemIconTint="#2639c9"
            android:layout_gravity="bottom"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:itemTextColor="#0eec3b"
            app:menu="@menu/mymenu" />
    </LinearLayout>

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

Thank you, but I need the CoordinatorLayout to be the immediate parent of BottomNavigationView for this : https://stackoverflow.com/a/44778453/8540753 so, I did not want a linear layout or Relative Layout — Zain, Jun 20 '18 at 12:26

Anik Dey · Answer 2 · 2020-02-28T03:08:30.730

Let me assume that you are expecting something like that

You want your inner CoordinatorLayout to take the entire screen (until BottomNavigationView) indicated by top and the BottomNavigationView indicated by Bottom Should take as much space as it requires. Just wrap your CoordinatorLayout and BottomNavigationView inside a LinearLayout. I am providing the code below. Check it out if it solves your problem.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/coordinatorContent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">


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

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/primaryDarkColor"
            app:itemIconTint="@color/primaryColor"
            android:layout_gravity="bottom"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:itemTextColor="@color/primaryTextColor"
            app:menu="@menu/bottom_navigation_items"/>
    </LinearLayout>

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

Edited

If you are expecting that regardless of anything your BottomNavigations parent should be a CoordinarotLayout then you can try something like that. I am not sure that it will solve your problem and it is not the perfect solution but give it a try.

<?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:id="@+id/coordinatorContent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </LinearLayout>
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom"
            android:background="@color/primary"
            app:itemIconTint="@color/primary"
            app:itemTextColor="@color/primary"
            app:layout_scrollFlags="scroll|enterAlways|snap" />
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

Thank you, but I need the CoordinatorLayout to be the immediate parent of BottomNavigationView for this : https://stackoverflow.com/a/44778453/8540753 so, I did not want a linear layout or Relative Layout — Zain, Jun 20 '18 at 12:25
I have edited the answer please try the code written below the Bold text Edited. — Anik Dey, Jun 20 '18 at 12:57

score 1 · Answer 3 · answered Jun 20 '18 at 12:43

Might not be the perfect solution, but if you can define the height of BottomNavigationView, things can work out the way you want:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorContent"
        android:layout_width="match_parent"
        android:layout_marginBottom="60dp"
        android:background="@color/color_progress_green"
        android:layout_height="match_parent">

        <!-- This coordinator Layout matches the parent's height, I want to height to match till the BottomNaviagtionView and not below it -->

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@color/red_end"
        app:itemIconTint="@color/primaryColor"
        android:layout_gravity="bottom"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:itemTextColor="@color/primaryTextColor"
        app:menu="@menu/bottom_navigation_items"/>
    </android.support.design.widget.CoordinatorLayout>

Placing BottomNavigationView below a Layout in CoordinatorLayout

3 Answers3