Blog - Page 3

A stylized set of layered violet, teal, coral, and off-white color tiles connected to matching foreground dots.

ColorScheme in Material 3: How to Use Semantic Colors

Use Material 3 ColorScheme roles in Jetpack Compose, pair containers with matching on-colors, choose surfaces by emphasis, and keep custom UI readable in every theme.

A teal stream flows through a violet lifecycle gate into a warm off-white Compose state panel, with a small coral event marker.

collectAsStateWithLifecycle with StateFlow

Collect StateFlow safely in Jetpack Compose with collectAsStateWithLifecycle, lifecycle-aware UI state, and a stateless screen boundary.

Three violet and teal navigation paths branch from a bottom bar and retain their own stacks of rounded destination cards.

Bottom Navigation with Multiple Back Stacks in Jetpack Compose

Preserve each bottom-navigation tab's place with Navigation Compose by saving and restoring back stacks when users switch top-level destinations.

A stylized content card changing from a narrow stacked layout to a wide side-by-side layout within cyan width guides.

BoxWithConstraints: Build Responsive Compose Layouts

Use BoxWithConstraints to adapt a Compose component to the space its parent offers, choose layout breakpoints deliberately, and know when app-level adaptive APIs are a better fit.

A stylized phone UI connected to separate translucent layers representing Compose presentation, state, and data responsibilities.

How to Structure a Jetpack Compose App: UI, State, and Data Layers

Learn a practical way to structure a Jetpack Compose app with UI, state-holder, data, and optional domain layers that remain easy to test and change.

A stylized group of overlapping circular UI tiles arranged along a cyan measurement guide.

How to Create a Custom Layout in Jetpack Compose

Create a custom Jetpack Compose layout with Layout, measure children once, respect parent constraints, and choose LayoutModifier when only one child needs custom placement.

A centered Compose-style UI card surrounded by nested measurement boundaries and directional handles.

Constraints in Jetpack Compose Explained

Understand how Jetpack Compose constraints control measurement, why sizes change inside parents, and how to debug fill, size, and unbounded-layout surprises.

Two stylized content panels aligned along a shared horizontal guide beside a vertical divider.

Baseline Alignment and Intrinsic Measurements in Compose

Learn how to align text by its baseline in Jetpack Compose and use IntrinsicSize when a layout needs content measurements before placing its children.

A teal bottom navigation bar transforms into a violet side rail around a central warm off-white content panel.

Adaptive NavigationSuiteScaffold for Phone and Tablet

Use NavigationSuiteScaffold in Jetpack Compose to present the same top-level destinations as a bottom bar on compact windows and a navigation rail on wider windows.