How to implement a search dialog using full screen BottomSheetFragment
It’s been few months since I had to implemented my first Material design bottom sheet, and it was a real pain to figure it out at the beginning. Since I now kind of got the hang of it I decided to write a quick post about how to implement this.
There are three ways to implement a Material Design bottom sheet. Using a container view placed inside a CoordinatorLayout, BottomSheetDialog and BottomSheetDialogFragment. I’m going to use a BottomSheetDialogFragment.
Implementing a BottomSheet is pretty straightforward but figuring out how to make it full screen at the start can be little bit tricky.
First let’s create our bottom sheet layout.
Notice I have wrapped all the content in a LinearLayout called root that’s because BottomSheetDialog essentially wraps the content view of the dialog in a FrameLayout inside of a CoordinatorLayout. since it wraps the content BottomSheetDialogFragment’s max height will always be the height of the content. To make it full screen I had to calculate the screen height and set root layout’s height at the runtime.
The Code
Notice in onStart method BottomSheetBehavior is set to STATE_EXTENDED. That way BottomSheet starts at the EXTENDED state and does not have to relay on user’s finger movement to get to that state.
I think BottomSheets are pretty awesome with it’s awesome animations and all. Ohh did I say “awesome” again. The way BottomSheets work with a Recyclerview is pretty awesome too. 😉
Check out full example at GitHub
Have fun with It!
