(MVP): Add landscape support for the PIN layout.

[manpreeeeeet]

[X1nto]

It's better to merge these paddings into one modifier

[manpreeeeeet]

Just so I am understanding this correctly, I do not see a visual difference when I remove padding(it) here, which is expected since we already do padding(40.dp). So we can safely remove this for the row layout, is that right?

[X1nto]

.padding(it) applies additional paddings provided by Scaffold to ensure the top and bottom bars don't overlap with the content. Removing it will also result in a compiler warning/error

[X1nto]

Any reasons why this is a FlowColumn and not a FlowRow?

[manpreeeeeet]

I chose FlowColumn since in landscape fitting all the buttons requires reducing the height as low as possible rather than the width. And using FlowColumn + weight(1f) made it easier.

But now taking a second look at it, a fixed width for the Box that contains these buttons should be able to achieve this without having to do it using FlowColumns.

[X1nto]

The reason I asked was because FlowRow would allow extracting the content into a separate composable

[manpreeeeeet]

Alternative to FlowColumn requires this code, where we need to manually calculate all the padding + minimumButton size. This does remove the duplicated content inside of FlowColumn and FlowRow but it does make it complex to read IMO, since it is not obvious what/how it is calculated without taking a closer look.

I am leaning towards the FlowColumn approach. Thoughts?

                val pinBoardHorizontalPadding = 32.dp 
                val horizontalSpacedBy = 16.dp 
                val totalPadding = (pinBoardHorizontalPadding * 2) + (horizontalSpacedBy * 2)
                val minimumBoxWidth = remember(PinButtonDefaults.PinButtonMinSize) {
                    val buttonsInRow = 3
                    (PinButtonDefaults.PinButtonMinSize * buttonsInRow) + totalPadding
                }
                Box(
                    modifier = Modifier.width(minimumBoxWidth),
                    contentAlignment = Alignment.Center
                ) {
                    PinBoard(
                        modifier = Modifier
                            .padding(horizontal = pinBoardHorizontalPadding)
                            .padding(bottom = 16.dp),
                        horizontalSpace = horizontalSpacedBy,
                        state = state
                    )
                }

[X1nto]

I think I'd rather have this than duplicated code

[manpreeeeeet]

Note 10 Plus:

Medium Phone (Android Emulator):

Tablet:

Fold:

Fold but folded:

[manpreeeeeet]

For small screens, the PinSetup and PinRemoval screens would require additional changes. This is what it looks like currently:

This is not a problem on tablets.

Switching the LargeTopBar with Topbar in landscape mode gets us this far:

So we need to reduce the MinimumButton size to make it fit. Reducing the min size to 60.dp:

[manpreeeeeet]

Also a dumb question, when you refer to AOSP's style, how/where do you find the screens that you reference. Example:

[X1nto]

Also a dumb question, when you refer to AOSP's style, how/where do you find the screens that you reference.

I boot up the official emulator images for stuff like pin input. For more common layouts I use https://m3.material.io

[X1nto]

TopAppBar in landscape looks wonderful, let's do that to fit the buttons. Otherwise, this looks great. I'll make some final adjustments for larger screens on landscape after this