Sketch the Profile Card Layout
Plan the structure before you code.
Sketch the Profile Card Layout is a free Jetpack Compose Academy lesson on CoddyKit — lesson 1 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 Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Sketch First
Before you write a single line, picture the screen. A quick sketch turns a vague idea into a clear plan you can build with confidence. 📝
What a Profile Card Holds
Your profile card shows a few key things: an avatar, a name, a short bio, some stats, and a follow button. That list is your content inventory.
Think in Boxes
Compose lays things out as nested boxes. Each piece of content lives in its own region, and regions nest inside larger ones. Start by drawing those boxes.
Top to Bottom Flow
Most cards read vertically: avatar on top, name below, bio under that. A Column stacks children top to bottom, so it will be your outer container.
Sketch the Outer Column
The whole card sits inside one Column. Everything you add becomes a child of it, in the order you write them.
Column {
// avatar
// name
// bio
// stats row
// follow button
}Side-by-Side Stats
The stats line shows counts next to each other, not stacked. Anything that sits horizontally belongs in a Row nested inside your Column.
Plan the Stats Row
Sketch a Row holding three little blocks: posts, followers, and following. Each block is its own tiny piece of the card.
Row {
// posts
// followers
// following
}Where the Button Lives
The follow button is the last item, full width at the bottom. In your sketch it sits as the final child of the outer Column.
Name the Sections
Give each region a name: header, bio, stats, action. Naming sections now makes turning the sketch into Composables almost automatic later. ✨
Spacing and Breathing Room
A good sketch marks the gaps too. Note where you want padding around the card and space between sections so it never feels cramped.
From Sketch to Tree
Your sketch maps directly to a Composable tree: outer Column, then header, bio, stats Row, and button as children in order.
Quick Check
Which container best fits items that should sit side by side?
Recap: You Have a Plan
You sketched the card as nested boxes: an outer Column with a header, bio, a stats Row, and a follow button. Next you will turn that plan into real Composables.
Frequently asked questions
Is the “Sketch the Profile Card Layout” lesson free?
Yes — the full text of “Sketch the Profile Card Layout” is free to read here on the web, and the Jetpack Compose 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 Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Sketch the Profile Card Layout”?
Plan the structure before you code. You practise Jetpack Compose 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 Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Sketch the Profile Card Layout” 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 Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose 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
- Sketch the Profile Card Layout
- Avatar, Name & Bio Section
- Stats Row & Follow Button
- Extract Reusable Composables