fix: pinned tabs with viewpager and drop shadow#968
Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c89dd8837c
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| onEmptyActivityRowClick = onEmptyActivityRowClick, | ||
| contentPadding = PaddingValues(top = 0.dp), | ||
| listState = listState, | ||
| contentPadding = PaddingValues(top = topPadding + 16.dp), |
There was a problem hiding this comment.
Offset empty activity state below pinned header
After moving All Activity into PinnedTabsScaffold, the screen relies on contentPadding to keep content below the pinned filter/tabs, but that padding is only honored by the list branch in ActivityListGrouped. When filters produce no results, the fallback empty text is rendered at the top of the scaffold and is overlapped by the pinned header, so users can’t clearly see the "no activity" state. This is reproducible by opening All Activity and applying filters that return zero rows.
Useful? React with 👍 / 👎.
| ) | ||
| PinnedTabsScaffold( | ||
| header = { | ||
| Column(modifier = modifier.fillMaxWidth()) { |
There was a problem hiding this comment.
Avoid reusing outer modifier in header container
ShopDiscoverScreen now applies the same modifier parameter to both ScreenColumn and the pinned header Column. This duplicates any caller-provided layout/semantics modifiers across two nodes; for example, a size modifier like fillMaxSize can make the header measure as full height and push pager content off-screen, while semantics/test tags become duplicated. The header should use a local Modifier.fillMaxWidth() instead of reusing the screen-level modifier.
Useful? React with 👍 / 👎.
ovitrif
left a comment
There was a problem hiding this comment.
added 2 nits for early review; there's also some relevant AI bot comments.
| .fillMaxWidth() | ||
| .zIndex(2f) | ||
| .hazeEffect(state = hazeState, style = hazeStyle) | ||
| .onSizeChanged { headerHeight = with(density) { it.height.toDp() } } |
There was a problem hiding this comment.
nit: should use subcompose layout to avoid re-renders during measurements composition pass.
There was a problem hiding this comment.
nit: there's also a .scaffold package for this kind of things.
Addresses #916
This PR:
Description
Design review follow-ups for Android v2.2.0, generalized to every screen with a tab row.
PinnedTabsScaffoldkeeps the tab row (and the Activity search field) pinned while content scrolls behind it. The header uses an iOS-style haze blur tinted to the black background — so it only frosts when content is actually behind it — plus a gradient drop shadow below the tabs.HorizontalPager; on the Map tab the pager swipe is disabled so the map can be panned. All Activity keeps its existing swipe-to-change-tab gesture.Preview
activities.webm
home.webm
shop.webm
QA Notes
Manual Tests
regression:All Activity → search: list filtering still animates.Automated Checks
compileDevDebugKotlin,detekt,testDevDebugUnitTestlocally — all pass.