Introducing: Super Bottom Sheet
BottomSheets are these magic cards that appear from the bottom of the screen. They are useful to display supplementary content on a surface anchored to the bottom of the screen.
This year Google has updated its UI model. Check the updated UI above:
As you can see, the bottom sheet has round corners and a status bar color. Although these new improvements introduce a much nicer experience to users, the bottom sheet class given by design library does not have it out of the box.
If you want the new model, you have to implement it yourself.
Solution
This issue served as an inspiration to develop an open source library that delivers this new bottom sheet model to all developers.
I call it: Super Bottom Sheet!
How to use it
First things first, this library is available in jitpack, so you need to add this repository to your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}Then, add the dependency to each individual com.android.application module where you want to use it. For example, app/build.gradle.
dependencies {
implementation 'com.github.andrefrsousa:SuperBottomSheet:1.2.0'
}To have the new bottom sheet model, it’s as simple as extending a class.
Instead of extending BottomSheetDialogFragment you just need to extent SuperBottomSheetFragment. Example:
class MySheetFragment : SuperBottomSheetFragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
super.onCreateView(inflater, container, savedInstanceState)
return inflater.inflate(R.layout.fragment_demo_sheet, container, false)
}
}
That’s is!
Customization
The library also allow a couple of customizations. Here are some:
// The bottom sheet background color
<attr name="superBottomSheet_backgroundColor" format="color"/>// To radius to be applied to the bottom sheet. 0 if you want none.
<attr name="superBottomSheet_cornerRadius" format="dimension"/>// Enable or disable the radius animation. Default is true.
<attr name="superBottomSheet_animateCornerRadius" format="float"/>// Default if false, if you want to skip collapse state
<attr name="superBottomSheet_alwaysExpanded" format="boolean"/>
Check the full documentation here.
Final result
Here is the result of using SuperBottomSheet on a project:
