[Catalog] Navigation Bar overlaps UI components in landscape mode

[patrickfrei]

trafficstars

Description: In the Material Design M3 catalog example, if a user has set either 2-button or 3-button navigation mode and switches from portrait to landscape mode, the navigation bar overlaps some UI components on the right / left side of the screen (e.g. back button, menu button, settings button). However, if a user has set gesture navigation mode instead, the UI is not affected by that issue as the system behavior is slightly different.

You can reproduce the issue as follows:

• Switch to either 2-button or 3-button navigation mode on any device / emulator
• Open the Material Design M3 catalog example
• Turn the device / emulator to landscape mode

See below example screenshots that show the issue in various components..

Example 1: 3-button navigation bar on the left side is overlapping the back button / icon

Example 2: 3-button navigation bar on the right side is overlapping the "heart" button / icon

Example 3: 3-button navigation bar on the left side is overlapping the closing button / icon

Example 4: 3-button navigation bar on the right side is overlapping the menu button / icon

Expected behavior: The 2-button and 3-button navigation bars don't overlap the UI components in landscape mode.

Source code: See the catalog example code.

To avoid that issue, you should apply left and right insets for the main view via ViewCompat.setOnApplyWindowInsetsListener and setPadding.

Minimal sample app repro: See the catalog example code.

Android API version: As of API 16 up to API 33

Material Library version: 1.7.0-beta01

Device: Any emulator (e.g. Pixel ) or any real device.

[patrickfrei]

Hi @shruddms, there are some further issues with the navigation bar even if you are in portrait mode. Furthermore, I've seen that the overscroll effect animation at the bottom of the screen is often almost fully covered by the navigation bar. The issues can be clearly seen when using the 2- or 3-button navigation mode. In case of gesture navigation mode it's not so obvious. See below examples.

1) Main app screen (navigation bar covers the text "Typography" / it also covers the overscroll effect animation as it starts at the very bottom of the screen and not on top of the navigation bar):

2) Top App Bar - Scrolling Demo (navigation bar is covering the overscroll effect animation):

Isn't that an issue with ViewPager2 and android:clipToPadding="false"? Because I've a similar problem with my app. See https://issuetracker.google.com/issues/241936671