How do I correctly implement a Snackbar, Coordinator Layout and a bottom|right FAB?

Achilles Rasquinha picture Achilles Rasquinha · Dec 4, 2015 · Viewed 13.9k times · Source

I'm currently using the Design Support Library. I've tried implementing the Snackbar with my CoordinatorLayout wraping the entire layout. When the Snackbar is to be displayed, it raises the FAB. But it makes no effort to come down and thereby stays above the translated distance.

It however, does come down when I dismiss the Snackbar by swiping it. So the CoordinatorLayout is aware of the FAB wrapped inside.

.xml

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

    <RelativeLayout
        android:id="@+id/relative_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/primary"
            android:elevation="4dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

        <com.google.android.gms.ads.AdView
            android:id="@+id/ad_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/toolbar"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            ads:adSize="BANNER"
            ads:adUnitId="@string/banner_ad_unit_id" />

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/ad_view">

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

        </ScrollView>

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btn_generate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_refresh_white_24dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:pressedTranslationZ="12dp" />

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

.java

Snackbar.make(mCoordinatorLayout, R.string.copied_to_clipboard,
                Snackbar.LENGTH_SHORT).show(); 

Answer

Paresh P. picture Paresh P. · Dec 4, 2015

If you want to show the Snackbar such that while it showed up, the CoordinatorLayout will be adjusted, then try the code below

findViewById(R.id.btn_generate).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        Snackbar.make(view, "Hello Snackbar", Snackbar.LENGTH_LONG).show();
      }
});