Build a Profile Card with Compose Desktop: Layouts & Styling | Kotlin Desktop Lesson 02

Build a Profile Card with Compose Desktop: Layouts & Styling

In this lesson, you'll learn how to create a polished profile card using Compose Desktop by combining layout composables like Column, Row, and Box with styling modifiers. You'll also explore how to use Material3 components such as Card, Divider, and Button to build a clean and interactive UI element.

Code

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.Divider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
@Preview
fun ProfileCard() {
  // Define a card with rounded corners and elevation
  Card(
    modifier = Modifier
      .width(320.dp)
      .padding(16.dp),
    shape = RoundedCornerShape(16.dp),
    elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
    colors = CardDefaults.cardColors(containerColor = Color(0xFFE3F2FD))
  ) {
    Column(
      modifier = Modifier.padding(16.dp),
      horizontalAlignment = Alignment.CenterHorizontally
    ) {
      // Profile picture placeholder clipped to a circle
      Box(
        modifier = Modifier
          .size(100.dp)
          .clip(CircleShape)
          .background(Color(0xFF90CAF9))
      )

      Spacer(modifier = Modifier.height(12.dp))

      // Name text with font weight and size styling
      Text(
        text = "Alex Johnson",
        fontSize = 24.sp,
        fontWeight = FontWeight.Bold,
        lineHeight = 28.sp,
        textAlign = TextAlign.Center,
        modifier = Modifier.fillMaxWidth()
      )

      // Subtitle text with lighter font weight
      Text(
        text = "Android Developer",
        fontSize = 16.sp,
        fontWeight = FontWeight.Medium,
        color = Color.DarkGray,
        modifier = Modifier.fillMaxWidth(),
        textAlign = TextAlign.Center
      )

      Spacer(modifier = Modifier.height(16.dp))

      // Divider to separate content
      Divider(color = Color.LightGray, thickness = 1.dp)

      Spacer(modifier = Modifier.height(16.dp))

      // Row with two buttons spaced evenly
      Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly
      ) {
        Button(onClick = { /* Follow action */ }) {
          Text("Follow")
        }
        Button(onClick = { /* Message action */ }) {
          Text("Message")
        }
      }
    }
  }
}

Key Points

• Use Column, Row, and Box composables to arrange UI elements vertically, horizontally, and layered respectively.
• Chain Modifiers like size, padding, clip, background, and fillMaxWidth to control layout and appearance.
• Apply CircleShape and RoundedCornerShape to clip components into circles or rounded rectangles.
• Style Text with fontSize, fontWeight, lineHeight, and textAlign for clear typography.
• Leverage Material3 Card, Divider, and Button components for polished UI with elevation and color theming.