Modal BottomSheetDialog with fullscreen ToolBar and Softkeyboard

Question

How is it possible to create a modal BottomSheetDialog(Fragment) which switches to fullscreen with a ToolBar as shown in the Material Design Spec?

I could add a ToolBar manually by adding a BottomSheetBehavior.BottomSheetCallback and setting the alpha of the ToolBar depending on the slideOffset. This is a bit hacky but seems to work when moving the Bottom Sheet. However, this doesn't work when my Bottom Sheet contains an EditText and the Keyboard is shown. I tried both Versions: BottomSheetDialogFragment and manually adding the Behavior to a new Fragment.

• Is there an easier way to achieve this?
• Can I trigger the ToolBar when the Keyboard is shown and the Bottom Sheet uses up the whole space?

Teryn

Have u check this riptutorial.com/android/example/4458/… and github.com/miguelhincapie/CustomBottomSheetBehavior – Counterscarp

Also you need to share your code – Counterscarp

@Teryn What if you make your Main layout container of BottomSheet foucsable. In such a way, your EditText won't gain focus initially ! – Durware

Initial focus is not a problem. Opening the keyboard in general is a problem. The ToolBar should also get visible (with an animation!) when the Content hits the top of the screen, no matter how it reaches it (scrolling the content, Bottom sheet Expand, Keyboard shown). I didn't get it work with this CustomBottomSheet and the Keyboard either. – Teryn

@Teryn I am having trouble understanding if you need a complete solution for the material design feature or solve a specific bug in something you have already created; if it is the latter you should really give us some code (as Nilesh Rathod suggested) or at least a screen capture of the bug – Grunberg

No I need a solution how to implement this kind of Bottom sheet. – Teryn

It reminds me of this gif, which may be similar: twitter.com/sbkurs/status/1044847256233541633 – Superheterodyne

#40219278 – Platus

@Superheterodyne I didn't think about the new MotionLayout. Maybe I'll give it a try. But I don't want to lose the normal BottomSheetBehavior. I hope this works together. – Teryn

@Teryn yeah, I'm only drawing similarities between what you showed and that gif, but I'm not confident it's the solution. That's why I went with comment and not answer for now haha – Superheterodyne

hi @Teryn Have you find a solution ? I have the same problem when keyboard is opened it's expanded below the status bar. – Tay

Sadly no. I also have this Keyboard issue. – Teryn

OK thanks any way. – Tay

Answer 1

I face the same issue. This is what I solved. The Behavior is hidden in BottomSheetDialog, which is available to get the behavior If you would like not to change your parent layout to be CooridateLayout, you can try this.

STEP 1: customize the BottomSheetDialogFragment

open class CBottomSheetDialogFragment : BottomSheetDialogFragment() {
   //wanna get the bottomSheetDialog
   protected lateinit var dialog : BottomSheetDialog 
   override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
      dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
      return dialog
   }

   //set the behavior here
   fun setFullScreen(){
      dialog.behavior.state = STATE_EXPANDED
   }
}

STEP 2: make your fragment extend this customized fragment

class YourBottomSheetFragment : CBottomSheetDialogFragment(){

   //make sure invoke this method after view is built
   //such as after OnActivityCreated(savedInstanceState: Bundle?)
   override fun onStart() {
      super.onStart()
      setFullScreen()//initiated at onActivityCreated(), onStart()
   }
}

Henryhenryetta