Search code examples
androidmaterial-designbottom-sheetbottomnavigationview

Bottom Sheet Above Bottom Navigation


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

enter image description here

But it stays the following way. Both views collapse:

enter image description here

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.


Solution

  • 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).