With Compose you can build excellent apps that work across devices. Compose has matured a lot since it was first announced (at Google I/O 2019!) and we're now seeing 60% of the top 1,000 apps in the Play Store such as MAX and Google Drive use and love it.
Autofill for TextFields
- Let users auto-fill saved info instantly, integrating seamlessly with Android's autofill framework for passwords, addresses, and more.
- Reduces typing errors and speeds up form completion by leveraging device-stored data without custom implementations.
TextField(
value = text,
onValueChange = { text = it },
modifier = Modifier.autofill()
)- Great for email, address, checkout forms; supports multiple autofill types like email, phone, and credit card via simple modifier application.
- Ensures compliance with accessibility standards by prompting autofill hints, improving user trust and conversion rates in e-commerce apps.
Auto-Sizing Text
- Text scales to fit its container smoothly, automatically adjusting font size based on content length and available space without overflow.
- Handles multiline text and dynamic content changes, recalculating sizes during recomposition for fluid responsiveness.
Box(Modifier.size(120.dp)) {
AutoSizeText("Compose Rocks!")
}- Perfect for badges, cards, and responsive headers; eliminates manual font size calculations across different screen densities.
- Improves readability on varied devices, such as wearables or foldables, by maintaining optimal text legibility without clipping.
Visibility Tracking
- Detect when items enter/exit the viewport, providing callbacks for percentage-based visibility thresholds like 50% or 100% on-screen.
- Integrates with LazyColumn or custom layouts, triggering actions only when elements are truly visible to optimize resource use.
Box(
Modifier.onVisibilityChanged { visible ->
if (visible) startVideo() else pauseVideo()
}
)- Use for video autoplay or impression logging; tracks user engagement metrics accurately for analytics and ad revenue optimization.
- Reduces battery drain by pausing off-screen media, enhancing app performance on low-power devices like tablets.
Animate Bounds in Lookahead
- Animate size and position together, using lookahead scope to pre-measure layouts before animation starts for precise, stutter-free transitions.
- Supports complex choreographies like grid-to-list morphing, coordinating multiple elements without custom interpolators.
LookaheadScope {
Box(
Modifier
.animateBounds(this@LookaheadScope)
.size(if (inRow) 100.dp else 150.dp)
)
}- Slick, layout-aware motion with minimal code; leverages Compose's animation system for declarative, testable animations.
- Ideal for shopping carts or dashboards where UI states change frequently, providing polished feedback that boosts user satisfaction.
A11y Checks in Tests
- Catch accessibility issues automatically, using semantics nodes to verify labels, roles, and traversal order in UI tests.
- Extends to color contrast, touch target sizes, and screen reader compatibility, flagging violations early in the CI pipeline.
composeTestRule
.onNodeWithContentDescription("Play")
.assertExists()- Ship more inclusive UIs with confidence; integrates with Espresso for hybrid testing in mixed View/Compose apps.
- Supports dynamic content testing, ensuring generated lists or forms remain accessible under varying data conditions.
Pausable Composition (Alpha)
- Split work over frames to kill jank, allowing heavy computations like image processing to yield control back to the UI thread periodically.
- Configurable pause thresholds based on frame budget, preventing dropped frames during initial composition or state updates.
// Enabled by upgrading to alpha BOM; works with improved prefetch.- Combine with Lazy prefetch for ultra-smooth lists; processes off-screen items incrementally to maintain 60fps scrolling.
- Beneficial for data-heavy apps like social feeds, where complex item composables would otherwise cause noticeable lag.
Background Text Prefetch (Alpha)
- Pre-warm text layout off the main thread, using a dedicated executor to measure and cache glyph runs before rendering.
- Handles varying font styles and languages, prioritizing high-priority text like headlines for immediate availability.
// Text layout cached in background → faster first draw.- Faster typing and list binding with rich text; reduces input lag in editable fields with formatted content like Markdown.
- Scales to large datasets, such as news apps, by batching prefetch requests to avoid overwhelming background resources.
Navigation 3 (New)
- Reimagined navigation for Compose, featuring type-safe routes, nested graphs, and seamless integration with ViewModels.
- Supports advanced features like conditional navigation and deep linking, with built-in state restoration for process death.
// Flexible back stack control, predictive back, shared elements.- Built for complex flows and full custom control; enables hero animations across screens with minimal boilerplate.
- Enhances multi-module apps by allowing modular nav graphs, improving build times and team collaboration.
Media3 + Compose
- Idiomatic player UI with composables, providing ExoPlayer wrappers as stateful composables for lifecycle-aware playback.
- Customizable via slots for overlays, progress bars, and subtitles, with gesture support for seeking and volume control.
@Composable
fun VideoPlayer(player: Player?) {
PlayerSurface(player)
// Your custom controls here
}- Compose-native controls, no heavy Views; reduces bundle size by avoiding XML layouts and enabling tree shaking.
- Suitable for streaming apps, with DRM support and adaptive bitrate switching for varying network conditions.
Diagnostic Stack Traces (Alpha)
- Get clearer crash info from Compose, capturing recomposition stacks and modifier chains for root-cause analysis.
- Filters noise from stable reads, highlighting unstable sources like mutable state misuse in production logs.
class App : Application() {
override fun onCreate() {
Composer.setDiagnosticStackTraceEnabled(BuildConfig.DEBUG)
}
}- Enable in debug only; has performance cost but accelerates debugging of rare crashes in beta testing.
- Integrates with Crashlytics for symbolicated stacks, aiding remote issue triage without full symbol uploads.
New Lint + Annotations
- Catch frequent-change reads and missing remember, with IDE warnings for parameters that trigger unnecessary recompositions.
- Annotations enforce best practices like stable-by-default, scanning for derived state that could leak into UI trees.
@FrequentlyChangingValue
fun currentScroll(): Float = ...
@RememberInComposition
fun heavy() = ...- Helps prevent accidental jank early; runs during compilation to catch issues before runtime testing.
- Customizable rulesets allow team-specific checks, such as enforcing remember for database queries.
New Shadow Modifiers
- Drop-shadow and inner-shadow effects, with customizable blur radius, offset, and color for layered depth.
- Supports shape clipping and alpha blending, rendering efficiently via hardware acceleration without draw calls.
Box(
Modifier
.size(120.dp)
.dropShadow(
RoundedCornerShape(16.dp),
dropShadow = DropShadow(12.dp)
)
.background(Color.White, RoundedCornerShape(16.dp))
)- More visual control than elevation shadows; allows multiple shadows per element for neumorphic designs.
- Performance-optimized for lists, caching shadow bitmaps to avoid per-frame recomputation.
2D Scroll APIs
- Pan/scroll in two directions, with fling physics, overscroll indicators, and nested scrolling dispatch.
- Configurable axis locking and zoom gestures, integrating with PointerInput for custom interactions.
// Great for canvases, sheets, maps with fling + nested scroll.- Build spreadsheets and design surfaces easily; handles large datasets via viewport clipping and recycling.
- Accessibility-friendly with TalkBack support for row/column announcements during panning.
Adaptive Layouts 1.1/1.2
- Predictive back + flexible pane expansion, detecting device posture for real-time layout adjustments.
- Window size classes guide split views, with breakpoints for compact, medium, and expanded modes.
// Material3 Adaptive: two-pane layouts across devices.- Better foldable/tablet/desktop experiences; persists state across folds without full recomposition.
- Testing utilities simulate postures, ensuring consistent behavior from phone to large screen.
Material Expressive (Alpha)
- Rich components, styles, and motion, including micro-animations for haptics and state transitions.
- Themeable tokens for colors, shapes, and typography, with variants for light/dark modes.
// Use latest Material3 alpha for expressive components.- Make UIs more playful and engaging; supports brand customization without forking the library.
- Performance-tuned for 120Hz displays, syncing animations with system refresh rates.
Resizable Previews
- See responsiveness instantly in Studio, with live resizing and orientation flips during preview rendering.
- Breakpoint annotations highlight layout shifts, syncing with theme previews for color testing.
// Drag to resize preview → check breakpoints fast.- Fewer emulator runs, faster iteration; exports resized snapshots for design handoff.
- Integrates with version control diffs, visualizing UI changes side-by-side.
Preview Navigation Improvements
- Click components/names to jump around, with outline views and search for large composables.
- Hot-reload support for previews, updating only changed parameters without full rebuilds.
// Faster preview exploration in large screens.- Speeds up design reviews and refactors; bookmarks persistent states for repeated testing.
- Collaboration features share preview links, enabling remote feedback without code access.
Lazy Prefetch Upgrades
- Smarter cache window + prefetch strategies, predicting scroll direction with velocity-based heuristics.
- Adaptive prefetch depth based on device memory, unloading distant items to free RAM.
// Smoother scroll with visibility APIs for impressions.- Pair with pausable composition for near-zero jank; logs prefetch hits for performance tuning.
- Enhances infinite lists in e-commerce, loading product details just-in-time without placeholders.
Tags:
Jetpack Compose
