Material 3

Posts tagged with Material 3

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.