0
0
Android Kotlinmobile~20 mins

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

Choose your learning style9 modes available
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