Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Moving Floating Action Button up and down to avoid getting blocked by a snackbar

I'm using this library to implement a floating action bar and I can't seem to find a way to move the button when a snackbar appears on screen. Is it even possible with that library?

like image 244
naja Avatar asked Jan 12 '15 23:01

naja


People also ask

What does a floating action button do?

A floating action button (FAB) is a circular button that triggers the primary action in your app's UI. This page shows you how to add the FAB to your layout, customize some of its appearance, and respond to button taps.

Are Floating Action Buttons good?

FAB is a natural cue for telling users what to do next. Research by Google shows that, when faced with unfamiliar screen many user rely on FAB to navigate. Thus, FAB is very useful as a signpost of what's important.

When might you want to use a floating action button instead of a raised button on a screen?

A floating action button represents the primary action in an application. Make floating action buttons positive actions like Create, Favorite, Share, Navigate, and Explore. Always think about the current screen before using FAB.


2 Answers

To anyone looking out for answer in future..

Coordinator Layout used as Parent Layout of Floating Action Button will handle the animation effect for you automatically.

The floating action button has a default behavior that detects Snackbar views being added and animates the button above the height of the Snackbar accordingly.

Floating Action Button Behavior

<android.support.design.widget.CoordinatorLayout     android:layout_width="match_parent"     android:layout_height="match_parent"     android:id="@+id/clayout"> <android.support.design.widget.FloatingActionButton     android:id="@+id/fab_btn"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravity="bottom|right"     android:layout_marginBottom="16dp"     android:layout_marginRight="16dp"     android:src="@drawable/filter_icon"     app:rippleColor="@color/colorGray"     app:fabSize="normal"     app:borderWidth="0dp"/> </android.support.design.widget.CoordinatorLayout> 

Then our SnackBar code would use Coordinatorlayout[here clayout] as parentlayout like below:

Snackbar.make(clayout, "Click on row to know more details", Snackbar.LENGTH_LONG)                     .setAction("OK", new View.OnClickListener() {                         @Override                         public void onClick(View v) {                          }                     }).show(); 
like image 192
PunitD Avatar answered Oct 12 '22 13:10

PunitD


Try usingandroid.support.design.widget.FloatingActionButton and CoordinatorLayout.

And then try this:

fabView = findViewById(R.id.floating_action_button_id); Snackbar.make(fabView, "Hi", Snackbar.LENGTH_LONG).show() 
like image 32
Cody Avatar answered Oct 12 '22 13:10

Cody