A custom View implementing a bottom sheet that is part of the view hierarchy, not above it.
The substantial difference from all other implementations of the bottom sheet pattern is that, in this case, the bottom sheet is part of the view hierarchy, not above it.
In other implementations the only way to control the position of a collapsed bottom sheet is by using a peek factor (its distance from the bottom of the screen).
Here instead a collapsed bottom sheet is placed exactly where it is supposed to be in view hierarchy, just like it would be in a vertical LinearLayout
.
You can download the sample app here.
A list of published apps that are using this library:
Add this to you project-level build.gradle
:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
Add this to your module-level build.gradle
:
dependencies {
compile 'com.github.PierfrancescoSoffritti:SlidingDrawer:0.12'
}
The SlidingDrawer
ViewGroup offerd by this library can have only 2 children.
- The first children is the
non slidable view
(the view that will be covered when the bottom sheet is exapnded). - The seconds children is the
slidable view
(the actual bottom sheet, the view that will be sliding over thenon slidable view
).
A simple example of an XML file using SlidingDrawer. The LinearLayout
is the non slidable view
, the FrameLayout
is the slidable view
.
<com.pierfrancescosoffritti.slidingdrawer.SlidingDrawer
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"
app:elevation="4dp" >
<LinearLayout
android:id="@id/non_slidable_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="non slidable content" />
</LinearLayout>
<FrameLayout
android:id="@id/slidable_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white" >
<TextView
android:id="@+id/drag_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="drag me"
android:clickable="true" />
</FrameLayout>
</com.pierfrancescosoffritti.slidingdrawer.SlidingDrawer>
It's important to set the id attribute to android:id="@id/non_slidable_view"
for the non slidable view
and to android:id="@id/slidable_view"
for the slidable view
.
When you use a SlidingDrawer remember to always register a drag view
in your Java/Kotlin code, slidingDrawer.setDragView(view);
The drag view
is the only surface from which the slidable view
can be dragged. The drag view must be clickable.
If you want the slidable view
to show a different view when it's collapsed and expanded, the collapsed view
should have a specific id: android:id="@id/sliding_drawer_collapsed_view"
.