32

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

enter image description here

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?
Rahul
  • 3,293
  • 2
  • 31
  • 43
dipdipdip
  • 2,326
  • 1
  • 21
  • 31
  • Have u check this https://riptutorial.com/android/example/4458/bottomsheetbehavior-like-google-maps and https://github.com/miguelhincapie/CustomBottomSheetBehavior – AskNilesh Dec 15 '18 at 06:19
  • 2
    Also you need to share your code – AskNilesh Dec 15 '18 at 06:25
  • @dipdipdip What if you make your **Main layout container** of `BottomSheet` foucsable. In such a way, your `EditText` won't gain focus initially ! – Jeel Vankhede Dec 15 '18 at 06:33
  • 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. – dipdipdip Dec 15 '18 at 14:20
  • 1
    @dipdipdip 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 – MikeL Dec 18 '18 at 14:36
  • No I need a solution how to implement this kind of Bottom sheet. – dipdipdip Dec 19 '18 at 08:40
  • It reminds me of this gif, which may be similar: https://twitter.com/sbkurs/status/1044847256233541633 – AdamMc331 Dec 20 '18 at 20:28
  • https://stackoverflow.com/questions/40218778/android-multi-line-text-edittext-inside-bottomsheetdialog – 최봉재 Dec 21 '18 at 03:10
  • 1
    @AdamMc331 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. – dipdipdip Dec 21 '18 at 09:40
  • @dipdipdip 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 – AdamMc331 Dec 21 '18 at 14:19
  • hi @dipdipdip Have you find a solution ? I have the same problem when keyboard is opened it's expanded below the status bar. – Radwa Feb 05 '19 at 09:14
  • Sadly no. I also have this Keyboard issue. – dipdipdip Feb 05 '19 at 09:23
  • OK thanks any way. – Radwa Feb 05 '19 at 09:27

1 Answers1

-2

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()
   }
}
Tina Lu
  • 363
  • 3
  • 10