Ahead of the possible Android 16 launch on May 13, Google has accidentally published a blog titled "Android Redesign: Material 3 Expressive," which highlights the UI redesign of the upcoming Android iteration. Google refers to this update as its "most researched," featuring an improved interface that is fun and easy to use. Learn more about Android 16's latest features and developer tools in QPR2 Beta 2.
According to a report by 9to5Google, the blog states that Material 3 Expressive is the result of 46 rounds of design and research involving over 18,000 participants. It incorporates various designs, colours, sizes, and shapes to give Android 16 a completely new look and is described as an emotion-driven UX.
Image Credit: Google
The interface is said to be designed to offer a comprehensive experience for users of all ages and includes new widgets and more visual cues. The update is also expected to offer enhanced customisation capabilities and greater control over theming, providing a more streamlined experience across different parts of the operating system. For developers using Jetpack Compose, these new Material 3 Expressive components will integrate seamlessly with Compose's declarative UI paradigm.
Android Authority recently discovered hidden UI changes in the fourth beta of Android 16, and this accidentally leaked blog further confirms that the next iteration of Android will feature significant UI changes along with new functionalities. Additionally, Android 16 is expected to introduce several new features, including a desktop mode, similar to Samsung DeX, which will allow users to experience a PC-like interface on an external monitor or TV.
Image Credit: Google
However, many of these features may be limited to Google Pixel smartphones and other devices running stock Android. Most manufacturers are likely to ship Android 16 with their own custom skins, such as OxygenOS, HyperOS, Funtouch OS, or One UI. This new experience will first be available on the Pixel 6, Pixel 7, Pixel 8, and Pixel 9 series of smartphones.
With just over 10 days remaining until The Android Show: I/O Edition, we can expect to learn more about Android 16 and its full set of features.
What Material 3 Expressive Means for Developers
Material 3 Expressive isn't just a visual refresh—it represents a fundamental shift in how we approach Android UI design. As developers, we need to understand the key changes and how to implement them in our apps.
Key Design Principles
Material 3 Expressive focuses on three core principles:
- Emotional Connection: UI elements that feel more human and relatable
- Expressive Typography: Larger, bolder text that commands attention
- Vibrant Colors: Enhanced color palettes with better contrast and accessibility
New Component Behaviors
The update introduces several behavioral changes to existing Material components:
Buttons: More pronounced elevation changes on interaction, with smoother animations and larger touch targets.
Cards: Enhanced shadow effects and more expressive corner radius variations that adapt to content type.
App Bars: Dynamic sizing that responds to scroll position with more fluid motion curves.
Implementing Material 3 Expressive in Jetpack Compose
If you're building with Jetpack Compose, integrating Material 3 Expressive components is straightforward. Here's how to get started:
1. Update Your Dependencies
First, ensure you're using the latest Material 3 library:
dependencies {
implementation("androidx.compose.material3:material3:1.3.0")
implementation("androidx.compose.material3:material3-window-size-class:1.3.0")
}
2. Apply the New Theme
Create a custom theme that leverages Material 3 Expressive color schemes:
@Composable
fun Material3ExpressiveTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context)
else dynamicLightColorScheme(context)
}
darkTheme -> darkColorScheme(
primary = Color(0xFF6750A4),
onPrimary = Color(0xFFFFFFFF),
primaryContainer = Color(0xFFEADDFF),
onPrimaryContainer = Color(0xFF21005D)
)
else -> lightColorScheme(
primary = Color(0xFF6750A4),
onPrimary = Color(0xFFFFFFFF),
primaryContainer = Color(0xFFEADDFF),
onPrimaryContainer = Color(0xFF21005D)
)
}
MaterialTheme(
colorScheme = colorScheme,
typography = ExpressiveTypography,
content = content
)
}
3. Enhanced Typography Scale
Material 3 Expressive introduces a more expressive typography system:
val ExpressiveTypography = Typography(
displayLarge = TextStyle(
fontSize = 57.sp,
lineHeight = 64.sp,
fontWeight = FontWeight.Bold,
letterSpacing = (-0.25).sp
),
headlineLarge = TextStyle(
fontSize = 32.sp,
lineHeight = 40.sp,
fontWeight = FontWeight.Bold
),
titleLarge = TextStyle(
fontSize = 22.sp,
lineHeight = 28.sp,
fontWeight = FontWeight.SemiBold
),
bodyLarge = TextStyle(
fontSize = 16.sp,
lineHeight = 24.sp,
fontWeight = FontWeight.Normal
)
)
4. Using New Component Variants
Here's an example of creating expressive buttons with the new design language:
@Composable
fun ExpressiveButtons() {
Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
// Primary expressive button
Button(
onClick = { /* Handle click */ },
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(16.dp),
elevation = ButtonDefaults.buttonElevation(
defaultElevation = 4.dp,
pressedElevation = 8.dp
)
) {
Icon(Icons.Filled.Favorite, contentDescription = null)
Spacer(Modifier.width(8.dp))
Text("Expressive Action", fontSize = 16.sp)
}
// Tonal expressive button
FilledTonalButton(
onClick = { /* Handle click */ },
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(16.dp)
) {
Text("Secondary Action", fontSize = 16.sp)
}
}
}
Migration Guide: From Material 3 to Material 3 Expressive
Visual Changes You'll Notice
When migrating, pay attention to these key visual updates:
1. Increased Corner Radius: Default button and card corners are more rounded (12dp → 16dp)
2. Enhanced Elevation: Components have more pronounced shadows for better depth perception
3. Bolder Typography: Text styles are larger and bolder for improved readability
4. Vibrant Colors: Expanded color palette with better support for dynamic theming
Breaking Changes
Most Material 3 components remain backward compatible, but watch for:
- Default spacing values have increased from 8dp to 12dp in some components
- Minimum touch targets are now 48dp across all interactive elements
- Animation durations are slightly longer for smoother transitions
Custom Widget Examples
Here's how to create custom widgets that embrace the expressive design language:
@Composable
fun ExpressiveCard(
title: String,
description: String,
icon: ImageVector,
onClick: () -> Unit
) {
Card(
onClick = onClick,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
shape = RoundedCornerShape(20.dp),
elevation = CardDefaults.cardElevation(
defaultElevation = 2.dp,
pressedElevation = 8.dp
),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surfaceVariant
)
) {
Row(
modifier = Modifier
.padding(20.dp)
.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Column(modifier = Modifier.weight(1f)) {
Text(
text = title,
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = description,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
}
Icon(
imageVector = icon,
contentDescription = null,
modifier = Modifier.size(48.dp),
tint = MaterialTheme.colorScheme.primary
)
}
}
}
Best Practices for Adopting Material 3 Expressive
1. Start with Dynamic Color
Enable dynamic color theming to let users personalize their experience:
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
2. Test Accessibility
The new design language emphasizes accessibility:
- Ensure all interactive elements meet the 48dp minimum touch target
- Verify color contrast ratios exceed WCAG AA standards
- Test with TalkBack enabled
3. Gradual Migration
You don't need to migrate everything at once:
- Start with new screens using Material 3 Expressive
- Gradually update existing screens during regular maintenance
- Use A/B testing to validate user reception
4. Leverage Material Theme Builder
Use Google's Material Theme Builder tool to generate custom color schemes that align with your brand while following Material 3 Expressive guidelines.
What's Next for Material Design
Material 3 Expressive represents Google's commitment to evolving design language. As developers, staying updated with these changes helps us build apps that feel modern and cohesive with the Android ecosystem.
For more insights on modern Android UI development, check out our guides on Jetpack Compose and ConstraintLayout.
Transform your Android apps with Material 3 Expressive—where emotion meets function in Google's most researched design update yet.
