Een profielkaart bouwen
Combineer composables tot een scherm.
Een profielkaart bouwen is een gratis Android Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Android Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Android Academy bevat in totaal 4 lessen.
Ons doel
Tijd om te combineren wat je hebt geleerd. We bouwen een eenvoudige profielkaart: een naam en functietitel die netjes onder elkaar staan in een opgemaakt vak.
Onderweg maak je kennis met de Modifier, die de grootte, tussenruimte en weergave van composables regelt.
Maak kennis met Modifier
Een Modifier verandert hoe een composable eruitziet en zich gedraagt. Je geeft deze door via de parameter modifier, die de meeste composables accepteren.
Modifiers regelen opvulling, grootte, achtergrondkleur, randen en meer. In Compose zijn ze de belangrijkste manier om je gebruikersinterface op te maken.
Text(
"Ada Lovelace",
modifier = Modifier.padding(16.dp)
)Modifiers koppelen
Je bouwt een modifier door aanroepen met punten aan elkaar te koppelen. Elke aanroep retourneert een nieuwe modifier, zodat je er meerdere kunt combineren.
De volgorde is belangrijk: opvulling vóór de achtergrond verschilt van opvulling na de achtergrond. Lees de keten van links naar rechts, als een recept.
Modifier
.padding(16.dp)
.fillMaxWidth()De volledige breedte gebruiken
De modifier fillMaxWidth laat een composable alle beschikbare horizontale ruimte innemen. Dit is ideaal voor kaarten die de volledige schermbreedte moeten vullen.
Er is ook fillMaxSize voor beide richtingen en size om een vaste breedte en hoogte in te stellen.
Column(
modifier = Modifier.fillMaxWidth()
) {
Text("Profile")
}Opvulling toevoegen
Opvulling voegt ruimte toe binnen een composable, tussen de rand en de inhoud. Gebruik Modifier.padding met een waarde in dp.
Door opvulling raakt tekst de randen van een kaart niet aan, waardoor de indeling prettig en overzichtelijk aanvoelt.
Column(
modifier = Modifier.padding(16.dp)
) {
Text("Ada Lovelace")
Text("Mathematician")
}De kaart een achtergrond geven
Met een achtergrondkleur valt de kaart beter op. Pas die toe met de modifier background en een kleurwaarde.
Combineer dit met opvulling, zodat het gekleurde gebied rondom de tekst binnenin voldoende ruimte heeft.
Column(
modifier = Modifier
.background(Color.LightGray)
.padding(16.dp)
) {
Text("Ada Lovelace")
}De naam en titel onder elkaar plaatsen
In de Column van de kaart plaatsen we twee stukken tekst onder elkaar: bovenaan een vetgedrukte naam en daaronder een lichtere functietitel.
Door verschillende waarden voor fontSize en fontWeight in te stellen, ontstaat er een duidelijke visuele hiërarchie.
Column {
Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
Text("Mathematician", fontSize = 14.sp)
}Herbruikbaar maken
Laten we de kaart omzetten in een herbruikbare composable die een name en een title als parameters accepteert. Nu kan de kaart elke persoon weergeven.
Dit is hetzelfde idee als in les één: geef gegevens door en hergebruik de gebruikersinterface overal.
@Composable
fun ProfileCard(name: String, title: String) {
Column {
Text(name)
Text(title)
}
}De volledige profielkaart
Hier staat de kaart met alle onderdelen samen: een kolom over de volledige breedte, een grijze achtergrond, opvulling en twee opgemaakte tekstregels.
Merk op hoe de modifierketen en de onderliggende elementen van de kolom alles uit de vorige lessen combineren in één overzichtelijke composable.
@Composable
fun ProfileCard(name: String, title: String) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(Color.LightGray)
.padding(16.dp)
) {
Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
Text(title, fontSize = 14.sp)
}
}De kaart bekijken
Voeg een wrapper met @Preview toe om de kaart in Android Studio te bekijken. Deze roept ProfileCard aan met voorbeeldgegevens en toont een achtergrond.
Nu kun je de opvulling of kleuren aanpassen en het resultaat direct zien veranderen.
@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
ProfileCard("Ada Lovelace", "Mathematician")
}Op het scherm tonen
Om de kaart in de actieve app weer te geven, roep je deze aan binnen setContent in je activity. Zo koppel je je composable aan het actieve scherm.
Je bent nu van één composable naar een volledige, herbruikbare gebruikersinterfacecomponent gegaan.
setContent {
ProfileCard("Ada Lovelace", "Mathematician")
}Korte controle
Laten we herhalen hoe composables hun opvulling, grootte en achtergrond krijgen.
Samenvatting
Je hebt een volledige profielkaart gebouwd door Text, Column en Modifier te combineren. Met modifiers kun je padding, fillMaxWidth en background koppelen om je gebruikersinterface vorm te geven en op te maken.
Je hebt de kaart herbruikbaar gemaakt met de parameters name en title, deze bekeken met @Preview en weergegeven via setContent. Dat is van begin tot eind een volledig composable scherm. Gefeliciteerd!
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
- 36
- Lessen
- 152
Veelgestelde vragen
Is de les “Een profielkaart bouwen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Android Academy, waaronder “Een profielkaart bouwen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Android Academy bevat in totaal 4 lessen.
Wat leer ik in “Een profielkaart bouwen”?
Combineer composables tot een scherm. Je oefent met Android 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 Android Academy te beginnen?
Ervaring vooraf is niet nodig. Android 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 profielkaart 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 Android Academy?
Ja. Elke les over Android 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
- Wat een composable is
- Basisprincipes van Text en Column
- Uw UI bekijken
- Een profielkaart bouwen