Android Academy · Lesson

Building a Profile Card

Combine composables into a screen.

Building a Profile Card is a free Android Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Our Goal

Time to combine what you've learned. We'll build a simple profile card: a name and a job title stacked neatly in a styled box.

Along the way you'll meet the Modifier, which controls size, spacing, and appearance of composables.

Meet the Modifier

A Modifier changes how a composable looks and behaves. You pass it through the modifier parameter that most composables accept.

Modifiers handle padding, size, background color, borders, and more. They are the main way you decorate your UI in Compose.

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

Chaining Modifiers

You build a modifier by chaining calls with dots. Each call returns a new modifier, so you can stack several together.

Order matters: padding before background differs from padding after. Read the chain left to right, like a recipe.

Modifier
    .padding(16.dp)
    .fillMaxWidth()

Filling the Width

The fillMaxWidth modifier makes a composable stretch across all available horizontal space. It's perfect for cards that should span the screen.

There's also fillMaxSize for both directions, and size to set a fixed width and height.

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

Adding Padding

Padding adds space inside a composable, between its edge and its content. Use Modifier.padding with a dp value.

Padding keeps text from touching the edges of a card, making the layout feel comfortable and clean.

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

Giving the Card a Background

A background color helps the card stand out. Apply it with the background modifier and a color value.

Combine it with padding so the colored area has breathing room around the text inside.

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

Stacking the Name and Title

Inside the card's Column, we stack two pieces of text: a bold name on top and a lighter job title below.

Setting different fontSize and fontWeight values creates a clear visual hierarchy between them.

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

Making It Reusable

Let's turn the card into a reusable composable that takes a name and a title as parameters. Now it can show any person.

This is the same idea from lesson one: pass data in, reuse the UI everywhere.

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

The Full Profile Card

Here is the card with all the pieces together: a full-width column, a gray background, padding, and two styled text lines.

Notice how the modifier chain and the column children combine everything from the previous lessons into one tidy 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)
    }
}

Previewing the Card

Add a @Preview wrapper so you can see the card in Android Studio. It calls ProfileCard with sample data and shows a background.

Now you can tweak padding or colors and watch the result update instantly.

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Showing It on Screen

To display the card in the running app, call it inside setContent in your activity. That hooks your composable into the live screen.

You've now gone from a single composable to a complete, reusable UI component.

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Quick Check

Let's review how composables get their padding, size, and background.

Recap

You built a complete profile card by combining Text, Column, and Modifier. Modifiers let you chain padding, fillMaxWidth, and background to shape and style your UI.

You made the card reusable with name and title parameters, previewed it with @Preview, and displayed it through setContent. That's a full composable screen from start to finish. Congratulations!

Frequently asked questions

Is the “Building a Profile Card” lesson free?

Yes — the full text of “Building a Profile Card” is free to read here on the web, and the Android Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Android Academy course, upgrade to CoddyKit PRO.

What will I learn in “Building a Profile Card”?

Combine composables into a screen. You practise Android Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Android Academy?

No prior experience is required. Android Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Building a Profile Card” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Android Academy lesson?

Yes. Every Android Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Android Academy