Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android BottomSheet: Is hiding under the toolbar

I tried to use the new bottom sheet from the support library 23.2.0 to have a bottom sheet expand to full screen like suggested in the design guidelines

This works very good but the bottom sheet goes under my ActionBar and under my tabs.

How is it possible to let the bottom sheet go over the toolbar? My menu is structured like this:

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|snap|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <include
        android:id="@+id/playerLayout"
        layout="@layout/player_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_peekHeight="?attr/actionBarSize"
        app:layout_behavior="@string/bottom_sheet_behavior"
        app:model="@{model}"/>

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

enter image description here

like image 717
Paul Woitaschek Avatar asked Feb 29 '16 23:02

Paul Woitaschek


2 Answers

The AppBarLayout has a default elevation of 4dp (the dimension resource value design_appbar_elevation).

By default CoordinatorLayout, like any FrameLayout, will layout elements with higher elevation before lower elevation on API 21 and higher devices.

Try adding android:elevation="@dimen/design_appbar_elevation" to your layout.

Note that the elevation of a modal bottom sheet is @dimen/design_bottom_sheet_modal_elevation == 16dp

like image 166
ianhanniballake Avatar answered Nov 08 '22 09:11

ianhanniballake


If the above answer doesn't help, try to set to your BottomSheet:

 android:elevation="@dimen/design_appbar_elevation"
 android:fitsSystemWindows="true"

and create your Fragment such way:

videoFragment = VideoFragment.newInstance();
getSupportFragmentManager().beginTransaction()
                .replace(R.id.video_fragment, videoFragment)
                .commit();


not like this: videoFragment = (VideoFragment) getSupportFragmentManager().findFragmentById(R.id.video_fragment);

For example I have such layout:

<android.support.design.widget.CoordinatorLayout
    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:background="@color/activity_background">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

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

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        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/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:itemBackground="@color/white"
        app:menu="@menu/bottom_navigation_main"/>

    <FrameLayout
        android:id="@+id/video_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="@dimen/design_appbar_elevation"
        android:fitsSystemWindows="true"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior"/>
</android.support.design.widget.CoordinatorLayout>


and it doesn't work without specified things

like image 2
Grigory Azaryan Avatar answered Nov 08 '22 09:11

Grigory Azaryan