BottomSheetFragment with EditText

If you want to move your bottom sheet along with keyboard, this article is a great example for you. We will use modal bottom sheet which is a version of DialogFragment that shows a bottom sheet using BottomSheetDialog. We will have a fancy EditText inside our bottom sheet dialog fragment.

To show the entire bottom sheet with EditText above Keyboard, we need to set windowIsFloating false. Also we need to add windowSoftInputMode. My bottom sheet style looks like this:

<style name="FeedbackBottomSheetDialog" parent="Theme.Design.BottomSheetDialog">
  <item name="bottomSheetStyle">@style/MyBottomSheetStyle</item>
  <item name="android:windowSoftInputMode">adjustResize</item>
  <item name="android:windowIsFloating">false</item>
</style>

<style name="MyBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
  <item name="android:background">#00000000</item>
</style>

Now, we want our text automatically moves to the next line while entering data. Add “inputType” to your EditText.

android:inputType="textMultiLine"

Also, I needed to “setImeOptions” and “rawInputType” programmatically.

binding.userInput.imeOptions = EditorInfo.IME_ACTION_DONE
binding.userInput.setRawInputType(InputType.TYPE_CLASS_TEXT)

Another important point about EditText height is setting “lines” in xml. By doing that it will look great for all screen sizes.

android:lines="5"

Now it works for all different sizes, pressing the Android back button doesn’t affect bottom sheet size. You can find the source code here :) Happy coding, have a nice Kotlin :)

Note: I strongly recommend reading this fantastic medium post; Simple one-liner ViewBinding in Fragments and Activities. You can see how to use viewbinding easily thanks to @Zhuinden :)