https://kotlinlang.org logo
Title
m

miqbaldc

06/09/2021, 2:41 PM
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?
Using
Modifier.weight
for each column item seems not the right choice either :(
z

Zach Klippenstein (he/him) [MOD]

06/09/2021, 3:30 PM
It looks like maybe you just need to use a smaller font size?
😭 1
✔️ 1
m

miqbaldc

06/09/2021, 3:31 PM
Did we really have to handle different
.sp
&
.dp
for smaller DPI? as stated: https://developer.android.com/training/multiscreen/screensizes#compose-alternative-layouts
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(?)
z

Zach Klippenstein (he/him) [MOD]

06/09/2021, 3:36 PM
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 😉
m

miqbaldc

06/09/2021, 3:44 PM
attached the screenshot here:

for larger resolution

The font should be rendered with the appropriate density on different devices
We thought this is handled by default in Compose 😞
z

Zach Klippenstein (he/him) [MOD]

06/09/2021, 3:59 PM
And this works as expected with Android views?
m

miqbaldc

06/09/2021, 4:04 PM
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 🙏
using AndroidViews also doesn’t work as expected 😞
a

Adam Powell

06/09/2021, 6:29 PM
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
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
1
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
:thank-you: 1
m

miqbaldc

06/10/2021, 3:54 AM
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 🚀
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
a

Adam Powell

06/10/2021, 2:44 PM
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
:thank-you: 1
m

miqbaldc

06/11/2021, 7:35 AM
Ahh, that’s a great ideas about
AnnotatedString
and the checkbox label
curious if
AnnotatedString
possible to have a click handler on specific styling?
found the addStringAnnotation answer from here: https://stackoverflow.com/a/65568479/3763032