I’m having an “issue” where, when opening a detail...

# compose-wear

[Tgo1014]

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?

device-2022-06-13-004154.webm

[Tgo1014]

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

[yschimke]

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.

[yschimke]

The Horologist library has a modifier for TimeText that enables exactly this.

[yschimke]

See the examples here https://github.com/google/horologist/blob/main/sample/src/main/java/com/google/android/horologist/sample/FadeAwayScreen.kt

[Tgo1014]

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?

[yschimke]

Unless I'm misunderstanding your intent about the padding. If so, can you provide a code sample.

[Tgo1014]

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

[yschimke]

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.

[yschimke]

Sorry, I jumped to wrong conclusion about the time text over content which our UX guidance is to avoid.

[yschimke]

Are you on beta03?

[Tgo1014]

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

[yschimke]

Aren't you returning back to the first screen?

[Tgo1014]

I guess we are not on the same page (pun intended) yet hahah The issue is this red circle, when opening the detail screen

[Tgo1014]

I’ve a contentPadding on the top, so the movie shouldn’t be behind the clock when the screen opens I believe

[yschimke]

I'm going to get a coffee, yep that makes sense. I'm really surprised if that doesn't work. Let me test.

[Tgo1014]

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 😄

[yschimke]

+1

[yschimke]

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.

[yschimke]

https://gist.github.com/yschimke/a7039c8dbdc06be12f32a23c63bc6e5a

[Tgo1014]

so the trick is on the rememberScalingLazyListState then? I’ll try this soon 😄

[yschimke]

The guidance on scrolling the time text out of the way is here https://developer.android.com/training/wearables/compose/time-text#anatomy

[yschimke]

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

[yschimke]

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

[bod]

☝️ Hey I'm also working on a wear app that shows a list of movies 😛

[John Nichol]

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

[John Nichol]

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.

[John Nichol]

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

[Tgo1014]

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 😄

[Tgo1014]

Just wanted to say that changing the lazy state indeed worked as I wanted it to. Thanks! 😁