Searching this channel with keyword: *overlap, hdpi* looks like I’m unable to find similar situtatio...

# compose

[miqbaldc]

Searching this channel with keyword: overlap, hdpi looks like I’m unable to find similar situtation

Any advice for a workaround of smaller devices resolutions (actual: left image); (expected: right image)

Do we really needs to use ConstraintLayout integration with Jetpack Compose?

or should we use something like FlowLayout?

[Zach Klippenstein (he/him) [MOD]]

It looks like maybe you just need to use a smaller font size?

[miqbaldc]

Did we really have to handle different .sp & .dp for smaller DPI?

as stated: https://developer.android.com/training/multiscreen/screensizes#compose-alternative-layouts

[miqbaldc]

It looks like maybe you just need to use a smaller font size?

Agreed


Honestly, we’re looking into “automagically” solution that didn’t requires a lot of changes, but looks like still not possible for now(?)

[Zach Klippenstein (he/him) [MOD]]

The font should be rendered with the appropriate density on different devices, but you didn’t provide any examples of what this ui looks like on other devices or what your code looks like so I am speculating very hard 😉

[miqbaldc]

RegisterScreen_kt.kt

[miqbaldc]

attached the screenshot here:

for larger resolution▾

[miqbaldc]

The font should be rendered with the appropriate density on different devices

We thought this is handled by default in Compose 😞

[Zach Klippenstein (he/him) [MOD]]

And this works as expected with Android views?

[miqbaldc]

previously, we didn’t get the report from our existing user on (480 x 800: hdpi), regarding this issue,

we presume this is works as expected (with Android views),

but lemme try to revert it back with Android views, and see how it goes in the emulator 🙏

[miqbaldc]

using AndroidViews also doesn’t work as expected 😞

[Adam Powell]

if the user requested text and UI elements to be bigger, you'll need to respect that decision. Oftentimes UIs like this one are made scrollable to account for these cases

[Adam Powell]

users lower the effective density of their devices for accessibility; they may not be able to read smaller text or accurately touch smaller UI elements

[Adam Powell]

I don't see anything wrong with your, "actual" images; you can probably add a Modifier.verticalScroll to the column that contains all of these form items and be good to go

[miqbaldc]

you can probably add a Modifier.verticalScroll to the column that contains all of these form items and be good to go

ahh, thanks for this! 🎉

users lower the effective density of their devices for accessibility; they may not be able to read smaller text or accurately touch smaller UI elements

can’t be more agreed with you, we thought we need to have a smaller sizes as well (for smaller resolutions), but verticalScroll seems the best choice 🚀

[miqbaldc]

does this mean Modifier.horizontalScroll is a way to go as well to have a scrollable horizontal content in the lower resolution, or this is a no go for horizontal scroll in UX?

this for example▾

, the string: syarat dan ketentuan seems broken

[Adam Powell]

I would probably try to avoid horizontal scrolling for similar cases and just let it wrap instead. I'm afraid I don't speak the language used here and don't have context as to whether this suggestion is appropriate or not, but it may be an option to use AnnotatedString to provide styling within the same Text composable, such that the checkbox label and text beside it wrap as one body of text

[miqbaldc]

Ahh, that’s a great ideas about AnnotatedString and the checkbox label

[miqbaldc]

curious if AnnotatedString possible to have a click handler on specific styling?

found the addStringAnnotation answer from here: https://stackoverflow.com/a/65568479/3763032