How To Avoid Snackbar Overlap Floating Action Button In Android

Floating Action Button is an image button which float on the screen surface. It will stay in one place when screen scroll. Commonly the floating button is placed at the bottom right of the screen.

Snackbar is a bar which will prompt up from screen bottom. It is a method to show message to client user and give user change to interact with it such as click button on snackbar. It is more powerful and beautiful than Toast.

But when you place above two components together in on activity, the snackbar will overlap the floating action button sometime. This example will tell you how to avoid that.

1. Snackbar Overlap Floating Action Button Xml Layout.

If you use below layout as your activity layout, the floating button will be overlapped by the snackbar.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floating_button_snackbar"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/transparent_check_icon"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            app:fabSize="mini"
            app:borderWidth="0dp"
            app:backgroundTint="@color/colorGreen" />

</FrameLayout>

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/dArM0I2oK50

2. Use CoordinatorLayout To Make Floating Action Button Aware Snackbar Popup.

To avoid above issue, you just need to replace FrameLayout with CoordinatorLayout in layout file. The CoordinatorLayout can listen to all it’s direct child view’s event, and when some event occured such as snackbar popup, it will move the floating button up also.

You may ask that the snackbar is not child view of CoordinatorLayout, yes but the floating action button is, and the snackar is triggered by the floating button click event, so snackbar popup event also be caught by the CoordinatorLayout.

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

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floating_button_snackbar"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/transparent_check_icon"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            app:fabSize="mini"
            app:borderWidth="0dp"
            app:backgroundTint="@color/colorGreen" />

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

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/HM3CMpU3uV0

3. Example Create Steps.

3.1 Add Material Design Support Library.

Add below compile command in app build.gradle file dependency section.

compile 'com.android.support:design:26.+'

3.2 Prepare Image File.

First find a transparent icon image. Copy it to android project app / res / drawable folder. Then use it as android:src attribute value in floating action button configuration xml. The image name do not contains white space.

3.3 Create Activity And Layout Xml File.

Create an empty activity. Copy layout definition xml in above section 2 to the activity layout file.

Main Activity Java Code.

FloatingButtonSnackbarActivity.java

package com.dev2qa.example.material_design;

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

import com.dev2qa.example.R;

public class FloatingButtonSnackbarActivity extends AppCompatActivity {

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

        setTitle("dev2qa.com - Floating Action Button Over Snackbar.");

        // Get the FloatingActionButton object.
        FloatingActionButton floatingActionButton = (FloatingActionButton)findViewById(R.id.floating_button_snackbar);

        // Whe the floating button is clicked.
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Create a Snackbar.
                Snackbar snackbar = Snackbar.make(view, "Snackbar Example.", Snackbar.LENGTH_LONG);

                // Add a button with the button click listener code in snackbar.
                snackbar.setAction("Send", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // When snackbar button is clicked.
                        Toast.makeText(FloatingButtonSnackbarActivity.this, "You click the send button in snackbar", Toast.LENGTH_SHORT).show();
                    }
                });

                // Display the snackbar.
                snackbar.show();
            }
        });
    }
}