Material Design: conceitos-chave, Material You e Material 3

O que é Material Design?

Material Design (codinome Project Quantum) é o sistema de design do Google, anunciado pela primeira vez no Google I/O 2014 e implementado inicialmente no Android 5.0 Lollipop. O objetivo do Material Design é criar uma linguagem visual unificada para todos os produtos Google e aplicativos Android, baseada nas propriedades físicas do papel e da tinta — o “material.” Ao contrário do Flat Design, o Material Design adiciona profundidade física, sombras, camadas e animação realista.

Desde 2014, o Material Design passou por três grandes versões: Material 1 (2014) — diretrizes originais com cartões e Floating Action Button; Material 2 (2018) — linguagem visual simplificada, espaçamento aumentado, ênfase em tipografia; Material 3 / Material You (2021) — esquema de cores dinâmico gerado a partir do papel de parede do dispositivo, personalização. De acordo com o Google Play Console (2024), 78% dos 1000 principais aplicativos do Google Play usam Material Components para Android.

Material Design não é apenas um kit de UI, mas um sistema de design completo: diretrizes de acessibilidade (a11y), animação (Motion), layouts responsivos, componentes (TopAppBar, BottomNavigation, Navigation Drawer), tipografia (Material Type Scale) e iconografia (Material Symbols). Na IT Sectr, usamos Material Design como sistema de design base para projetos Android desde 2014, personalizando-o para a marca de cada cliente através do Material Theme Builder.

Princípios fundamentais do Material Design: materialidade, profundidade, movimento

Materialidade (Material como Metáfora) — o princípio-chave do Material Design, que empresta as propriedades físicas do papel: o material tem uma superfície, espessura (1dp), projeta uma sombra (Elevation) e ocupa espaço (Bounds). Os elementos da interface — cartões, botões, painéis — comportam-se como objetos físicos: eles se elevam ao pressionar (efeito ripple), sobrepõem-se uns aos outros (eixo Z) e animam-se ao aparecer (motion).

Profundidade (Depth) é criada através de Elevation — uma propriedade do material que determina sua posição no eixo Z. Quanto maior a Elevation (8dp, 16dp), maior a sombra projetada pelo elemento. Um cartão tem Elevation de 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. A profundidade é usada para transmitir hierarquia: janelas modais e diálogos estão sempre acima do conteúdo, Navigation Drawer está acima da Action Bar. A profundidade substitui a perspectiva 3D por uma camada Z plana, preservando o desempenho de renderização.

Movimento (Motion) — a animação no Material Design não é decorativa, mas funcional. A animação deve: 1) direcionar a atenção do usuário (cartão expandindo com detalhes), 2) explicar relações espaciais (AppBar se transforma em TopAppBar ao rolar), 3) garantir transições suaves (transição de elemento compartilhado entre telas). De acordo com as Google Material Guidelines (2024), a animação não deve exceder 300ms para microinterações e 500ms para transições entre telas — animações mais longas são percebidas como atrasos.

Material You (Material Design 3): cores dinâmicas e personalização

Material You (Material Design 3) é a maior atualização do sistema de design, apresentada em 2021 juntamente com o Android 12. A principal inovação — cores dinâmicas (Monet): o sistema extrai automaticamente 5 cores-chave do papel de parede do dispositivo e gera uma paleta completa de 15 tons (primary, secondary, tertiary, error com suas variantes light/dark) com taxas de contraste WCAG AA calculadas.

O modelo de cores do Material You é baseado em HCT (Hue, Chroma, Tone) — um espaço de cor desenvolvido pelo Google que combina a percepção humana (Hue) com saturação (Chroma) e brilho (Tone). Ao contrário de HSL/HSV, o HCT garante que todos os tons gerados tenham o contraste necessário em fundos brancos e pretos. As Google Material Guidelines (2024) recomendam usar apenas variantes tonais da paleta principal para texto, tons surface para fundos e primary-container para superfícies de destaque.

O usuário pode escolher entre 4 esquemas de personalização: TonalSpot (cor principal do papel de parede), Vibrant (cor mais saturada), Expressive (cores brilhantes adicionais), Neutral (gama monocromática). O Material Theme Builder (material-foundation.github.io) permite exportar um tema Material 3 para XML, Compose Theme, CSS e até mesmo um plugin Figma.

Material Components para Android: implementação com XML e Compose

Material Components para Android (MDC-Android) é a biblioteca oficial do Google que fornece componentes View prontos que seguem as diretrizes do Material Design. Para layouts XML, a biblioteca está disponível através da dependência com.google.android.material:material, versão atual em junho de 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>

O exemplo mostra uma tela Material com MaterialToolbar (TopAppBar), MaterialCardView com preenchimento e borda personalizados, TextInputLayout com lista suspensa e MaterialButton no estilo Material3. O FAB está ancorado à Toolbar — um padrão padrão para interfaces mestre-detalhe.

@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("Cidade") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Enviar")
            }
        }
    }
}

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

O código demonstra um tema Material You no Compose: dynamicLightColorScheme() gera automaticamente um esquema de cores baseado no papel de parede do dispositivo. Scaffold fornece uma estrutura padrão com TopAppBar e FAB. OutlinedTextField e Button são componentes Material 3 cujas cores vêm do colorScheme dinâmico. Quando o papel de parede muda, todas as cores do aplicativo são atualizadas automaticamente — personalização sem alteração de código.

Material Design no iOS: Material Components para iOS

Material Components para iOS (MDC-iOS) é uma biblioteca que fornece componentes UIKit nativos que implementam Material Design no iOS. Como o iOS tem seu próprio sistema de design (Human Interface Guidelines), os componentes Material no iOS são usados com menos frequência, mas são requisitados em aplicativos multiplataforma que exigem um estilo visual unificado entre Android e iOS.

MDC-iOS inclui AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs e TextFields, estilizados para Material Design. A biblioteca está disponível através do CocoaPods (pod 'MaterialComponents') e Swift Package Manager. As Apple Human Interface Guidelines (2024) não recomendam substituir completamente os componentes UIKit nativos por equivalentes Material, mas permitem o uso de componentes Material para interfaces personalizadas, desde que a navegação nativa (NavigationStack, UITabBarController) seja preservada.

Na IT Sectr, usamos Material Components no iOS apenas para aplicativos portados do Android (projetos multiplataforma com Flutter ou Kotlin Multiplatform). Para aplicativos iOS nativos, seguimos a HIG e usamos UIKit/SwiftUI com personalização de marca. De acordo com uma pesquisa da Swift Community (2024), Material Components para iOS são usados por 8% dos desenvolvedores, principalmente em projetos híbridos.

Material Design versus outros sistemas de design

Material Design não é o único sistema de design no mercado. Principais concorrentes: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Cada sistema é otimizado para sua plataforma: Material Design para Android, HIG para iOS, Fluent para Windows. A escolha do sistema de design é determinada pela plataforma alvo e ecossistema.

A principal vantagem do Material Design é sua abertura e natureza multiplataforma. Diretrizes, componentes e ferramentas (Material Theme Builder) estão disponíveis gratuitamente, tornando o sistema popular entre startups e desenvolvedores independentes. O Apple HIG está firmemente ligado ao ecossistema Apple, mas garante o melhor alinhamento com as expectativas da plataforma. Para projetos multiplataforma, o Material Design é a escolha ideal graças ao Flutter e ao Jetpack Compose Multiplatform.