Simon Simon - 1 month ago 17
Android Question

Android: showing snackbar when toolbar is showing

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

SCREENSHOT1:

whatsapp1

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

SCREENSHOT2:

whatspp2

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)/

link from guide

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

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();