Material 3

Posts tagged with Material 3

Three stacked warm off-white list tiles connect through a glowing violet divider to a larger detail pane, with teal selection markers and small coral accents on deep navy.

Build a List-Detail Layout with Compose Adaptive APIs

Build an adaptive Compose list-detail layout with Navigation 3 scenes, Material 3 Adaptive pane metadata, back-stack-driven selection, placeholders, and pane-aware testing.

A warm off-white content plane extends between violet status and navigation boundaries, with a teal protected action floating safely above the lower edge on deep navy.

Edge-to-Edge UI in Jetpack Compose

Make Compose screens edge-to-edge safely with enableEdgeToEdge, an explicit inset owner, Scaffold content padding, keyboard handling, and Android 15 testing.

Five progressively wider warm off-white panels cross a glowing violet threshold with a teal indicator and a small coral marker on deep navy.

Window Size Classes in Jetpack Compose

Use Jetpack Compose window size classes to make high-level layout decisions from the current app window, including compact through extra-large widths, height constraints, current APIs, and breakpoint testing.

A stylized Compose screen with a teal vertical navigation rail and a violet bottom action bar surrounding a central content panel.

BottomAppBar and NavigationRail in Material 3

Choose BottomAppBar or NavigationRail in Material 3 Compose, keep screen actions separate from destination navigation, handle Scaffold padding, and plan adaptive navigation.

A stylized violet bottom sheet rising from a dark Compose screen with a teal feedback bar and a small coral action tile.

ModalBottomSheet, Snackbar, and User Feedback Patterns

Choose ModalBottomSheet for focused secondary tasks and Snackbar for brief Compose feedback, manage their state safely, and implement undo without blocking the user.

A warm off-white dialog panel floating above a violet dimmed surface with teal action tiles and a coral confirmation tile.

Dialogs in Jetpack Compose: AlertDialog and Custom Dialogs

Use AlertDialog for focused confirmations, build custom Dialog content only when needed, hoist visibility state, and make Compose dialogs accessible and dismissible.

A stylized set of floating type-scale bars and font-weight tiles arranged on a violet and teal editorial platform.

Custom Fonts and Typography in Jetpack Compose

Add bundled custom fonts to Jetpack Compose, map font files to FontWeight and FontStyle, build a Material 3 typography scale, and test readable text at user font scales.

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.

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 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.

A stylized phone form with three input rows, teal confirmation marks, and one coral error mark.

Form Validation in Jetpack Compose

Validate Jetpack Compose forms with immutable UI state, useful error timing, accessible messages, and tests for field and submit validation.

Two abstract Compose input modules connected to a central glowing state node, showing two different text input state flows.

TextFieldState vs Value-Based TextField in Compose

Compare TextFieldState and value-based TextField in Jetpack Compose, understand selection and transformations, and choose a migration path for your form architecture.

Three abstract selection controls on a dark panel: a square, a circle, and a pill-shaped toggle with teal highlights.

Checkbox, RadioButton, and Switch in Jetpack Compose

Choose and implement Compose checkboxes, radio buttons, and switches with lifted state, whole-row interaction, tri-state selection, and accessible semantics.

A dark abstract calendar panel beside a circular time dial, with violet, teal, and small coral accents.

DatePicker and TimePicker in Material 3 Compose

Implement Material 3 date and time pickers in Jetpack Compose with explicit confirmation, date ranges, input mode, time zones, and experimental API awareness.

A dark abstract interface card with a teal search field connected to a layered violet suggestion menu.

DropdownMenu and Autocomplete Patterns in Jetpack Compose

Build Material 3 dropdown menus and autocomplete fields in Jetpack Compose with correct anchors, lifted state, dismissal, accessibility semantics, and scalable search patterns.

A violet vertical list pulled downward along a teal arc toward a coral refresh indicator on a dark navy background.

Pull to Refresh in Jetpack Compose with Material 3

Add accessible pull-to-refresh to a Jetpack Compose LazyColumn with Material 3 PullToRefreshBox, state ownership, custom indicators, and retry-friendly behavior.

An abstract dark control panel with a teal slider thumb, two range handles, and a glowing circular progress ring.

Slider, RangeSlider, and Progress Indicators in Compose

Use Material 3 sliders and progress indicators in Jetpack Compose with explicit state, discrete steps, range filtering, accessible labels, and correct loading feedback.

A stylized phone with a purple top app bar, navigation and action icons, and a second app-bar layer moving over scrolling content.

TopAppBar in Jetpack Compose: Setup, Scroll Behavior, and Actions

Build a Material 3 TopAppBar in Jetpack Compose, choose the right app-bar size, connect scroll behavior to Scaffold, and keep actions accessible.

A stylized phone showing a filled input field, an outlined input field, a teal cursor accent, and a coral validation accent.

TextField in Jetpack Compose: State, Styling, and Practical Examples

Build useful Material 3 TextField and OutlinedTextField components in Jetpack Compose with hoisted state, validation, keyboard actions, styling, and tests.

Jetpack Compose Buttons: Types, States, and Best Practices

Choose the right Material 3 button in Jetpack Compose, model enabled and loading states, and keep actions accessible, testable, and theme-aware.

Light and dark Android app interfaces with colorful wallpaper-inspired palettes, illustrating dynamic color in Jetpack Compose.

Dynamic Color and Dark Theme in Jetpack Compose

Use dynamic color and dark theme safely in Jetpack Compose, with Android 12 fallbacks, product decision criteria, previews, and testing guidance.

A centered Compose-style phone interface showing grouped cards, surfaces, and list rows in a dark navy and violet 3D scene.

Cards, Surface, and ListItem in Jetpack Compose

Choose between Material 3 Card, Surface, and ListItem in Jetpack Compose with practical patterns for feeds, settings, elevation, and accessibility.

A dark technical design-system illustration with color swatches, type-scale lines, shape tokens, and a central mobile interface.

MaterialTheme in Jetpack Compose: Colors, Typography, and Shapes

Build a consistent Material 3 Compose theme with color schemes, typography, shapes, dark mode, and dynamic color fallbacks.

A warm off-white illuminated surface and a deep indigo surface balance around a glowing teal contrast bridge with a small coral accessibility accent.

Color Contrast and Dark Theme Accessibility in Material 3

Build accessible Material 3 light and dark themes in Compose with semantic color pairs, contrast-aware custom surfaces, non-color status cues, and practical testing.