Make the Adaptive Layout Codelab edge-to-edge

[ashnohe]

MainActivity.kt

• Called enableEdgeToEdge()
• Removed translucency applied to 3-button navigation bar with isNavigationBarContrastEnforced=false

Theme.kt

• Removed all logic needed to set the status bar icon colors. Tested in both light & dark theme.

ReplyListContent.kt

• Added a new function to make a copy of PaddingValues. Used in the next bullet.
• Ensured first and last list items do not hide behind status bars, items scroll under the status bars, and excess bottom padding is removed in ReplyListPane and ReplyDetailPane. To do this, I set contentPadding = WindowInsets.safeDrawing.asPaddingValues().copy(layoutDirection, bottom = 0.dp).
• Now that we're accounting for the top system bars, removed excess top padding by replacing padding(16.dp) with padding(horizontal = 16.dp).

These changes are made to the main branch.

Portrait:

Landscape (looks a little weird, not yet sure what to do about this):

Unfolded, showing the last list item:

When this commit is cherry picked to the end branch the app will look like this:

[alexvanyo]

I think this can be done with built-in APIs as

Suggested change

	contentPadding = WindowInsets.safeDrawing.asPaddingValues()
	.copy(layoutDirection, bottom = 0.dp)
	contentPadding = WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top).asPaddingValues()

[alexvanyo]

Ditto here

Suggested change

	contentPadding = WindowInsets.safeDrawing.asPaddingValues()
	.copy(layoutDirection = layoutDirection, bottom = 0.dp)
	contentPadding = WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top).asPaddingValues()

[alexvanyo]

I think this can be removed entirely with the alternate APIs above, but one subtle behavior issue that can arise with this code:

This causes calculateStartPadding and other calculate* methods to be invoked during composition. The correct inset values (as exposed in the PaddingValues) won't necessarily be correct during composition, so anything based on the values that are computed during composition can end up resulting in being off by one frame.

A solution to this here would be to setup a PaddingValues that defers calling the calculate* values on the source PaddingValues, so that they are read later when the inset values will be correct:

fun PaddingValues.copy(
    start: Dp? = null,
    top: Dp? = null,
    end: Dp? = null,
    bottom: Dp? = null,
) = object : PaddingValues {
    override fun calculateBottomPadding(): Dp =
        bottom ?: this@copy.calculateBottomPadding()

    override fun calculateLeftPadding(layoutDirection: LayoutDirection): Dp =
        when (layoutDirection) {
            LayoutDirection.Ltr -> start
            LayoutDirection.Rtl -> end
        } ?: this@copy.calculateLeftPadding(layoutDirection)

    override fun calculateRightPadding(layoutDirection: LayoutDirection): Dp =
        when (layoutDirection) {
            LayoutDirection.Ltr -> end
            LayoutDirection.Rtl -> start
        } ?: this@copy.calculateRightPadding(layoutDirection)

    override fun calculateTopPadding(): Dp =
        top ?: this@copy.calculateTopPadding()
}

[riggaroo]

I think Alex's comment should be addressed and then we good to merge!

[riggaroo]

Haven't seen this done before, should we add it to the compose docs for edge to edge?