Third Party FloatingActionButton Library in CoordinatorLayout

Question

I am trying to use futuresimple's FloatingActionButton library to use a FloatingActionMenu inside a CoordinatorLayout so when I display a Snackbar the FAB will move up and not be hidden by the Snackbar. The FloatingActionMenu is working perfectly although I have noticed the third-party library is not working inside the CoordinatorLayout.

When I use the support library FAB from Google the CoordinatorLayout is working as expected, although the library by FutureSimple is not. (It is being hidden by the Snackbar).

How can I make the third party library work with the CoordinatorLayout?

fragment_comic.xml

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:text="@string/default_title"
    android:textAppearance="?android:textAppearanceLarge"
    android:layout_centerHorizontal="true" />

<TextView
    android:id="@+id/alt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/title"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center_horizontal"
    android:fadeScrollbars="false"
    android:gravity="center"
    android:maxLines="4"
    android:textColor="@color/black"
    android:paddingBottom="13dp"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:scrollbars="vertical"
    android:text="@string/default_alt"
    android:textAppearance="?android:textAppearanceMedium" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/alt"
    android:adjustViewBounds="false"
    android:layout_marginBottom="10dp"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:scaleType="fitCenter" />


</RelativeLayout>

<com.getbase.floatingactionbutton.FloatingActionsMenu
    android:id="@+id/famMain"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fab:fab_addButtonColorNormal="@color/material_orange"
    fab:fab_addButtonSize="normal"
    fab:fab_addButtonStrokeVisible="true"
    fab:fab_expandDirection="up"
    android:layout_gravity="bottom|end">

<com.getbase.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_random"
    android:src="@drawable/ic_random"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fab:fab_colorNormal="@color/material_orange"
    fab:fab_size="mini"/>

<com.getbase.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_download"
    android:src="@drawable/ic_download"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fab:fab_colorNormal="@color/material_orange"
    fab:fab_size="mini"/>

<com.getbase.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_browser"
    android:src="@drawable/ic_open_browser"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fab:fab_colorNormal="@color/material_orange"
    fab:fab_size="mini"/>

</com.getbase.floatingactionbutton.FloatingActionsMenu>

then in my Java class I initiate my FloatingActionsMenu with

FloatingActionsMenu famView = (FloatingActionsMenu) getActivity().findViewById(R.id.famMain);

then I set it to my Snackbar with

Snackbar.make(famView, "Hover text copied to clipboard", Snackbar.LENGTH_SHORT).show();

Answer 1

The reason the Snackbar is overlaying the FloatingActionMenu is because you are setting that as the view for the Snackbar:

Snackbar.make(famView, "Hover text copied to clipboard", Snackbar.LENGTH_SHORT).show();

What you really need to do here is add a CoordinatorLayout at the bottom of your layout that will be used to display the Snackbar. You can set this in a LinearLayout fashion so that it appears below everything else. Here is an edited version of your XML:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        android:id="@+id/coordinatorLayout"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:text="Test"
                android:textAppearance="?android:textAppearanceLarge"
                android:layout_centerHorizontal="true" />

            <TextView
                android:id="@+id/alt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/title"
                android:layout_centerHorizontal="true"
                android:layout_gravity="center_horizontal"
                android:fadeScrollbars="false"
                android:gravity="center"
                android:maxLines="4"
                android:textColor="@android:color/black"
                android:paddingBottom="13dp"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:scrollbars="vertical"
                android:text="Test Alt"
                android:textAppearance="?android:textAppearanceMedium" />

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/alt"
                android:adjustViewBounds="false"
                android:layout_marginBottom="10dp"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:scaleType="fitCenter" />


        </RelativeLayout>

        <com.getbase.floatingactionbutton.FloatingActionsMenu
            android:id="@+id/famMain"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_addButtonColorNormal="@android:color/black"
            fab:fab_addButtonSize="normal"
            fab:fab_addButtonStrokeVisible="true"
            fab:fab_expandDirection="up"
            android:layout_gravity="bottom|end">

            <com.getbase.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab_random"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_colorNormal="@android:color/black"
                fab:fab_size="mini"/>

            <com.getbase.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab_download"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_colorNormal="@android:color/black"
                fab:fab_size="mini"/>

            <com.getbase.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab_browser"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_colorNormal="@android:color/black"
                fab:fab_size="mini"/>

        </com.getbase.floatingactionbutton.FloatingActionsMenu>

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/testFAB"
            android:layout_gravity="bottom|start"/>

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/snackbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

Then, you can get the snackbar view like this:

CoordinatorLayout snackbar = (CoordinatorLayout) findViewById(R.id.snackbar);

And make it like this:

Snackbar.make(snackbar, "Hover text copied to clipboard", Snackbar.LENGTH_SHORT).show();