Lekce 3 - Material Design a tvorba Theme v Compose

V minulé lekci, Základní pozicovaní a náhledy GUI v Compose, jsme se naučili pozicovat komponenty vertikálně i horizontálně a vytvořit náhled rozhraní.

V dnešním Compose tutoriálu si představíme Material Design, který nám pomůže tvořit kvalitní grafiku Kotlin aplikací. Vysvětlíme si, co je to primární a sekundární barva. V praktickém příkladu si ukážeme, jak v Android Studiu definovat barevné schéma a jak jej použít pro naše Compose komponenty. Pro úpravu našeho GUI pomocí konceptu Material Design použijeme Modifier, pomocí něhož upravíme také tvar tlačítka.

Material Design

Material Design je designový jazyk vytvořený společností Google v roce 2014. V dnešní době se běžně setkáváme se dvěma verzemi. Používá se Material Design 2 nebo Material Design 3. Pro potřeby našeho tutoriálu budeme používat zkratky M2 a M3. M3 je vylepšením staršího standardu M2, ale vychází ze stejných principů a základy zůstávají stejné. Oba jazyky pracuji se stíny, hloubkou a řeší barevný, typografický i tvarový systém.

Barevný systém

Základní věcí při tvoření aplikace je zvolení správných barev, které budou reprezentovat naší značku. Není vhodné, abychom v jedné aplikaci používali deset barev a měli v ní například deset různě barevných tlačítek. To by mohlo být pro uživatele matoucí. Když se budeme držet standardu M2 či M3, použijeme pouze pár barev. Celkový dojem z naší aplikace bude tak ucelenější.

V základu rozlišujeme primární a sekundární barvu. Primární barvu použijeme u komponenty, která má být více viditelná. Například v případě kalkulačky ji využijeme u tlačítka rovná se. Sekundární barvu použijeme na komponenty, které nepotřebujeme až tak moc zvýraznit. Máme k dispozici několik dalších barevných rozlišení, ale ty si budeme vysvětlovat postupně v dalších dílech.

Jako další zmiňme tzv. on barvy, jejichž použití si ukážeme dále v lekci. Tyto barvy nám slouží například pro psaní textu na určitou komponentu, jako třeba tlačítko.

Typografický systém

Dále je určitě žádoucí, abychom nepoužívali několik fontů najednou a různě je míchali. To má pak za výsledek opět špatný dojem z aplikace. Pokud potřebujeme více fontů, vybereme pouze ty, které k sobě ladí. A znovu platí, čím méně rozdílných typů písma použijeme, tím lépe.

K výběru fontů použijeme webovou stránku přímo od Googlu, která se jmenuje Google Fonts. Na ní najdeme několik stovek fontů a Google nám i pomůže vybrat k sobě ty správné.

Tvarový systém

Určitě bychom chtěli nějak "okořenit" vzhled naší aplikace, aby nevypadala jako stovky dalších. K tomu nám určitě pomůžou různé tvary našich komponent. Vylepšíme tak dojem z naší aplikace. Nebudou to už klasické čtvercové tvary, které působí ohraně. S pomocí Compose a Material Design vytvoříme zaoblené i zastřižené tvary. Pro úpravu komponent využijeme už dříve zmíněný Modifier.

Tvorba aplikace v Material Design

Pojďme si nyní ukázat vše v praxi. Vytvoříme si nový projekt, stejně jako v minulých lekcích. Dnešní příklad pojmenujeme PrvniAplikaceMaterial:

Barevné konstanty

Jako obvykle se nám otevře soubor MainActivity.kt. Tento soubor zatím upravovat nebudeme. Nejprve si ukážeme, kde můžeme měnit naše barvy. Hned nad souborem MainActivity.kt máme složku ui.theme\. Otevřeme ji a v ní dvakrát klikneme na soubor Color.kt:

Tento soubor slouží k tvorbě barevných konstant. Díky tomu pak nemusíme pokaždé psát hexadecimální kódy barev. Jeho původní obsah vypadá následovně:

package cz.itnetwork.prvniaplikacematerial.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

Máme zde konstanty pro čtyři barvy, které budeme používat v Material Design. Abychom je mohli používat, musíme je přidat do barevného schématu.

Barevné schéma

Schéma nám také automaticky vygenerovalo Android Studio, najdeme ho v souboru ui.theme/Theme.kt.

Abychom celý princip stavby grafického vzhledu správně pochopili, popišme si, co dělá kód ve vygenerovaném souboru:

package cz.itnetwork.prvniaplikacematerial.ui.theme

import ...

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)
   ...

Na začátku je uveden balíček naší aplikace, následují potřebné importy. Dále definujeme barevnou paletu pro tmavý režim. V ní určíme primární barvu, včetně možné varianty a poté vybereme sekundární barvu.

Obdobně vytvoříme barevnou paletu pro světlý režim:

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black
    */
)

Ve druhém odstavci máme zakomentovaný kód, v němž lze definovat zmíněné on barvy. Ve výchozím nastavení bude použita bílá a černá barva, které se vzájemně střídají. Pokud bychom to chtěli změnit, kód odkomentujeme a definujeme si v něm vlastní barvy.

Nakonec v souboru máme @Composable metodu:

@Composable
fun PrvniAplikaceMaterialTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

Tato metoda je anotována anotací @Composable, můžeme ji tedy použít při tvorbě rozhraní. V první části zjišťujeme, zda má být nastaven tmavý či světlý režim a pomocí podmínky vybereme odpovídající barevnou paletu. V druhé části odkazujeme na definované barvy, písmo a tvary našeho GUI.

Tvorba tlačítka

V aplikaci si nyní vytvoříme barevné tlačítko. Začneme tak s využitím barev našeho MaterialTheme. Tlačítko definujeme v souboru MainActivity.kt. Nejprve si zde vytvoříme @Composable metodu, pojmenujeme ji BarevneTlacitko() a přidáme jí anotaci @Preview:

@Preview
@Composable
fun BarevneTlacitko() {
    Button(
        onClick = { /*TODO*/ },
        colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary)
    ) {
        Text(
            text = "Tlačítko",
            color = MaterialTheme.colors.onPrimary,
            modifier = Modifier.background(MaterialTheme.colors.primary)
        )
    }
}

Pomocí parametru colors jsme nastavili tlačítku barvu pozadí. Použili jsme příkaz ButtonDefaults.buttonColors() a v parametru jsme mu nastavili primární barvu z MaterialTheme. Poté jsme tlačítku přidali text a jeho barvu nastavili na hodnotu, která je uložená v MaterialTheme.colors.onPrimary. U textu jsme tedy použili on barvu. Pro nastavení pozadí jsme použili Modifier s primární barvou.

V kódu máme také barvu onPrimary, která je v souboru Theme.kt zakomentovaná. V našem případě tedy Android Studio použije výchozí barvy, tj. bílou a černou. Pokud bychom je chtěli explicitně nastavit, definujeme je právě v souboru Theme.kt.

Nastavení barevného schématu

Dále potřebujeme nastavit konkrétní MaterialTheme našemu tlačítku. Toho docílíme úplně jednoduše. Celý Button() vložíme do bloku PrvniAplikaceMaterialTheme:

@Preview
@Composable
fun BarevneTlacitko() {
    PrvniAplikaceMaterialTheme {
        Button(
            onClick = { /*TODO*/ },
            colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary)
        ) {
            Text(
                text = "Tlačítko",
                color = MaterialTheme.colors.onPrimary,
                modifier = Modifier.background(MaterialTheme.colors.primary)
            )
        }
    }
}

Takto nastavený MaterialTheme bude použit pro všechny elementy uvnitř bloku. Změní tedy i vzhled komponent vytvořených v jiných @Composable metodách, pokud jsou součástí bloku. Všechny změny můžeme pozorovat v režimu Split:

Úprava tvaru tlačítka

Na závěr si ukážeme, jak změnit tvar tlačítka. To uděláme opět pomocí Modifier:

Button(
        onClick = { /*TODO*/ },
        modifier = Modifier.clip(CutCornerShape(16.dp)),
        colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary)
    ) {
        Text(
            text = "Tlačítko",
            color = MaterialTheme.colors.onPrimary,
            modifier = Modifier.background(MaterialTheme.colors.primary)
        )
    }

Přidali jsme parametr modifier do komponenty Button(). Tlačítku jsme v něm nastavili ustřižený tvar. Výsledek můžeme vidět ve Split režimu:

Vidíme, že Modifier využijeme také pro úpravy tvarů komponent. Můžeme jej použít pro kteroukoliv komponentu v Compose, dokonce i pro naše vlastní. Tím ale jeho využití nekončí, jak uvidíme v dalších lekcích.

V příští lekci, Jednoduchá kalkulačka v Compose - Tvorba komponent, začneme tvořit kalkulačku. Připravíme si tlačítka pro jednotlivé početní operace, která budeme používat v našem grafickém rozhraní a ukážeme si, jak správně strukturovat náš projekt.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.