Bottom Sheet Above Bottom Navigation

问题

My goal is to place a "bottom sheet" on top of a BottomNavigationView like this:

But it stays the following way. Both views collapse:

This is the xml of my main activity:

<?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"
android:background="@drawable/tierrota"
tools:context="com.example.juanjose.myapplication.ViajesActivity">

<!-- include main content -->
<include layout="@layout/bottomsheet" />

<!-- include bottom sheet -->
<include layout="@layout/bottom_navigation" />

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

Code of bottom_navigation:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorClarito"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

And code of bottom sheet

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="80dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

<TextView
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@color/colorBackgroundSemi"
    android:gravity="center"
    android:text="Bandeja de entrada"
    android:fontFamily="@font/eraslght"
    android:textColor="@color/colorLetra"
    app:layout_anchor="@+id/bottom_navigation"
    app:layout_anchorGravity="top"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="coisa2"
    android:textColor="@android:color/white" />

</LinearLayout>

I am new with these two elements. Is there someone who knows any way to achieve what I'm looking for?

I want my "bottom sheet" to act as such and can expand. My ultimate goal is to add a RecyclerView inside the BottomSheet.

回答1:

Wrap the two elements inside a linear layout. Not sure how coordinator layout behaves but I think it will not allow you to "order" elements (similar to frame layout).

回答2:

To use the BottomSheet, it should be a child of the CoordinatorLayout. Here i have use relative layout as a parent layout for bottom navigation to stay at the bottom and then CoordinatorLayout above bottom navigation. Hope this will help.

<?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:background="@android:color/transparent">

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


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="?attr/colorPrimary" />


        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/bottom_sheet_parent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

            <LinearLayout
                android:id="@+id/bottom_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <View
                    android:layout_width="20dp"
                    android:layout_height="4dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:background="@drawable/view_bottom_sheet_top" />

                <TextView
                    android:id="@+id/near_by"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/normal"
                    android:gravity="center"
                    android:includeFontPadding="false"
                    android:padding="10dp"
                    android:text="Book Now"
                    android:textAllCaps="true"
                    android:textColor="?attr/colorPrimaryText"
                    android:textSize="12sp" />

            </LinearLayout>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view_maps"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/bottom_view"
                android:layoutAnimation="@anim/layout_animation">

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

        </RelativeLayout>



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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/bottom_navigation_parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:fitsSystemWindows="true"
        app:elevation="1dp">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorContainerBackground"

            />
<!--              Start  Use BottomNavigationView or Using Custom bottom navigation-->

        <LinearLayout
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:layout_alignParentBottom="true"
            android:background="@android:color/transparent"
            android:baselineAligned="false"
            android:orientation="horizontal">


            <RelativeLayout
                android:id="@+id/home_parent"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:clickable="true"
                android:focusable="true"
                android:paddingTop="@dimen/item_padding"
                android:paddingBottom="@dimen/item_padding_bottom">

                <ImageView
                    android:id="@+id/home"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_centerHorizontal="true"
                    android:contentDescription="@string/app_name"
                    android:src="@drawable/ic_home_24_dp"
                    android:tint="?attr/colorAccent"

                    />

                <TextView
                    style="@style/NormalTextPrimary"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/home"
                    android:layout_marginTop="5dp"
                    android:gravity="center"
                    android:text="@string/home"
                    android:textColor="?attr/colorAccent"
                    android:textSize="12sp"
                    tools:ignore="SmallSp"

                    />
            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/profile_parent"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:focusable="true"
                android:paddingTop="@dimen/item_padding"
                android:paddingBottom="@dimen/item_padding_bottom">

                <ImageView
                    android:id="@+id/profile"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_centerHorizontal="true"
                    android:contentDescription="@string/app_name"
                    android:src="@drawable/ic_notification_24_dp"
                    android:tint="@color/colorDefault" />

                <TextView

                    style="@style/NormalTextPrimary"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/profile"
                    android:layout_marginTop="5dp"
                    android:gravity="center"
                    android:text="@string/profile"
                    android:textColor="@color/colorDefault"
                    android:textSize="10sp"
                    tools:ignore="SmallSp" />

            </RelativeLayout>


            <RelativeLayout
                android:id="@+id/notification_parent"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:focusable="true"
                android:paddingTop="@dimen/item_padding"
                android:paddingBottom="@dimen/item_padding_bottom">

                <ImageView
                    android:id="@+id/notification_icon"
                    android:layout_width="22dp"
                    android:layout_height="22dp"
                    android:layout_centerHorizontal="true"
                    android:contentDescription="@string/app_name"
                    android:src="@drawable/ic_notification_24_dp"
                    android:tint="@color/colorDefault"

                    />

                <TextView
                    style="@style/NormalTextPrimary"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/notification_icon"
                    android:layout_marginTop="5dp"
                    android:gravity="center"
                    android:text="@string/notification"
                    android:textColor="@color/colorDefault"

                    android:textSize="10sp"

                    tools:ignore="SmallSp" />
            </RelativeLayout>


        </LinearLayout>
<!--              End BottomNavigationView -->


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


</RelativeLayout>

Don't forget to add this in your Activity/Fragment

private RelativeLayout bottomSheetParentLayout;
    private BottomSheetBehavior mBottomSheetBehaviour;

   mBottomSheetBehaviour = BottomSheetBehavior.from(bottomSheetParentLayout);

  if (bottomNavigation != null) {

        mBottomSheetBehaviour.setPeekHeight(bottomNavigation.getHeight() + 90);

    }

回答3:

As far as I have understood your question, you want the RecyclerView to be shown in your bottom sheet. That is what makes the problem a lot easier. Let me tell you how.

You need to have a fixed height for your bottom navigation like this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorClarito"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

Now in your bottom sheet, configure the RecyclerView with a clipToPadding attribute in it. Which will have some padding at the bottom of your RecyclerView. The idea is to have nothing in the covered area of the RecyclerView which is coming out with the bottom sheet.

Here's how you should declare your RecyclerView in your bottom sheet.

<android.support.v7.widget.RecyclerView
    android:id="@+id/my_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:paddingBottom="80dp" />

Note that, I set the paddingBottom exactly to 80dp which is the height of the navigation view.

I hope this might help.

回答4:

If you also have a CollapsingToolBar/Toolbar arrangement, this is the best solution for you:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/cord_main_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:fitsSystemWindows="true"
        app:layout_constraintBottom_toTopOf="@id/home_bottom_navigation_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/home_appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/home_frag_toolbar"
                style="@style/Widget.Toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:logo="@drawable/ic_infinet_logo_white"
                app:navigationIcon="@drawable/ic_back_arrow" />

        </com.google.android.material.appbar.AppBarLayout>

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

        <FrameLayout
            android:id="@+id/bottom_sheet_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:clickable="true"
            app:behavior_hideable="true"
            app:behavior_peekHeight="@dimen/mini_player_height"
            app:behavior_skipCollapsed="false"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

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

            <fragment
                android:id="@+id/player_mini_frag_container"
                android:name="com.kokonetworks.kokonet.player.PlayMusicMiniFragment"
                android:layout_width="match_parent"
                android:layout_height="@dimen/mini_player_height" />

        </FrameLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/home_bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:itemBackground="@color/colorPrimary"
        app:itemHorizontalTranslationEnabled="false"
        app:itemIconTint="@drawable/nav_item_background"
        app:itemTextColor="@drawable/nav_item_background"
        app:labelVisibilityMode="auto"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/home_bottom_navigation_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

It ensures that:

BottomSheet is a child of the CoordinatorLayout
BottomNavigation is still rested at the bottom
CollapsingToolbar/AppBarLayout arrangement is still in place as expected

回答5:

To use the BottomSheet, it should be a child of the CoordinatorLayout, as iamnaran said. So simply:

Put everything in RelativeLayout
Put BottomSheet in CoordinatorLayout
Set the BottomNavigation property "alignParentBottom" to true

Make new xml file in /res/value and put

 <resources>
   <dimen name="bottomNavigationHeight">50dp</dimen>
 </resources>

Set the MarginBottom of the CoordinatorLayout (parent of BottomSheet) to
```
android:layout_marginBottom="@dimen/bottomNavigationHeight"
```

You can skip steps 4 and 5 by setting the MarginBottom of the CoordinatorLayout to:

    android:layout_marginBottom="50dp"

But this may lead to confusion in near future

The whole code should look something like this:

<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"
    >

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/clBottomSheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/bottomNavigationHeight">

        <FrameLayout
            android:id="@+id/standardBottomSheet"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:elevation="9dp"
            style="?attr/bottomSheetStyle"
            app:layout_behavior = "com.google.android.material.bottomsheet.BottomSheetBehavior"
            app:behavior_peekHeight="80dp">

        </FrameLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bttm_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_menu_nav"
        >
    </com.google.android.material.bottomnavigation.BottomNavigationView>

</RelativeLayout>

来源：https://stackoverflow.com/questions/48649649/bottom-sheet-above-bottom-navigation

标签

android

material-design

bottom-sheet

bottomnavigationview