-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
(MVP): Add landscape support for the PIN layout. #74
base: master
Are you sure you want to change the base?
Conversation
manpreeeeeet
commented
Dec 23, 2024
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Any reasons why this is a FlowColumn and not a FlowRow?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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`.
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.
@@ -106,7 +110,8 @@ fun PinButton( | |||
|
|||
object PinButtonDefaults { | |||
|
|||
val PinButtonMinSize = 72.dp | |||
val PinButtonSmallMinSize = 56.dp |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Switch AppBar based on orientation.
}, | ||
description = null, | ||
useSmallButtons = orientation == Configuration.ORIENTATION_LANDSCAPE, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use smaller buttons for these 2 screens.