https://kotlinlang.org logo
Title
t

Tgo1014

06/13/2022, 12:49 PM
I’m having an “issue” where, when opening a detail screen, the top item is displayed but the padding on the top is not respected, so the item is behind the clock. Is there a way to fix it?
Also you can see in the video sometimes when going back to the main screen it’s black until I touch it on the emulator, but on the real device this never happens, not sure why
y

yschimke

06/13/2022, 1:00 PM
Yes - this is the expected default, it's not a bug. You need to scroll the text out of the way as the list moves up.
The Horologist library has a modifier for TimeText that enables exactly this.
t

Tgo1014

06/13/2022, 1:02 PM
Maybe I was not very clear. I don’t mind the time there, actually I want to keep it, but I would like for the image to not be behind the clock when opening it, just when he user scrolls. Is it possible?
y

yschimke

06/13/2022, 1:02 PM
Unless I'm misunderstanding your intent about the padding. If so, can you provide a code sample.
t

Tgo1014

06/13/2022, 1:07 PM
Thanks for the code, but it’s not exactly what I had in mind. If you see the video again, you’ll notice when I scroll down and back up, on top of the movie cover there’s a padding (contentPadding on the LazyList) which is not respected when I open the screen. When I open it’s behind the clock ignoring the
contentPadding
y

yschimke

06/13/2022, 1:10 PM
Yep, makes sense. It's possibly autoCenteringParams, @John Nichol to confirm. But if it's working on the first view and then failing when you return, possibly a bug.
Sorry, I jumped to wrong conclusion about the time text over content which our UX guidance is to avoid.
Are you on beta03?
t

Tgo1014

06/13/2022, 1:12 PM
Hmm if it’s guidance I may take a look to implement it later, but still I imagine the clock should show on the top position right? So that mean that the movie cover on the detail screen shouldn’t be behind it. Yeah, I’m on beta03. I tried messing around with autoCentering and archor but couldn’t find a way to solve it. As it works on the first screen, I’m probably doing something wrong on the second
y

yschimke

06/13/2022, 1:13 PM
Aren't you returning back to the first screen?
t

Tgo1014

06/13/2022, 1:16 PM
I guess we are not on the same page (pun intended) yet hahah The issue is this red circle, when opening the detail screen
I’ve a contentPadding on the top, so the movie shouldn’t be behind the clock when the screen opens I believe
y

yschimke

06/13/2022, 1:18 PM
I'm going to get a coffee, yep that makes sense. I'm really surprised if that doesn't work. Let me test.
t

Tgo1014

06/13/2022, 1:18 PM
Maybe I should post my code, I’ve a quick meeting now and after that I can post the gist here. Makes it easier for you to help me 😄
y

yschimke

06/13/2022, 1:18 PM
+1
A contrived example, I think shows that it definitely should be possible. But you do have different levers, ScalingLazyListState.initialCenterItemIndex, autoCenteringParams, contentPadding. I suspect if you default to bringing the item with index 1 (The Northman) into the center, then it will put your image too high.
t

Tgo1014

06/13/2022, 1:29 PM
so the trick is on the
rememberScalingLazyListState
then? I’ll try this soon 😄
y

yschimke

06/13/2022, 1:29 PM
The guidance on scrolling the time text out of the way is here https://developer.android.com/training/wearables/compose/time-text#anatomy
🙌🏽 1
Again, @John Nichol to confirm. My mental model is • content padding (a one off padding for the list, but vertical padding may be off screen) • auto centering params - controlling which items should be able to be pulled into the center of the screen, • ScalingLazyListState - the initial and state for which item is actually in the middle of the screen
The docs for autoCentering suggest that it's automatically doing what you are trying to do with contentPadding. So I think it's more setting the right value for ScalingLazyListState
b

bod

06/13/2022, 1:43 PM
☝️ Hey I'm also working on a wear app that shows a list of movies 😛
😄 1
j

John Nichol

06/13/2022, 1:48 PM
Sorry just catching up with this thread. You shouldn't normally need content padding. AutoCentering will normally do what you need. But by default the second item in your ScalingLazyColumn (that is item 1 where the items start at item index 0) will be placed in the center of the screen
If you do not want item index 1 to be in the center at the start then use the
rememberScalingLazyListState
to set item index 0 as the initial center item.
👍🏽 1
👍🏻 1
So autoCentering/contentPadding create the necessary space for items to be positioned, but the state then determines which item is initially positioned in the middle
👍🏻 1
t

Tgo1014

06/13/2022, 1:52 PM
I’m looking forward to try this, it seems to be exactly the case @John Nichol. I’ll make sure to post the results here 😄
Just wanted to say that changing the lazy state indeed worked as I wanted it to. Thanks! 😁