Surface and shape in Android Kotlin - Mini App: Build & Ship

Build: ShapeSurfaceScreen

This screen shows a colored rectangle with rounded corners and a shadow to demonstrate surface and shape styling in Android using Kotlin.

Target UI

┌───────────────────────────────┐
│ ShapeSurfaceScreen             │
│ ┌─────────────────────────┐   │
│ │                         │   │
│ │   [ Rounded Rectangle ] │   │
│ │                         │   │
│ └─────────────────────────┘   │
│                               │
└───────────────────────────────┘

Create a screen with a centered rectangle shape

The rectangle must have rounded corners with 16dp radius

Add a subtle shadow below the rectangle to simulate elevation

Fill the rectangle with a light blue color

Use Material Design surface and shape theming where possible

Starter Code

Android Kotlin

package com.example.shapesurface

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

class ShapeSurfaceScreen : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ShapeSurfaceContent()
        }
    }
}

@Composable
fun ShapeSurfaceContent() {
    // TODO: Add your code here
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

package com.example.shapesurface

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.shape.RoundedCornerShape

class ShapeSurfaceScreen : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ShapeSurfaceContent()
        }
    }
}

@Composable
fun ShapeSurfaceContent() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Surface(
            modifier = Modifier.size(width = 200.dp, height = 120.dp),
            shape = RoundedCornerShape(16.dp),
            color = Color(0xFFBBDEFB), // Light blue
            shadowElevation = 8.dp
        ) {
            // Empty content inside surface
        }
    }
}

We use a Surface composable to create a rectangle with a background color and elevation (shadow). The RoundedCornerShape with 16dp radius gives the corners a smooth curve. The shadowElevation property adds a subtle shadow below the surface to simulate depth. The surface is centered inside a Box that fills the screen. The light blue color is set using a hex color code. This demonstrates how to style surfaces and shapes in Android Compose with Kotlin.

Final Result

Completed Screen

┌───────────────────────────────┐
│ ShapeSurfaceScreen             │
│                               │
│           ┌───────────────┐   │
│           │               │   │
│           │               │   │
│           │               │   │
│           └───────────────┘   │
│                               │
└───────────────────────────────┘

The rectangle is static and centered on the screen

It has rounded corners and a subtle shadow below

No user interaction is required

Stretch Goal

Add a button below the rectangle that toggles the rectangle's color between light blue and light green when tapped.

💡 Hint

Use a mutable state variable to hold the current color and update it on button click. Use Compose's Button and remember { mutableStateOf(...) }.