Snackbar overlaps floating action bar in constraint layout

Question

I'm working for the first time with constraint layout and what I want to achieve is a snackbar to be shown on activity launch. The snackbar is showing but its overlapping my floating action menu. I've tried everything but nothing's working.

I'll post my XML and Java so you tell me what could be the problem. I've already tried all solutions online but nothing is working.

Here is the xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">

<android.support.v7.widget.RecyclerView
    android:id="@+id/ListViewCatalog"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginTop="?attr/actionBarSize"
    android:choiceMode="multipleChoice"
    android:clickable="true"
    android:focusable="true">

</android.support.v7.widget.RecyclerView>

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/LinearLayout01"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dip"
    android:orientation="horizontal">


    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/fab_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:paddingBottom="@dimen/_10sdp"
        android:paddingEnd="@dimen/_16sdp"
        android:paddingRight="@dimen/_16sdp"
        fab:menu_fab_label="Pay"
        fab:fab_colorNormal="#DA4336"
        fab:fab_colorPressed="#E75043"
        fab:fab_colorRipple="#99FFFFFF"
        fab:fab_shadowColor="#66000000"
        fab:fab_showShadow="true"
        fab:menu_backgroundColor="#00000000"
        fab:menu_fab_hide_animation="@anim/fab_scale_up"
        fab:menu_fab_show_animation="@anim/fab_scale_down"
        fab:menu_labels_colorNormal="#333333"
        fab:menu_labels_colorPressed="#444444"
        fab:menu_labels_colorRipple="#66FFFFFF"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_position="left"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="true"
        fab:menu_openDirection="up"
        tools:ignore="RtlSymmetry">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/add"
            fab:fab_label="Process"
            fab:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/refresh"
            fab:fab_label="Reload"
            fab:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/sub"
            fab:fab_label="Next"
            fab:fab_size="mini" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/more"
            fab:fab_label="Previous"
            fab:fab_size="mini" />

    </com.github.clans.fab.FloatingActionMenu>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

The Java part:

FloatingActionMenu fam = findViewById(R.id.fab_menu);
    mCartList = CartHelper.getCart();

    // Make sure to clear the selections
    for (int i = 0; i < mCartList.size(); i++) {
        mCartList.get(i).selected = false;
    }

    if (mCartList.size() == 0) {
        Snackbar snackbar = Snackbar.make(fam, "Cart is Empty", Snackbar.LENGTH_LONG);
        snackbar.show();
    }

Here is a screenshot so you can see what I mean:

Answer 1

You need to use CoordinatorLayout for it. try this.

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

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@mipmap/ic_launcher" />
    </android.support.design.widget.CoordinatorLayout>

Java Code:

FloatingActionButton fab;
fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, (CharSequence) "Hello World..", 0).show();
            }
        });