Snackbar顶部的浮动动作按钮。 怎么样？

Question

I'm trying to show my FloatingActionButton on top of the SnackBar but I just can't make it as I have done on other screens. My current layout is this one:

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.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="wrap_content"
            android:background="?attr/colorPrimary"
            android:elevation="@dimen/toolbar_elevation"
            android:minHeight="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.ToolbarPopUp"
            app:theme="@style/AppTheme.Toolbar"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            style="@style/Feed.TabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="4dp"/>

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

            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                style="@style/FloatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:src="@drawable/ic_start"
                app:backgroundTint="@color/h19_green"
                app:elevation="6dp"
                app:pressedTranslationZ="12dp"/>
        </android.support.design.widget.CoordinatorLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/navdrawer"/>

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

And my Snackbar code is this one:

@Override
public void alertNoInternetConnection() {
   CoordinatorLayout coordinatorLayout =    ButterKnife.findById(getActivity(), R.id.coordinator_fab);
     Snackbar.make(coordinatorLayout, R.string.connection_offline, Snackbar.LENGTH_INDEFINITE).show();
}

How should I reorganize my layout so that when I display the Snackbar, the Floating Action Button hovers above it?

Answer 1

I was looking quite long for the answer, and finally I've found the solution which worked for me:

1. FloatingActionButton must be inside CoordinatorLayout
2. Snackbar should receive FloatingActionButton as it's View argument

Layout:

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

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fabAdd"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:src="@mipmap/ic_create_white_48dp"
                />
 </android.support.design.widget.CoordinatorLayout>

Code:

FloatingActionButton fabAdd = (FloatingActionButton)findViewById(R.id.fabAdd);
Snackbar.make(fabAdd, "Record was removed.", Snackbar.LENGTH_SHORT).show();

Answer 2

Your layout implementation is wrong, here's the right implementation (for example):

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
... >

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</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/fab"
    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_done" />

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

<include layout="@layout/navdrawer"/>

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

And then, to show the Snackbar correctly:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });

Answer 3

The problem is that according to the google guidelines you should not display the FAB above the Snackbar you should swipe the FAB and display the Snack bar below it

check this link :

http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-usage

Answer 4

this worked for me.

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

fabBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(rootLayout, "Hello. I am Snackbar!", 
Snackbar.LENGTH_SHORT)
                .setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                    }
                })
                .show();
    }
});

Answer 5

Try adding this to your FAB:

app:layout_anchor="@id/coordinator_fab"
app:layout_anchorGravity="bottom|right"

and remove:

android:layout_gravity="bottom|end"