Een aangepast designsysteem bouwen
Breid het thema uit met uw eigen tokens.
Een aangepast designsysteem bouwen is een gratis Jetpack Compose Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Jetpack Compose Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Jetpack Compose Academy bevat in totaal 4 lessen.
Verder dan de standaardwaarden
Echte merken hebben meer nodig dan de ingebouwde Material-opties. Een ontwerpsysteem bundelt je kleuren, typografie, vormen en extra tokens in één herbruikbaar thema. 🏗️
MaterialTheme omwikkelen
Je begint met je eigen Composable AppTheme, die MaterialTheme configureert en de hele app één benoemd toegangspunt geeft.
@Composable
fun AppTheme(content: @Composable () -> Unit) { /* ... */ }Je tokens doorgeven
Binnen AppTheme geef je MaterialTheme je aangepaste colorScheme, typography en shapes door, zodat elk scherm automatisch je merk overneemt.
MaterialTheme(
colorScheme = brandColors,
typography = brandType,
shapes = brandShapes
) { content() }Material bevat niet alle tokens
Sommige merkwaarden, zoals een succesgroene kleur of een aangepaste tussenruimte-eenheid, hebben geen Material-rol. Voeg deze toe als je eigen extra tokens.
Extra kleuren bewaren
Je groepeert extra kleuren in een kleine gegevensklasse: een overzichtelijke plek voor merkwaarden die Material niet standaard biedt.
data class BrandColors(
val success: Color,
val warning: Color
)CompositionLocal
Als je aangepaste tokens door de boom wilt delen zonder parameters door te geven, gebruik je een CompositionLocal, het ingebouwde mechanisme van Compose voor ambient waarden.
De Local maken
Je declareert een staticCompositionLocalOf met een standaardwaarde. Daarmee maak je een kanaal waaruit elke Composable je merkkleuren kan lezen.
val LocalBrand = staticCompositionLocalOf { defaultBrand }De waarden aanbieden
In AppTheme wikkel je de inhoud in een CompositionLocalProvider en geef je je merk-tokens samen met MaterialTheme door aan de boom.
CompositionLocalProvider(LocalBrand provides brand) {
MaterialTheme(/* ... */) { content() }
}Aangepaste tokens lezen
Een Composable die daaronder staat, leest LocalBrand.current om je aangepaste waarden op te halen, net zoals MaterialTheme zijn eigen waarden beschikbaar maakt.
val success = LocalBrand.current.successEen nette API aanbieden
Veel teams bieden een object aan, zodat aanroepen eruitzien als AppTheme.brand.success: een gebruiksvriendelijke façade rond de onderliggende CompositionLocal.
Eén bron van waarheid
Nu komen kleuren, typografie, vormen en aangepaste tokens allemaal uit één thema. Zo blijft de app consistent en eenvoudig verder te ontwikkelen. ✨
Korte controle
Je hebt een merkkleur nodig waarvoor Material geen rol heeft, maar die in de hele app gedeeld moet worden. Waar kies je dan voor?
Samenvatting: je eigen thema
Je hebt MaterialTheme in een AppTheme gewikkeld, extra tokens toegevoegd via CompositionLocal en je app één herkenbare bron van waarheid gegeven. 🎉
Leer Kotlin met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Een aangepast designsysteem bouwen” gratis?
Ja — de volledige tekst van “Een aangepast designsysteem bouwen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Jetpack Compose Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Jetpack Compose Academy bevat in totaal 4 lessen.
Wat leer ik in “Een aangepast designsysteem bouwen”?
Breid het thema uit met uw eigen tokens. Je oefent met Jetpack Compose Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Jetpack Compose Academy te beginnen?
Ervaring vooraf is niet nodig. Jetpack Compose Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Een aangepast designsysteem bouwen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Jetpack Compose Academy?
Ja. Elke les over Jetpack Compose Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- MaterialTheme en kleurenschema's
- Typografie- en vormtokens
- Donkere modus en dynamische kleur
- Een aangepast designsysteem bouwen