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>

can you please post the code you are using to show Snackbar ? Moreover in the Activity Layout, you don't need to have top level Relative Layout. You can just have CoordinatorLayout. — Vaibhav Gupta, Oct 11 '15 at 19:45
Snackbar snackbar = Snackbar.make(coordLayout, "No Network Available! Please try again later", Snackbar.LENGTH_LONG); snackbar.show(); Here "coordLayout" layout of Activity — souser, Oct 11 '15 at 20:43

score 3 · Answer 1 · answered Oct 12 '15 at 19:02

3

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.

answered Oct 12 '15 at 19:02

Vaibhav Gupta

381
3
11

Thanks for response, It would work fine, if i had just one fragment, but since I have a view pager with multiple frags. When Activity's menu is clicked, the view pager could be displaying any fragment, not necessarily the one with fab button fragment. How to handle this. – souser Oct 13 '15 at 18:29
@souser: Have a look [here](http://stackoverflow.com/questions/18609261/getting-the-current-fragment-instance-in-the-viewpager) and [here](http://stackoverflow.com/questions/8785221/retrieve-a-fragment-from-a-viewpager). The above links will help you retrieve the fragment which is currently visible in viewpager. If that fragment is the one containing FAB then create the snackbar with fragment CoordinatorLayout as parent, otherwise create the snackbar with activity CoordinatorLayout as parent. Hope this helps – Vaibhav Gupta Oct 16 '15 at 06:59

score 0 · Answer 2 · edited Dec 27 '19 at 16:17

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

Snackbar displaying on top of Fragment Fab button

2 Answers2