(MVP): Add landscape support for the PIN layout.#74
Conversation
manpreeeeeet
commented
Dec 23, 2024
manpreeeeeet
commented
app/src/main/java/com/xinto/mauth/ui/component/pinboard/PinScaffold.kt
Outdated
Show resolved
Hide resolved
| val orientation = LocalConfiguration.current.orientation | ||
| if (orientation == Configuration.ORIENTATION_LANDSCAPE) { | ||
|
|
||
| FlowColumn( |
There was a problem hiding this comment.
Any reasons why this is a FlowColumn and not a FlowRow?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
The reason I asked was because FlowRow would allow extracting the content into a separate composable
app/src/main/java/com/xinto/mauth/ui/component/pinboard/PinScaffold.kt
Outdated
Show resolved
Hide resolved
fit 3 pin buttons. In landscape mode, height is the limiting constraint. So, this calculation tries to fit exactly 3 buttons in a row using their `PinButtonDefaults.PinButtonMinSize`.
|
Note 10 Plus: Medium Phone (Android Emulator): Tablet: Fold: Fold but folded: |
|
For small screens, the This is not a problem on tablets. Switching the So we need to reduce the MinimumButton size to make it fit. Reducing the min size to |
|
Also a dumb question, when you refer to AOSP's style, how/where do you find the screens that you reference. Example: |
I boot up the official emulator images for stuff like pin input. For more common layouts I use https://m3.material.io |
|
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 |
PinSetupScreen and PinRemoveScreen to use the small button size.
|
Latest changes Small Phone: Medium Phone: Fold: |
| object PinButtonDefaults { | ||
|
|
||
| val PinButtonMinSize = 72.dp | ||
| val PinButtonSmallMinSize = 56.dp |
There was a problem hiding this comment.
My goal was to make this as big as possible while still fitting all the 3 screens i was testing.
| } | ||
| } | ||
| ) | ||
| if (orientation == Configuration.ORIENTATION_LANDSCAPE) { |
There was a problem hiding this comment.
Switch AppBar based on orientation.
| } | ||
| }, | ||
| description = null, | ||
| useSmallButtons = orientation == Configuration.ORIENTATION_LANDSCAPE, |
There was a problem hiding this comment.
Use smaller buttons for these 2 screens.
2 participants
