Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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(); 
like image 732
Achilles Rasquinha Avatar asked Dec 04 '15 17:12

Achilles Rasquinha


People also ask

How do you align items in coordinator layout?

You can try gravity to align inside the CoordinatorLayout. android:layout_gravity="end" This worked for me. Save this answer. Show activity on this post.

What is coordinator layout?

CoordinatorLayout is a super-powered FrameLayout . CoordinatorLayout is intended for two primary use cases: As a top-level application decor or chrome layout. As a container for a specific interaction with one or more child views.

What is snackbar explain it with example?

Android Snackbar is an interesting component introduced by Material Design. Snackbars are just like Toast messages except they provide action to interact with. Snackbar will be displayed at the bottom of the screen and can be swiped off in order to dismiss them. https://material.io/components/snackbars.


2 Answers

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();
      }
});
like image 149
Paresh P. Avatar answered Sep 25 '22 22:09

Paresh P.


You can try the code below, it should work fine. This is how I implement my snackbar in all of my projects and it has never failed me. Study carefully; merry coding ;-) !

Snackbar.make(findViewById(android.R.id.content),"Your text",Snackbar.LENGTH_SHORT).show();

Remember, never forget your show() method, your snackbar is useless without it.

like image 33
Taslim Oseni Avatar answered Sep 24 '22 22:09

Taslim Oseni