ZOFTINO.COM

Android Floating Action Button Example

Floating action button (FAB) is used to provide primary action as circle on screen and it is displayed above the UI. Floating action button widget is provided as a part of design support library to help build android applications which follow material design guidelines.

As floating action button is extended from ImageButton, it inherits all methods from view, image view and image button. You can position floating action button on screen using layout_anchor and layout_anchorGravity.

You can handle floating action button visibility events by implementing two call back methods onHidden and onShown of FloatingActionButton.OnVisibilityChangedListener.

Floating action button interacts with other components or views when used in coordinator layout. Coordinator layout enables views to interact with each other as per attached behavior. For more information on coordinator layout, please read coordinator layout implementation article.

Floating Action Button Behavior

Design support library provides floating action button behavior. As mentioned before, layout behavior allows views to respond to gesture and positional changes of other views in coordinator layout. FloatingActionButton.Behavior moves floating action button up when snack bar is displayed. This is the default behavior of floating action button when it is part of coordinator layout. Below picture shows floating action button behavior when snackbar is displayed.

android floating action button and behavior example

Custom Floating Action Button Behavior

You can provide custom floating action button behavior by creating a behavior class extending CoordinatorLayout.Behavior class to respond to other view gesture and positional changes. I created a custom behavior that moves floating action button with positional changes in app bar layout. Below is the custom behavior output. You can find the code in code section below.

android floating action button and custom behavior example

Floating Action Button Event Handling

Floating action button click events can be handled by creating on click event listener. You can also take some action when floating action button visibility status changes by implementing callback methods of OnVisibilityChangedListener and passing it to show and hide methods of fab.

Floating Action Button Example

I’ll show you how to use floating action button, how to handle floating action button events and how to create custom FAB behavior. For this, we will use coupon app. On coupon app’s about store screen, floating action button will be displayed which will help user go to the list of coupons for the current store.

To move floating action button as app bar layout moves, custom floating action button behavior has been crated. For more information about creating custom behaviors, read coordinator layout and custom behavior article.

Floating Action Button Code

Floating action button activity layout

 


    

        


        

            

            

            
        
    

    

        

            

            
        
    

    

 

Floating action button activity

 package com.zoftino.materialdesign;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class FloatingActionButtonActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fab_layout);


        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


        TextView storeName = (TextView) findViewById(R.id.store_name);
        storeName.setText("About Selected Store");

        TextView aboutStore = (TextView) findViewById(R.id.about_store);
        aboutStore.setText(CouponStoreData.aboutStore);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabL);

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            public void onTabReselected(TabLayout.Tab tab) {

            }

            public void onTabSelected(TabLayout.Tab tab) {
                String tabId = (String) tab.getText();
                showContent(tabId);
            }

            public void onTabUnselected(TabLayout.Tab tab) {

            }
        });

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.show_coupon_fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(FloatingActionButtonActivity.this, "view latest coupons", Toast.LENGTH_LONG).show();
            }
        });


    }

    public void showContent(String tabId) {
        Snackbar msgSnackbar = Snackbar.make(findViewById(R.id.fab_activity), "selected tab " + tabId, Snackbar.LENGTH_LONG);
        msgSnackbar.show();
    }

}
 

Floating action button custom behavior

 package com.zoftino.materialdesign;


import android.content.Context;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.util.AttributeSet;
import android.view.View;

public class FABAppBarLayoutCustomBehavior extends CoordinatorLayout.Behavior{

    public FABAppBarLayoutCustomBehavior(){
        super();
    }
    public FABAppBarLayoutCustomBehavior(Context context, AttributeSet attrs){
        super(context, attrs);
    }
    public boolean layoutDependsOn (CoordinatorLayout parent,
                                    View child,
                                    View dependency){
        return dependency instanceof AppBarLayout;
    }
    public boolean onDependentViewChanged (CoordinatorLayout parent,
                                           View child,
                                           View dependency){
        if(child instanceof FloatingActionButton && dependency instanceof  AppBarLayout & dependency.getTop() < 0 ){
            int depTop = dependency.getTop();
            child.setTranslationY(depTop);
        }

        return false;
    }
}