refactor(polish): match mockup spec for the bottom navigation bar#20
Merged
Conversation
Replaces the Material 3 NavigationBar (which carried its own surface,
indicator pill and icon tinting defaults) with a custom Row that
mirrors the mockup bottomNav exactly (mockup/js/components.js):
nav: h-16, border-t border-line, bg-[#0B0B12], grid 5 cols
button: stacked icon + 9px tracked label, violet when active,
muted otherwise
icon: 18dp, stroked (no fill), stroke-width 2
Each tab uses a custom vector drawable ported verbatim from the
mockup SVG path data: ic_tab_lobby (house), ic_tab_wallet (rect +
clasp), ic_tab_history (clock), ic_tab_news (document with text
lines), ic_tab_profile (head + shoulders). Drawables live in
res/drawable so the Icon composable can tint them by route activity
without per-tab Compose code.
Cleanups noted in self-review:
* Top border was drawn at y=0, which (because drawLine centers strokes
on the given coordinate) left half of the 1dp line clipped. Offset
by strokePx/2 so the entire border is visible.
* The icon contentDescription was set to the tab label, duplicating
the visible label below for TalkBack users. Null it out so the
tab is announced once via the Text content.
No behavior change; the same callback fires on tab clicks and the
visibility rule (PrimaryTab.routePaths) is untouched.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the Material 3
NavigationBar(own surface, indicator pill, icon tinting defaults) with a customRowthat mirrors the mockupbottomNavexactly (mockup/js/components.js):nav: h-16, border-t border-line, bg-[#0B0B12], grid 5 colsbutton: stacked icon + 9px tracked label, violet when active, muted otherwiseicon: 18dp, stroked (no fill), stroke-width 2Each tab uses a custom vector drawable ported verbatim from the mockup SVG path data:
ic_tab_lobby- houseic_tab_wallet- rect + claspic_tab_history- clockic_tab_news- document with text linesic_tab_profile- head + shouldersDrawables live in
res/drawable/and are tinted byIconso the active/inactive color swap stays in Compose.Self-review tweaks before pushing
y=0;drawLinecenters strokes on the given coordinate so half of the 1dp line was clipped above the canvas. Offset bystrokePx/2to keep the full border visible.contentDescriptionwastab.label; the visible label below already announces the tab, so TalkBack was reading it twice. Set the icon tocontentDescription = null.No behavior change; the same callback fires on tab clicks and the visibility rule (
PrimaryTab.routePaths) is untouched.Test plan
./gradlew :app:assembleDebuggreen./gradlew :app:testDebugUnitTestgreen (34/34, no regressions)./gradlew ktlintCheck detektgreen