Bottom Sheet Above Bottom Navigation
Solution 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).
Solution 2
To use the BottomSheet, it should be a child of the CoordinatorLayout. Here I have used relative layout as a parent layout for bottom navigation to stay at the bottom and then CoordinatorLayout above bottom navigation. Here's a article that will help you.
<?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 BottomNavigationView -->
<!-- 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);
}
Solution 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.
Solution 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
doblejota93
Updated on June 05, 2022Comments
-
doblejota93 almost 2 years
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 theBottomSheet
.