Android: showing snackbar when toolbar is showing

Question

This is whatsapp when you are not scrolling upwards. The toolbar is showing and so is the tablayout underneath it.

SCREENSHOT1:

This is whatsapp once you are scroll it up. You can see that the toolbar is hidden.

SCREENSHOT2:

There is a guide to show you how to create this effect. I have followed it and got this effect to work within my app.

https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling(part3)/

My question is about showing a snackbar when you have the toolbar showing as in SCREENSHOT1. When I try to show a snackbar when the toolbar is showing, it actually shows below the screen so that it is not visible to the user. Only if the user scrolls up and hides the toolbar will the snackbar be visible.

The xml I used for my app is similar to the one used in the guide https://github.com/mzgreen/HideOnScrollExample/blob/master/app/src/main/res/layout/activity_part_three.xml. I have copied and pasted the code as per the link below:

<?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:id="@+id/coordinatorLayout"
                                                 android:layout_width="match_parent"
                                                 android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
            android:id="@+id/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="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabTextColor="@android:color/white"
                app:tabSelectedTextColor="@android:color/white"
                app:tabIndicatorColor="@android:color/white"
                app:tabIndicatorHeight="6dp"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="@dimen/fab_margin"
            android:src="@drawable/ic_favorite_outline_white_24dp"
            app:borderWidth="0dp"
            app:layout_behavior="pl.michalz.hideonscrollexample.ScrollingFABBehavior"/>

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

Does anyone know how I can show the snackbar when the toolbar is visible?

EDIT:

Because the layout scheme contains tablayouts and each of these tablayouts displays a fragment, I'm trying to show the snackbar per fragment and not at the activity level. I'm actually starting to think that this might not be possible to show the snackbars per fragment and this might actually needs to be done through tying listeners from each of those 3 fragments to the main activity and then the snackbar must just be displayed in the main activity instead.

This is the xml of one of my fragments:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/snackbarPosition">

    <android.support.v4.widget.SwipeRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swipeContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/my_recycler_view"
                android:layout_below="@+id/join"
                android:scrollbars="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </android.support.v7.widget.RecyclerView>

    </RelativeLayout>

    </android.support.v4.widget.SwipeRefreshLayout>

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

Answer 1

Try setting your ViewPager’s height to wrap_content.

The CoordinatorLayout should keep its dimensions in check without using match_parent.

Additionally, make sure you’re passing a descendant view of your CoordinatorLayout to Snackbar.make.

Update based on the comments:

The Snackbar will walk up the view hierarchy starting from the view you give it and attach itself to the first CoordinatorLayout it finds or the window decor’s content view if it finds none.

If you’re nesting CoordinatorLayouts within fragments, you need to make sure that the child CoordinatorLayouts don’t overflow their containers, which might be tricky.

In my opinion it might be easier to remove the CoordinatorLayouts in the fragments, and give Snackbar.make a view from your fragment instead. It will happily walk up the hierarchy (even out of the fragments) to reach the CoordinatorLayout in your activity.

If you do that, the callbacks will work as usual, but make sure to mark any callbacks you use as static to avoid leaking your fragments in case the Snackbar stays on screen after your fragment is supposed to be gone.

This can happen because the Snackbar will hold a reference to your callback, which in turn can hold a reference to your fragment. If you need a reference to the fragment or a context, use a weak reference.

Answer 2

Pretty easy. Just use the viewPager as the view and you're done. It looks something like this:

Snackbar snackbar = Snackbar.make(findViewById(R.id.viewPager), "Your Message", Snackbar.LENGTH_LONG);
    snackbar.getView().setBackgroundColor(Color.parseColor("#00b8ba"));
    snackbar.show();

Make sure you pass the findViewById(R.id.viewPager) as the view.

By the way the viewPager is defined as this:

<android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

For different fragments use this (first fragment):

Snackbar snackbar = Snackbar.make(getView(), "First", Snackbar.LENGTH_LONG);
        snackbar.getView().setBackgroundColor(Color.parseColor("#00b8ba"));
        snackbar.show();

second fragment:

Snackbar snackbar = Snackbar.make(getView(), "Second", Snackbar.LENGTH_LONG);
        snackbar.getView().setBackgroundColor(Color.parseColor("#00b8ba"));
        snackbar.show();

Answer 3

I managed to solve this by following Leo's suggestion of passing in a reference to my activity's coordinatorlayout into my fragment and then using that coordinatorlayout to display my snackbar within my fragment.

So this is what I did in code.

This is my activity code:

    coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorlayout);
    TestFragment testFragment = new Fragment();

    //Needed for every fragment
    testFragment.setActivityCoordinatorLayout(coordinatorLayout); //passed the activity coordinatorlayout to my fragment.

In my fragment we get a reference to the activity's coordinatorlayout:

public void setActivityCoordinatorLayout(CoordinatorLayout activityCoordinatorLayout) {
    this.activityCoordinatorLayout = activityCoordinatorLayout;
}

Then we set the snackbar to show against this activity coordinatorlayout:

            Snackbar.make(activityCoordinatorLayout, "No internet", Snackbar.LENGTH_LONG)
                    .setAction("Retry", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) { <YOUR CODE>}}).show();

This is however a long about way to get the code working. A quicker way is actually to use Nilesh's code and his getView method.