Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show entire bottom sheet with EditText above Keyboard

I'm implementing a UI where a bottom sheet will appear above the keyboard with an EditText for the user to enter a value. The problem is the View is being partially overlapped by the keyboard, covering up the bottom of the bottom sheet.

Here is the Bottom Sheet and no keyboard.

Bottom Sheet

Here is the Bottom Sheet with the keyboard showing.

enter image description here

What's the best method to ensure the entire Bottom Sheet is shown?

Thanks.

like image 680
Advice-Dog Avatar asked Dec 28 '17 05:12

Advice-Dog


1 Answers

Just reposting @jblejder from this question Keyboard hides BottomSheetDialogFragment since it worked for me, to make it easier for others to find:

The most convenient way that I found to change this is by creating style:

<style name="DialogStyle" parent="Theme.Design.Light.BottomSheetDialog">     <item name="android:windowIsFloating">false</item>     <item name="android:statusBarColor">@android:color/transparent</item>     <item name="android:windowSoftInputMode">adjustResize</item> </style> 

And set this in onCreate method of your BottomSheetDialogFragment:

override fun onCreate(savedInstanceState: Bundle?) {     super.onCreate(savedInstanceState)     setStyle(DialogFragment.STYLE_NORMAL, R.style.DialogStyle) } 

This is how it looks on my device:

enter image description here

==== UPDATE ====

As already mentioned in the Comments a few times, you might also need to set the state of the BottomSheetDialog to STATE_EXPANDED like in Nordknight's answer below

dialog = new BottomSheetDialog(getContext(), R.style.BottomSheetDialog);   dialog.setOnShowListener(new DialogInterface.OnShowListener() { @Override public void onShow(DialogInterface dialog) {             new Handler().postDelayed(new Runnable() {                 @Override                 public void run() {                     BottomSheetDialog d = (BottomSheetDialog) dialog;                     FrameLayout bottomSheet = d.findViewById(R.id.design_bottom_sheet);                     BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);                     bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);                 }             },0);         }     }); 
like image 91
Distra Avatar answered Sep 23 '22 17:09

Distra