简体   繁体   中英

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 .

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();

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM