Design languages

Android's design language is not decoration. Each era solved a concrete problem: inconsistency across OEMs, a lack of visual hierarchy, a lack of personalisation, and now a lack of adaptability across phones, foldables, tablets and desktops.

TL;DR#

• Pre-Holo (2008–2011): default widgets, dense lists, no shared language across apps.
• Holo (2011–2014): one dark, blue-accented system; the first time apps looked related.
• Material (2014–2021): surfaces, elevation, motion and a design specification, not just a theme.
• Material You (2021–2025): dynamic colour from the wallpaper, large radii, personalisation.
• Material 3 (glossary definition) Expressive (2025–): bolder shapes, springier motion, higher contrast, adaptive by default.

Mental model#

Think of a house style guide for a large organisation.

Early Android had none: every department chose its own letterhead. Holo was the first guide — one font, one accent, one dark surface. Material added a physical metaphor: paper, ink, elevation, and rules for how things move. Material You let the guide adapt its colours to the reader. Expressive made the guide louder and more confident.

Where the analogy breaks#

A style guide is advisory. Android's design language is enforced through the toolkit: the widgets you get from TextInputLayout or MaterialTheme have the current defaults baked in. That is why a design era is visible in an app nobody redesigned — the components changed under it.

The big picture#

Look at the density: pre-Holo fits six rows, Expressive fits three. That is not a regression — touch targets grew as phones moved from stylus to finger, and accessibility guidance raised the minimum size.

Deep dive#

Pre-Holo: no system at all#

Android 1.0 through 2.3 shipped a set of default widgets and no shared design vocabulary. Apps used the platform defaults or replaced them entirely, and the result was that two apps on the same phone looked like they came from different companies — because they did.

The visual signature: dense lists with hairline dividers, a black title bar, no accent colour, and gradients used decoratively.

Holo: one system, and a backlash#

Android 3.0 (Honeycomb, tablets) introduced Holo, and 4.0 brought it to phones. It was the first deliberate design system: a dark Holo theme with a single blue accent, a fixed action bar, and a consistent set of widget appearances.¹

Holo solved consistency. It created two problems. First, it was dark by default, which made outdoor readability poor. Second, it was rigid: because it shipped in the platform, an app could only look "Holo" at the version the device ran. Apps that wanted a consistent look across versions had to reimplement the widgets — which is where the Support Library's design libraries came from.

Material: a specification, in a library#

Material Design arrived in Android 5.0 with three ideas that are still visible:

1. Surfaces with elevation. A card is a sheet of paper with a shadow; the shadow encodes hierarchy.
2. Motion with meaning. Transitions explain where things came from, rather than decorating.
3. A design document, not just a theme. Material was published as a specification anyone could implement.

The architectural consequence was more important than the visuals: Material shipped as com.google.android.material:material, a library, so an app could look the same on Android 5 and Android 14. That decision is the reason the design language stopped being tied to the OS version.

Material also introduced the floating action button, the navigation drawer pattern, and the TextInputLayout with a floating label.

Material You: colour from the user#

Android 12 introduced dynamic colour: the system derives a palette from the user's wallpaper and exposes it as a set of tonal values. Apps that opt in inherit it.

@Composable
fun NotesTheme(
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit,
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (isSystemInDarkTheme()) dynamicDarkColorScheme(context)
            else dynamicLightColorScheme(context)
        }
        isSystemInDarkTheme() -> darkColorScheme()
        else -> lightColorScheme()
    }
 
    MaterialTheme(
        colorScheme = colorScheme,
        typography = NotesTypography,
        content = content,
    )
}

The visual signature of Material You: large corner radii, generous padding, pill-shaped controls, tonal surfaces instead of white cards, and a type scale with a strong display size.²

Material 3 Expressive: louder, springier, more adaptive#

2025's Material 3 Expressive is the current era, and it has two distinct halves.

The expressive half is visual: bolder shapes, pill-shaped segmented controls, springy motion, higher contrast ratios, and a type scale with more range. It is a reaction to the flatness that Material You's tonal surfaces produced.

The adaptive half is structural, and it matters more. Android 16 brought desktop windowing to tablets and continued the edge-to-edge push; Android 17 goes further, making apps adaptive-first: on large screens, orientation and resizability restrictions are ignored.³

// Window size classes, not device categories.
@Composable
fun NotesApp(windowSizeClass: WindowSizeClass) {
    when (windowSizeClass.widthSizeClass) {
        WindowWidthSizeClass.Compact -> NotesSinglePane()
        WindowWidthSizeClass.Medium -> NotesTwoPane()
        else -> NotesThreePane()
    }
}

The reason is simple: a phone, a foldable unfolded, a tablet in split screen and a desktop window are all "large screens" at different times. Designing for a device category cannot express that; designing for a size class can.

Type, shape and motion as APIs#

Each era is a set of decisions that turn into parameters:

Those numbers are not aesthetic trivia. A component library exposes them as tokens — shape, typography, motionScheme — and an app that hard-codes a radius is an app that will look wrong after the next design refresh.

// Read the shape from the theme, not from a literal.
Surface(
    shape = MaterialTheme.shapes.large,
    tonalElevation = 1.dp,
) { /* … */ }

Dark theme is a design constraint, not a toggle#

A palette that works in light mode often fails in dark mode: pure white text on pure black is harsh, and shadows disappear. Material's tonal palettes exist to make both modes derive from the same source colour, so contrast is preserved rather than hand-tuned.

The design language is in the code#

Each era changed APIs, not just pixels:

That is why a "design" page belongs in an internals site: the design language is delivered as libraries, theme attributes and composables, and it changes what your code must do.

Adaptive icons and the launcher#

An adaptive icon separates the foreground from the background, and the launcher applies a mask. That is how one icon asset works on a round-icon launcher, a squircle launcher and a themed-icon launcher.

<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>

The monochrome layer is what enables themed icons in Material You: the launcher recolours it to match the system palette.⁵

Splash screens became an API#

Before Android 12, every app implemented its own launch screen, usually badly — a windowBackground that flashed, or an activity that delayed the real one. Android 12 introduced a system splash screen API that shows the app icon and then hands off to the app.²

That is a design decision expressed as a platform API: the system now owns the first impression, because a consistent launch experience across apps was worth more than per-app control.

Predictive back changes the visual vocabulary#

Predictive back shows the destination during the gesture — a scaled-down preview of the previous screen. It is a design change (motion communicates the destination) enabled by a platform change (the system can query the back stack ahead of time).⁶

It also constrains design: an app that cannot describe its back destination in advance cannot participate in the animation.

How it evolved#

Five eras in eighteen years, roughly one every four. The pattern: each era is a correction of the previous one's excess — Holo's darkness, Material's flatness, You's softness, and now Expressive's boldness, with adaptiveness as the constant direction.

Under the hood#

• ‹›themes.xml↗the platform's default theme attributes
• ‹›WindowInsets.java↗the inset model edge-to-edge design depends on
• ‹›OnBackInvokedDispatcher.java↗the predictive-back contract
• ‹›WindowManager.java↗window size classes and the adaptive surface

Curiosity corner#

• Holo's blue was chosen to be visible on OLED and LCD. It was a practical decision about display technology as much as an aesthetic one.
• The Material Design specification is a public document that other platforms have borrowed from, which is why Material-influenced UI shows up in web and desktop apps.
• Dynamic colour samples the wallpaper, not the app icon. The palette comes from the system's wallpaper analysis, which is why two apps with completely different brands share a tonal scheme.

Try it#

$ 
adb shell dumpsys activity top | grep -i theme

$ 
adb shell dumpsys display | grep -E "mBaseDisplayInfo|density"

Check yourself#

Sources#