Deep Shah
Deep Shah

Reputation: 1364

How to display Snackbar above BottomNavigationView & move FAB?

this is similar to many questions but I got some different scenario . Let me explain scenario first , I have a MainActivity with BottomNavigationView & FrameLayout for switching Fragments according to BottomNavigation items click. One of the fragment has FAB & within this Fragment I need to display Snackbar .

What I have tried so far,
1) Added BottomNavigationView inside another FrameLayout , but SnackBar overlapping .
2) Added BottomBar into sub CoordinatorLayout & snackbar is behind Bottombar

Here are XMLs for MainActivity & Fragment

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activities.HomeActivity">

<FrameLayout
    android:id="@+id/frame_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="bottom"
    android:elevation="5dp"
    android:background="@android:color/white"
    app:itemBackground="@android:color/white"
    android:foreground="?attr/selectableItemBackground"
    app:labelVisibilityMode="labeled"
    app:itemTextColor="@color/darkestGrey"
    app:menu="@menu/navigation" />

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

Here is Fragment layout:

<?xml version="1.0" encoding="utf-8"?>
<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/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.PayloadsFragment">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <FrameLayout
            android:id="@+id/toolbar_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/payloads_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:title="@string/overview"
                app:titleTextColor="@color/white"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

            <com.miguelcatalan.materialsearchview.MaterialSearchView
                android:id="@+id/search_view"
                android:hint="@string/hint_search_payload"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </FrameLayout>


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

    <include layout="@layout/content_main" />

    <include layout="@layout/bottom_filter_sheet" />

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

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="51dp"
    android:background="@color/white"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".activities.HomeActivity">

    <TextView
        android:id="@+id/txt_stick_status_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginStart="@dimen/padd_10"
        android:layout_marginTop="@dimen/padd_10"
        android:fontFamily="sans-serif-medium"
        android:maxLines="2"
        android:text="@string/str_stick"
        android:textColor="@color/item_name"
        android:textSize="17sp" />

    <TextView
        android:id="@+id/txt_stick_status_value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginStart="5dp"
        android:layout_marginTop="9dp"
        android:layout_toEndOf="@id/txt_stick_status_title"
        android:fontFamily="sans-serif-medium"
        android:maxLines="2"
        android:text="@string/str_stick_not_available"
        android:textColor="@color/darkestGrey"
        android:textSize="18sp" />

    <ImageButton
        android:id="@+id/btn_connect_stick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/title_margin"
        android:layout_marginTop="9dp"
        android:layout_toEndOf="@+id/txt_stick_status_value"
        android:background="@null"
        android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_disconnected" />


    <ImageButton
        android:id="@+id/btn_filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="@dimen/padd_10"
        android:background="@drawable/bg_grey_rounded_border"
        android:padding="6dp"
        app:srcCompat="@drawable/ic_filter" />

    <ImageView
        android:id="@+id/img_filter_active"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignParentEnd="true"
        android:padding="@dimen/small_5_margin"
        android:src="@drawable/ic_active_filter"
        android:visibility="gone" />

    <RelativeLayout
        android:id="@+id/layout_no_device_configure"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_filter"
        android:layout_marginTop="@dimen/row_padding_vertical"
        android:background="@color/snackbar_bg"
        android:elevation="3dp"
        android:padding="@dimen/title_margin"
        android:visibility="visible">

        <TextView
            android:id="@+id/lbl_no_device_configure"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:fontFamily="sans-serif-light"
            android:text="@string/lbl_no_device_configure"
            android:textColor="@color/white"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/lbl_buy_input_stick_website"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="@dimen/activity_horizontal_margin"
            android:layout_marginEnd="5dp"
            android:ellipsize="end"
            android:fontFamily="sans-serif-medium"
            android:text="@string/lbl_tap_to_configure"
            android:textAllCaps="true"
            android:textColor="@color/colorAccent"
            android:textSize="16sp" />

    </RelativeLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/layout_no_device_configure">

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

            <TextView
                android:id="@+id/title_default_payloads"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="@dimen/padd_10"
                android:text="@string/default_payloads_title"
                android:textColor="@color/item_name"
                android:textStyle="bold" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/payload_recycler_view_default_payloads"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/small_5_margin"
                android:scrollbars="vertical" />

            <TextView
                android:id="@+id/title_custom_payloads"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:padding="@dimen/padd_10"
                android:text="@string/custom_payloads_title"
                android:textColor="@color/item_name"
                android:textStyle="bold" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/payload_recycler_view_custom_payloads"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scrollbars="vertical" />
        </LinearLayout>

    </ScrollView>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fb_add_payload"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginBottom="10dp"
        app:backgroundTint="@color/colorAccent"
        app:fabSize="normal"
        app:maxImageSize="17dp"
        app:srcCompat="@drawable/ic_add" />


</RelativeLayout>

Do let me know if any other information is required .

Any help would be appreciated .

Upvotes: 4

Views: 4454

Answers (2)

Carlos Daniel
Carlos Daniel

Reputation: 2699

If you are calling a SnackBar from Fragment you may do something like this:

private fun showSnackBarMessage() {
    val bottomNavView: BottomNavigationView = activity?.findViewById(R.id.bottom_nav)!!
    Snackbar.make(bottomNavView, "No data available", Snackbar.LENGTH_SHORT).apply {
        anchorView = bottomNavView
    }.show()
}

You may obtain bottomNavView from the activity's layout and then use it as anchor view for SnackBar. Now it'll be displayed above Bottom Navigation Bar

Upvotes: 7

p.mathew13
p.mathew13

Reputation: 921

While displaying your snack bar programmatically, try this instead:

 Snackbar snack = Snackbar.make(findViewById(R.id.coordinator_layout),
            successMessage, Snackbar.LENGTH_INDEFINITE);

    snack.setAction("Ok", v -> snack.dismiss());
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams)
            snack.getView().getLayoutParams();
    params.setAnchorId(R.id.navigation);
    params.anchorGravity = Gravity.TOP;
    params.gravity = Gravity.TOP;
    snack.getView().setLayoutParams(params);
    snack.show();

Upvotes: 8

Related Questions