CODEWITHSUNDEEP
androidandroid-coordinatorlayout
pancodemakes
pancodemakes

Reputation: 574

Android Bottom Bars overlapping Toolbar

I'm using a library for the new Material Design Bottom Bars, and I am having a very strange problem. Whenever I put this into my Coordinator Layout, it shows on top of the toolbar. Why is this happening, and how can I fix it? Also, how can I have it so the Floating Action Button is above these bars, and not overlapping it? 

    <?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"
tools:context="com.marlonjones.kansei.MainActivity">
<android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:elevation="0dp"
    android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:elevation="4dp"
        android:background="?attr/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main"/>
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_write" />
<com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
    android:id="@+id/bottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:bnv_colored_background="true"
    app:bnv_with_text="false"
    app:bnv_shadow="true"
    app:bnv_tablet="false"
    app:bnv_viewpager_slide="true"
    app:bnv_active_color="@color/colorPrimary"
    app:bnv_active_text_size="@dimen/bottom_navigation_text_size_active"
        app:bnv_inactive_text_size="@dimen/bottom_navigation_text_size_inactive"/>
</android.support.design.widget.CoordinatorLayout>

enter image description here

Upvotes: 6

Views: 3006

Answers (2)

GPack
GPack

Reputation: 2504

Three alternative ways to try, i dont know if them works:

1 - Place the BottomNavigationView outside the CoordinatorLayout, nesting all those in a RelativeLayout and setting a marginBottom for the CoordinatorLayout (as that library's example:

android:layout_marginBottom="@dimen/bottom_navigation_height"

).

2 - Retain the BottomNavigationView inside the CoordinatorLayout, but using the FrameLayout's param (CoordinatorLayout is a FrameLayout)

android:layout_gravity

instead of

android:layout_alignParentBottom

(that is a RelativeLayout's param). You have to add the marginBottom to the main content too.

3 - The better if works: Retain the BottomNavigationView inside the CoordinatorLayout, removing the android:layout_alignParentBottom and trying to give it the BottomSheetBehavior as Design Library tells

app:behavior_peekHeight="XXdp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

PeekHeight XX should be the BottomNavigationView height, you have to add the marginBottom to the main content too.

Upvotes: 3

Linh
Linh

Reputation: 60923

One solution is you should add the LinearLayout (or different Layout Managers) inside CoordinatorLayout

<?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"
        tools:context="com.marlonjones.kansei.MainActivity">

    <LinearLayout
         android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            app:elevation="0dp"
            android:theme="@style/AppTheme.AppBarOverlay">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:elevation="4dp"
                android:background="?attr/colorPrimary"/>
        </android.support.design.widget.AppBarLayout>
        <include layout="@layout/content_main"/>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@drawable/ic_write" />
        <com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            app:bnv_colored_background="true"
            app:bnv_with_text="false"
            app:bnv_shadow="true"
            app:bnv_tablet="false"
            app:bnv_viewpager_slide="true"
            app:bnv_active_color="@color/colorPrimary"
            app:bnv_active_text_size="@dimen/bottom_navigation_text_size_active"
                app:bnv_inactive_text_size="@dimen/bottom_navigation_text_size_inactive"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Upvotes: 0

Related Questions