Material Design: Key Concepts, Material You and Material 3

What is Material Design?

Material Design (codename Project Quantum) is Google's design system, first announced at Google I/O 2014 and first implemented in Android 5.0 Lollipop. The goal of Material Design is to create a unified visual language for all Google products and Android apps, based on the physical properties of paper and ink — the “material.” Unlike Flat Design, Material Design adds physical depth, shadows, layers, and realistic animation.

Since 2014, Material Design has gone through three major versions: Material 1 (2014) — original guidelines with cards and Floating Action Button; Material 2 (2018) — simplified visual language, increased spacing, emphasis on typography; Material 3 / Material You (2021) — dynamic color scheme generated from device wallpaper, personalization. According to Google Play Console (2024), 78% of the top 1000 Google Play apps use Material Components for Android.

Material Design is not just a UI kit, but a complete design system: guidelines for accessibility (a11y), animation (Motion), responsive layouts, components (TopAppBar, BottomNavigation, Navigation Drawer), typography (Material Type Scale), and iconography (Material Symbols). At IT Sectr, we have been using Material Design as the core design system for Android projects since 2014, customizing it for each client's brand through Material Theme Builder.

Core Principles of Material Design: Materiality, Depth, Motion

Materiality (Material as Metaphor) — the key principle of Material Design, borrowing the physical properties of paper: material has a surface, thickness (1dp), casts a shadow (Elevation), and occupies space (Bounds). Interface elements — cards, buttons, panels — behave like physical objects: they lift on press (ripple effect), overlap each other (Z-axis), and animate on appearance (motion).

Depth is created through Elevation — a material property that determines its position on the Z-axis. The higher the Elevation (8dp, 16dp), the larger the shadow cast by the element. A card has Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Depth is used to convey hierarchy: modal windows and dialogs are always above content, Navigation Drawer is above the Action Bar. Depth replaces 3D perspective with a flat Z-layer, preserving rendering performance.

Motion — animation in Material Design is not decorative but functional. Animation should: 1) direct user attention (card expanding with details), 2) explain spatial relationships (AppBar transforms into TopAppBar on scroll), 3) ensure smooth transitions (shared element transition between screens). According to Google Material Guidelines (2024), animation should not exceed 300ms for micro-interactions and 500ms for screen transitions — longer animations are perceived as delays.

Material You (Material Design 3): Dynamic Colors and Personalization

Material You (Material Design 3) is the biggest update to the design system, introduced in 2021 alongside Android 12. The main innovation — dynamic colors (Monet): the system automatically extracts 5 key colors from the device wallpaper and generates a full color palette of 15 tones (primary, secondary, tertiary, error with their light/dark variants) with calculated WCAG AA contrast ratios.

Material You's color model is built on HCT (Hue, Chroma, Tone) — a color space developed by Google that combines human perception (Hue) with saturation (Chroma) and brightness (Tone). Unlike HSL/HSV, HCT guarantees that all generated tones have the required contrast on white and black backgrounds. Google Material Guidelines (2024) recommends using only tonal variants of the main palette for text, surface tones for backgrounds, and primary-container for accent surfaces.

The user can choose from 4 personalization schemes: TonalSpot (main color from wallpaper), Vibrant (most saturated color), Expressive (additional bright colors), Neutral (monochrome palette). Material Theme Builder (material-foundation.github.io) allows exporting a Material 3 theme to XML, Compose Theme, CSS, and even a Figma plugin.

Material Components for Android: Implementation via XML and Compose

Material Components for Android (MDC-Android) is the official Google library providing ready-made View components that follow Material Design guidelines. For XML layouts, the library is available via the com.google.android.material:material dependency, current version as of June 2026 — 1.12.0.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="2dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/outline">

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

The example shows a Material screen with MaterialToolbar (TopAppBar), MaterialCardView with custom padding and stroke, TextInputLayout with a dropdown list, and MaterialButton in Material3 style. The FAB is anchored to the Toolbar — a standard pattern for master-detail interfaces.

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("City") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Submit")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

The code demonstrates a Material You theme in Compose: dynamicLightColorScheme() automatically generates a color scheme based on the device wallpaper. Scaffold provides a standard structure with TopAppBar and FAB. OutlinedTextField and Button are Material 3 components whose colors come from the dynamic colorScheme. When the wallpaper changes, all app colors update automatically — personalization without code changes.

Material Design on iOS: Material Components for iOS

Material Components for iOS (MDC-iOS) is a library that provides native UIKit components implementing Material Design on iOS. Since iOS has its own design system (Human Interface Guidelines), Material components on iOS are used less frequently but are in demand for cross-platform apps that require a unified visual style across Android and iOS.

MDC-iOS includes AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs, and TextFields, styled for Material Design. The library is available via CocoaPods (pod 'MaterialComponents') and Swift Package Manager. Apple Human Interface Guidelines (2024) does not recommend fully replacing native UIKit components with Material equivalents but allows using Material components for custom interfaces provided native navigation (NavigationStack, UITabBarController) is preserved.

At IT Sectr, we use Material Components on iOS only for apps ported from Android (cross-platform projects with Flutter or Kotlin Multiplatform). For native iOS apps, we follow HIG and use UIKit/SwiftUI with custom branding. According to a Swift Community survey (2024), Material Components for iOS are used by 8% of developers, mainly in hybrid projects.

Material Design vs. Other Design Systems

Material Design is not the only design system on the market. Major competitors: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Each system is optimized for its own platform: Material Design for Android, HIG for iOS, Fluent for Windows. The choice of design system is determined by the target platform and ecosystem.

The main advantage of Material Design is its openness and cross-platform nature. Guidelines, components, and tools (Material Theme Builder) are available for free, making the system popular among startups and independent developers. Apple HIG is tightly tied to the Apple ecosystem but ensures the best alignment with platform expectations. For cross-platform projects, Material Design is the optimal choice thanks to Flutter and Jetpack Compose Multiplatform.