Why does BottomSheetDialog draw under the navigation bar in landscape?

Question

I am showing a simple Android modal bottom sheet menu. In portrait mode, it works fine, but when the device is rotated to landscape the bottom of the sheet draws under the navigation bar and is hidden. This is using a tablet emulator (Pixel C, API 32).

Portrait mode: correct

Landscape mode: bottom of sheet is hidden

Sample code, using the Android Studio "Empty Activity" template project and code from the Material docs.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.showDialog.setOnClickListener { showBottomSheetDialog() }
    }


    private fun showBottomSheetDialog() {
        val modalBottomSheet = ModalBottomSheet()
        modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)
    }
}

class ModalBottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = inflater.inflate(R.layout.bottom_sheet_dialog, container, false)

    companion object {
        const val TAG = "ModalBottomSheet"
    }
}

bottom_sheet_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:paddingVertical="12dp"
        android:text="First Row"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/text_view_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:paddingVertical="12dp"
        android:text="Second Row"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/text_view_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:paddingVertical="12dp"
        android:text="Third Row"
        android:textSize="16sp" />

</LinearLayout>

It seems this might be a duplicate of https://stackoverflow.com/questions/45614271/bottomsheetdialogfragment-doesnt-show-full-height-in-landscape-mode -- not sure why my searching in advance didn't find it. — Ben, Jun 07 '22 at 08:23

score 2 · Answer 1 · answered Jun 07 '22 at 08:30

This appears to be intentional Android tablet UI behaviour. (It's a mystery why it is desirable to start a bottom sheet off in a state where the user can't see its content, but anyway...)

Fixed by adding this into the ModalBottomSheet class:

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        dialog?.setOnShowListener {
            (it as? BottomSheetDialog)?.apply {
                behavior.state = BottomSheetBehavior.STATE_EXPANDED
            }
        }
    }

With thanks to the answers posted in Why does BottomSheetDialog draw under the navigation bar in landscape?

score 0 · Answer 2 · answered Jun 06 '22 at 12:09

0

I feel the screen can render only 2 times space in Landscape mode as per your design.

Try to provide scrolling feature so that it will support in both Portrait and Landscape mode even in future if you add more items to BottomSheet.

answered Jun 06 '22 at 12:09

Hem

11
4

Why does BottomSheetDialog draw under the navigation bar in landscape?

2 Answers2