Snackbar displaying on top of Fragment Fab button

Question

I have activity with Textview and below viewpager. In one of the fragments of view pager, I have a fab button. When I am calling the Snackbar on Menu click of Activity, the Snackbar is coming over the fab button. Every thing works fine (fab button is pushed over snack bar) , if the fab button is in activity, but i need it fragment. Please let me know where I am doing mistake

Fragment Layout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordLayoutComments"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/mdtp_white"
   >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvComments"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabComments"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="@dimen/btn_fab_margins"
        android:layout_marginRight="@dimen/btn_fab_margins"
        android:elevation="6dp"
        android:src="@drawable/ic_comment_24_5"
        app:borderWidth="0dp"
        app:fabSize="mini"
        app:pressedTranslationZ="12dp" />

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

Activity Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"> <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordLayout"
        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">

            <include
                android:id="@+id/newtoolbar"
                layout="@layout/toolbar" />

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?attr/actionBarSize"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:id="@+id/cv"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                card_view:cardCornerRadius="5dp"
                card_view:cardElevation="2dp"
                card_view:contentPadding="10dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:orientation="vertical">


                    <TextView
                        android:id="@+id/tvTitle"
                        fontPath="fonts/SourceSansPro-Regular.otf"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:ellipsize="end"                        
                        android:textSize="28sp" />

                    <TextView
                        android:id="@+id/tvDesc"
                        fontPath="fonts/Roboto-Italic.ttf"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="5dp"
                        android:gravity="center_horizontal"                                         
                        android:textSize="15sp"
                        android:textStyle="normal|italic"
                        tools:ignore="MissingPrefix" />
                </LinearLayout>

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

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/newtoolbar"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:scrollbars="horizontal" />

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </LinearLayout>


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

</RelativeLayout>

Answer 1

Activity Code

public class HomeActivity extends AppCompatActivity
        implements FragmentListener {

    private LoadingDialog loadingDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                HomeActivity.this.showSnackbar(view, "Replace with your own action");
            }
        });
    }

    @Override
    public void showSnackBar(View view, String message) {
        Snackbar.make(view,message,Snackbar.LENGTH_LONG).show();
    }
}

FragmentListener Code

public interface FragmentListener {
    void showSnackBar(View view,String message);    
}

Fragment Code

public class MyFragment extends Fragment {

    private static final String TAG = MyFragment.class.getSimpleName();

    private FragmentListener fragmentListener;
    private FloatingActionButton floatingActionButton;

    public MyFragment() {
        // Required empty public constructor
    }

    public static MyFragment getInstance(String uniqueId) {
        MyFragment MyFragment = new MyFragment();
        return MyFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_surveys, container, false);
        floatingActionButton = view.findViewById(R.id.fab);

         floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                fragmentListner.showSnackBar(floatingActionButton,"hello");
            }
        });
        return view;
    }


    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        try {
            fragmentListener = (FragmentListener) context;
        } catch (Exception e) {
            throw new ClassCastException(" must implement OnListItemSelectedListener");
        }
    }    

}

For displaying the Snackbar in Activity and Fragment with FAB you can use this simple approach.

• Activity and Fragment parent View should be CoordinatorLayout.

• Create FragmentListener and implement in Activity

Answer 2

In you xml layout, there are two CoordinatorLayouts. One in Activity Layout and the other one in Fragment Layout. Now Snackbar.make() function's first argument is the parent Coordinator Layout in which this Snackbar will be placed, and all the elements of this Coordinator Layout will be affected by the motion/view changes of the Sanckbar. Try and use Fragment Layout's Coordinator Layout as the parent of the Snackbar.