Android Studio installation in Android Kotlin - Mini App: Build & Ship

Build: Installation Guide

This screen guides users through the steps to install Android Studio on their computer.

Target UI

---------------------------------
| Android Studio Installation    |
|-------------------------------|
| 1. Download Android Studio     |
| 2. Run the installer          |
| 3. Follow setup wizard        |
| 4. Launch Android Studio      |
|                               |
| [Next]                       |
---------------------------------

Display a title at the top

Show a numbered list of installation steps

Include a Next button at the bottom

Use simple text and clear layout

Starter Code

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
        Column(modifier = Modifier.padding(16.dp)) {
          // TODO: Add title text here
          // TODO: Add numbered list of steps here
          // TODO: Add Next button here
        }
      }
    }
  }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
        Column(
          modifier = Modifier.padding(16.dp),
          verticalArrangement = Arrangement.SpaceBetween,
          horizontalAlignment = Alignment.CenterHorizontally
        ) {
          Column {
            Text(
              text = "Android Studio Installation",
              fontSize = 24.sp,
              fontWeight = FontWeight.Bold,
              modifier = Modifier.padding(bottom = 24.dp)
            )
            Text(text = "1. Download Android Studio", fontSize = 18.sp, modifier = Modifier.padding(bottom = 8.dp))
            Text(text = "2. Run the installer", fontSize = 18.sp, modifier = Modifier.padding(bottom = 8.dp))
            Text(text = "3. Follow setup wizard", fontSize = 18.sp, modifier = Modifier.padding(bottom = 8.dp))
            Text(text = "4. Launch Android Studio", fontSize = 18.sp)
          }
          Button(onClick = { /* TODO: Handle next action */ }) {
            Text(text = "Next")
          }
        }
      }
    }
  }
}

This screen uses a vertical column layout with padding around the edges. The title is shown at the top with a larger, bold font to stand out. Below the title, each installation step is displayed as a separate line with some spacing. At the bottom, a button labeled 'Next' is centered horizontally. This simple layout clearly guides the user through the installation steps with a clean and readable design.

Final Result

Completed Screen

---------------------------------
| Android Studio Installation    |
|-------------------------------|
| 1. Download Android Studio     |
| 2. Run the installer          |
| 3. Follow setup wizard        |
| 4. Launch Android Studio      |
|                               |
|            [Next]             |
---------------------------------

User can read the installation steps clearly

User can tap the Next button to proceed (action not implemented)

Stretch Goal

Add a dark mode toggle switch to the screen

💡 Hint

Use a Switch composable and toggle MaterialTheme color scheme between light and dark