Android architecture overview (Linux kernel, ART, framework) in Android Kotlin - Mini App: Build & Ship

Build: Android Architecture Overview

This screen shows a simple overview of Android architecture layers: Linux Kernel, ART, and Framework. It helps beginners understand the main parts of Android system.

Target UI

---------------------------------
| Android Architecture Overview  |
---------------------------------
| Linux Kernel                   |
| ----------------------------- |
| Android Runtime (ART)         |
| ----------------------------- |
| Application Framework         |
---------------------------------

Display three labeled sections stacked vertically: Linux Kernel, Android Runtime (ART), Application Framework

Each section should have a border and a background color

Use simple text labels with clear font size

Make the layout scrollable in case of small screens

Add a title at the top with the screen name

Starter Code

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

@Composable
fun ArchitectureOverviewScreen() {
  // TODO: Add UI code here
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
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.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.graphics.RectangleShape

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

@Composable
fun ArchitectureOverviewScreen() {
  val scrollState = rememberScrollState()
  Column(
    modifier = Modifier
      .fillMaxSize()
      .verticalScroll(scrollState)
      .padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp)
  ) {
    Text(
      text = "Android Architecture Overview",
      fontSize = 24.sp,
      color = Color.Black
    )

    ArchitectureLayerBox(
      label = "Linux Kernel",
      backgroundColor = Color(0xFFBBDEFB)
    )

    ArchitectureLayerBox(
      label = "Android Runtime (ART)",
      backgroundColor = Color(0xFFC8E6C9)
    )

    ArchitectureLayerBox(
      label = "Application Framework",
      backgroundColor = Color(0xFFFFF9C4)
    )
  }
}

@Composable
fun ArchitectureLayerBox(label: String, backgroundColor: Color) {
  Surface(
    modifier = Modifier
      .fillMaxSize()
      .border(2.dp, Color.Gray, RectangleShape)
      .background(backgroundColor)
      .padding(16.dp),
    color = Color.Transparent
  ) {
    Text(text = label, fontSize = 18.sp, color = Color.Black)
  }
}

This screen uses a vertical Column with scrolling enabled to fit all content on small screens. The title is a large text at the top. Each Android architecture layer is shown inside a bordered box with a distinct background color for clarity. Padding and spacing keep the layout clean and readable. This simple UI helps beginners visually separate the Linux Kernel, ART, and Application Framework layers.

Final Result

Completed Screen

---------------------------------
| Android Architecture Overview  |
---------------------------------
| [Linux Kernel]                 |
| ----------------------------- |
| [Android Runtime (ART)]       |
| ----------------------------- |
| [Application Framework]       |
---------------------------------

User can scroll vertically if screen is small

No buttons or navigation, just static info display

Stretch Goal

Add a dark mode toggle button that switches background and text colors

💡 Hint

Use a state variable to track dark mode and change colors conditionally in Compose