BottomBar

BottomBar copied to clipboard

Snackbar and FloatingActionButton are no longer above the bottom bar. They are hidden behind it.

Hello! I've investigated this issue and I found a workaround. The Snackbar will no longer be overlapped by the BottomBar if you use a CoordinatorLayout as your root layout and bind the BottomBar to the CoordinatorLayout.

If you use a FAB, this will also prevent the Snackbar from overlapping that as well.

Here is my layout:

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

    <MyContentCustomLayout
        android:id="@+id/ah_vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        app:rippleColor="@color/colorGray"
        android:src="@android:drawable/ic_menu_search"
        app:fabSize="normal"
        app:borderWidth="0dp"/>

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

The Snackbar will be shown above the BottomBar.

@NegreaVlad Where in your layout is the BottomBar?

Hi @Servus7 !

Doesn't the layout in the sample app work for you?

For me there's no problems with the following Snackbar code:

Snackbar.make(findViewById(R.id.myCoordinator), "HELLO", Snackbar.LENGTH_LONG).show();

I cannot see a slim horizontal bar in your picture. But I saw that on other posts, including myself. I've asked how to eliminate it, but removed by roughike.

Could you tell me how to hide/eliminate it please？

Below is the slim horizontal bar example: you can see a bar between the content and the icons. https://github.com/roughike/BottomBar/issues/436

@roughike You're right. There's no problem with the Snackbar. But the behavior is shy and i want a static bottom bar.

My code for binding the BottomBar is:

        mBottomBar = BottomBar.attach(mRootCL, savedInstanceState); // mRootCL = R.id.ah_rl_root
        mBottomBar.noTabletGoodness();
        mBottomBar.setItems(R.menu.home_activity_bottombar_menu);

        mBottomBar.setActiveTabColor(UIUtils.getColor(R.color.light_blue));

@NegreaVlad I'm using version 2.0.2. BottomBar.attach() ist no longer available. But your right. The old Version is pushing up the Snackbar and the FAB.

@Servus7 sorry about that, I tested on my code that was outdated.

when used with app:bb_behavior="shifting", snackbar is not visible when shown

In version 2.0.2, the snackbar is visible only if the behavior is "shy".

I can confirm what @gdemiollis is saying and found a somewhat hacky workaround but would love to see a proper fix in a future release. The snackbar is indeed being drawn behind the bottom bar in 2.0.2 unless the shy behavior is activated.

The code for the shy behavior (collapsing and expanding the bottom bar) is in BottomNavigationBehavior and basically applies a bottom margin to the snackbar so that it appears above the bottom bar. In my case I needed that margin adding behavior but not the collapsing/expanding of the bottom bar.

So I extended BottomNavigationBehavior overriding the methods that would cause the collapsing/expanding but leaving the rest intact.

The hacky bit is injecting this custom behavior into the bottom bar because the bottom bar attaches the behavior to itself somewhere in its onLayout method. So I had to extend BottomBar as well and override onLayout, where I inject my own custom behavior should the super class have changed it.

All the code can be found here: https://gist.github.com/jschwertfeger/86996858d47a76f5247730f4dc7b55b7

@gdemiollis Can use another version for see the SnackBar when i use behavior "shifting" ? I love shifting but i lose all my SnackBar :(

I fixed this by adding bottom margin to SnackBar.

public static void displaySnackBarWithBottomMargin(Snackbar snackbar, int sideMargin, int marginBottom) {
    final View snackBarView = snackbar.getView();
    final CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) snackBarView.getLayoutParams();

    params.setMargins(params.leftMargin + sideMargin,
                params.topMargin,
                params.rightMargin + sideMargin,
                params.bottomMargin + marginBottom);

    snackBarView.setLayoutParams(params);
    snackbar.show();
}

(Credits to http://stackoverflow.com/a/34844669/2897341)

Set the bottom margin ~same as the height of the bottom bar:

displaySnackBarWithBottomMargin(snackbar, 0, dp(51)); // dp method is converter for dp to px

(dp2px example http://stackoverflow.com/a/17410076/2897341)

My bottomBar height is 56, but adding 51 dp removes the white line between a snackBar and bottomBar (shadow maybe).

I use wrapper for showing a snackbar, so it was easy enough to fix them everywhere (gist).

@alashow the shadow is fixed in the latest version, and in the next version a small fix for when you don't want the shadow will be released

@roughike is this thread still relevant?

I just tried the approaches in this issue with 2.3.1, snackbar still only works if app:bb_behavior is set to shy. Otherwise, the snackbar is never shown.

The workaround posted by @alashow (using margins) still works.

My app:bb_behaviour is set to shy and my FAB draws behind the BottomBar. Currently using 2.3.1. My layout looks like this below:

Edit: Did some more digging, I noticed it is also not showing if I remove the 'shy'. Updated Layout below.

Solution

Just add app:layout_insetEdge if you're using CoordinatorLayout. It will automatically handle this stuff for you.

<?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.g33kidd.apps.yarrrd.activity.MainActivity">

    <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_main_view"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp" />

    <com.roughike.bottombar.BottomBar
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        app:bb_activeTabAlpha="1"
        app:bb_activeTabColor="@color/colorAccent"
        app:bb_inActiveTabAlpha="0.6"
        app:bb_inActiveTabColor="@color/black"
        app:bb_showShadow="true"
        app:bb_behaviour="shy"
        app:bb_tabXmlResource="@xml/navigation_tabs" />

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