Project structure (app, gradle, manifests) in Android Kotlin - Mini App: Build & Ship

Build: Project Structure Overview

This screen shows the basic Android project structure focusing on app module, Gradle files, and manifest files.

Target UI

----------------------------------
| Android Project Structure       |
|--------------------------------|
| app/                           |
|   ├─ src/                      |
|   │   ├─ main/                 |
|   │   │   ├─ java/             |
|   │   │   ├─ res/              |
|   │   │   └─ AndroidManifest.xml|
|   ├─ build.gradle              |
| build.gradle (project level)  |
| settings.gradle               |
----------------------------------

Display a simple list showing main folders and files: app module folder, src/main folder, java folder, res folder, AndroidManifest.xml file

Show build.gradle files for app module and project level

Show settings.gradle file

Use a vertical list with indentation to represent folder hierarchy

Use simple TextViews with proper indentation

Add a header title 'Android Project Structure'

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.padding
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 {
      MaterialTheme {
        Surface(modifier = Modifier.padding(16.dp)) {
          Column {
            // TODO: Add project structure list 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.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
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 {
      MaterialTheme {
        Surface(modifier = Modifier.padding(16.dp)) {
          Column {
            Text(
              text = "Android Project Structure",
              fontSize = 24.sp,
              fontWeight = FontWeight.Bold,
              modifier = Modifier.padding(bottom = 16.dp)
            )
            Text(text = "app/", modifier = Modifier.padding(start = 0.dp, bottom = 4.dp))
            Text(text = "├─ src/", modifier = Modifier.padding(start = 16.dp, bottom = 4.dp))
            Text(text = "│  ├─ main/", modifier = Modifier.padding(start = 32.dp, bottom = 4.dp))
            Text(text = "│  │  ├─ java/", modifier = Modifier.padding(start = 48.dp, bottom = 4.dp))
            Text(text = "│  │  ├─ res/", modifier = Modifier.padding(start = 48.dp, bottom = 4.dp))
            Text(text = "│  │  └─ AndroidManifest.xml", modifier = Modifier.padding(start = 48.dp, bottom = 8.dp))
            Text(text = "├─ build.gradle", modifier = Modifier.padding(start = 16.dp, bottom = 8.dp))
            Text(text = "build.gradle (project level)", modifier = Modifier.padding(start = 0.dp, bottom = 8.dp))
            Text(text = "settings.gradle", modifier = Modifier.padding(start = 0.dp))
          }
        }
      }
    }
  }
}

This solution uses Jetpack Compose to create a simple vertical list showing the Android project structure.

The Column arranges Text composables vertically. Indentation is done by adding left padding to each line to represent folder hierarchy visually.

The header uses a larger font size and bold weight to stand out.

This approach clearly shows the app module folder, source folders, manifest file, and Gradle files as requested.

Final Result

Completed Screen

----------------------------------
| Android Project Structure       |
|--------------------------------|
| app/                           |
|   ├─ src/                      |
|   │   ├─ main/                 |
|   │   │   ├─ java/             |
|   │   │   ├─ res/              |
|   │   │   └─ AndroidManifest.xml|
|   ├─ build.gradle              |
| build.gradle (project level)  |
| settings.gradle               |
----------------------------------

Screen is static showing the project structure list

User can scroll if screen is small (default Compose behavior)

No interactive elements on this screen

Stretch Goal

Add a button that shows a short explanation dialog about each file when tapped

💡 Hint

Use a Button composable and AlertDialog in Jetpack Compose to show file descriptions