Android: Jetpack Compose UI

Jetpack Compose is Android's modern declarative UI toolkit. Instead of XML layouts, you write Kotlin functions annotated with @Composable that describe the UI. Compose re-runs composables when state changes — no manual view updates.

Composable Functions

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

// Stateful composable — owns and manages state
@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Count: $count", style = MaterialTheme.typography.headlineMedium)
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

// Stateless composable — receives state as params (easier to test/reuse)
@Composable
fun CounterDisplay(count: Int, onIncrement: () -> Unit) {
    Column {
        Text("Count: $count")
        Button(onClick = onIncrement) { Text("Increment") }
    }
}

// Preview
@Preview(showBackground = true)
@Composable
fun CounterPreview() {
    MyAppTheme { Counter() }
}

Layout Composables

// Column — vertical stack
Column(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Item 1")
    Text("Item 2")
}

// Row — horizontal stack
Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Left")
    Icon(Icons.Default.ArrowForward, contentDescription = null)
}

// Box — overlapping (Z-stack)
Box(modifier = Modifier.fillMaxSize()) {
    Image(painter = painterResource(R.drawable.bg), contentDescription = null,
        modifier = Modifier.fillMaxSize())
    Text("Overlay text", modifier = Modifier.align(Alignment.Center))
}

// LazyColumn — scrollable list (RecyclerView equivalent)
LazyColumn(contentPadding = PaddingValues(16.dp)) {
    items(items, key = { it.id }) { item ->
        ItemCard(item = item, onClick = { onItemClick(item) })
    }
    item { Spacer(modifier = Modifier.height(80.dp)) }  // bottom padding
}

Modifier

// Modifier chains — order matters
Modifier
    .fillMaxSize()                         // fill parent
    .fillMaxWidth().height(56.dp)          // fixed height, full width
    .size(48.dp)                           // square
    .padding(horizontal = 16.dp, vertical = 8.dp)
    .background(MaterialTheme.colorScheme.surface, shape = RoundedCornerShape(8.dp))
    .clip(RoundedCornerShape(8.dp))        // clip to shape
    .border(1.dp, Color.Gray, RoundedCornerShape(8.dp))
    .clickable { onClick() }
    .clickable(onClick = onClick, role = Role.Button)
    .semantics { contentDescription = "Increment counter" }  // accessibility
    .testTag("counter_button")             // UI testing
    .weight(1f)                            // in Row/Column: take remaining space

Common Components

// Text field
var text by remember { mutableStateOf("") }
OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Email") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
    isError = !text.contains("@"),
    supportingText = { if (!text.contains("@")) Text("Invalid email") }
)

// Image loading (Coil)
// implementation("io.coil-kt:coil-compose:2.6.0")
AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Profile photo",
    modifier = Modifier.size(40.dp).clip(CircleShape),
    contentScale = ContentScale.Crop,
    placeholder = painterResource(R.drawable.placeholder),
    error = painterResource(R.drawable.error),
)

// Scaffold — standard screen layout
Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("My App") },
            navigationIcon = {
                IconButton(onClick = { navController.popBackStack() }) {
                    Icon(Icons.Default.ArrowBack, contentDescription = "Back")
                }
            }
        )
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { /* add item */ }) {
            Icon(Icons.Default.Add, contentDescription = "Add")
        }
    }
) { paddingValues ->
    Content(modifier = Modifier.padding(paddingValues))
}

Android: Architecture ViewModel, StateFlow & Room

ViewModel & StateFlow

// ViewModel — survives configuration changes (rotation)
// implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")

class ArticlesViewModel(
    private val repository: ArticleRepository
) : ViewModel() {

    // UI state
    private val _uiState = MutableStateFlow(ArticlesUiState())
    val uiState: StateFlow<ArticlesUiState> = _uiState.asStateFlow()

    init {
        loadArticles()
    }

    fun loadArticles() {
        viewModelScope.launch {
            _uiState.update { it.copy(isLoading = true) }
            try {
                val articles = repository.getArticles()
                _uiState.update { it.copy(articles = articles, isLoading = false) }
            } catch (e: Exception) {
                _uiState.update { it.copy(error = e.message, isLoading = false) }
            }
        }
    }

    fun deleteArticle(id: Int) {
        viewModelScope.launch {
            repository.deleteArticle(id)
            loadArticles()
        }
    }
}

data class ArticlesUiState(
    val articles: List<Article> = emptyList(),
    val isLoading: Boolean = false,
    val error: String? = null,
)

// In Composable
@Composable
fun ArticlesScreen(viewModel: ArticlesViewModel = hiltViewModel()) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    when {
        uiState.isLoading -> CircularProgressIndicator()
        uiState.error != null -> Text("Error: ${uiState.error}")
        else -> ArticlesList(articles = uiState.articles)
    }
}

Room Database

// implementation("androidx.room:room-runtime:2.6.1")
// implementation("androidx.room:room-ktx:2.6.1")
// kapt("androidx.room:room-compiler:2.6.1")

@Entity(tableName = "articles")
data class ArticleEntity(
    @PrimaryKey(autoGenerate = true) val id: Int = 0,
    val title: String,
    val content: String,
    val createdAt: Long = System.currentTimeMillis(),
)

@Dao
interface ArticleDao {
    @Query("SELECT * FROM articles ORDER BY createdAt DESC")
    fun getAllArticles(): Flow<List<ArticleEntity>>   // Flow = reactive stream

    @Query("SELECT * FROM articles WHERE id = :id")
    suspend fun getArticleById(id: Int): ArticleEntity?

    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun insert(article: ArticleEntity)

    @Update
    suspend fun update(article: ArticleEntity)

    @Delete
    suspend fun delete(article: ArticleEntity)

    @Query("DELETE FROM articles WHERE id = :id")
    suspend fun deleteById(id: Int)
}

@Database(entities = [ArticleEntity::class], version = 1, exportSchema = false)
abstract class AppDatabase : RoomDatabase() {
    abstract fun articleDao(): ArticleDao

    companion object {
        @Volatile private var INSTANCE: AppDatabase? = null

        fun getDatabase(context: Context): AppDatabase {
            return INSTANCE ?: synchronized(this) {
                Room.databaseBuilder(
                    context.applicationContext,
                    AppDatabase::class.java,
                    "app_database"
                ).build().also { INSTANCE = it }
            }
        }
    }
}

Repository Pattern

class ArticleRepository(private val dao: ArticleDao, private val api: ArticleApi) {

    // Combine local DB (offline-first) with network
    val articles: Flow<List<Article>> = dao.getAllArticles()
        .map { entities -> entities.map { it.toArticle() } }

    suspend fun refreshArticles() {
        val remoteArticles = api.getArticles()
        dao.insertAll(remoteArticles.map { it.toEntity() })
    }

    suspend fun deleteArticle(id: Int) {
        dao.deleteById(id)
    }
}

Android: Navigation, Coroutines & Dependency Injection

Navigation Component (Compose)

// implementation("androidx.navigation:navigation-compose:2.7.7")

// Define destinations
sealed class Screen(val route: String) {
    object ArticleList : Screen("articles")
    object ArticleDetail : Screen("articles/{id}") {
        fun createRoute(id: Int) = "articles/$id"
    }
    object Settings : Screen("settings")
}

// NavHost — root of the navigation graph
@Composable
fun AppNavHost() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = Screen.ArticleList.route) {

        composable(Screen.ArticleList.route) {
            ArticlesScreen(
                onArticleClick = { id ->
                    navController.navigate(Screen.ArticleDetail.createRoute(id))
                }
            )
        }

        composable(
            route = Screen.ArticleDetail.route,
            arguments = listOf(navArgument("id") { type = NavType.IntType })
        ) { backStackEntry ->
            val id = backStackEntry.arguments?.getInt("id") ?: return@composable
            ArticleDetailScreen(articleId = id, onBack = { navController.popBackStack() })
        }
    }
}

// Navigate and pass data back
navController.navigate(route) {
    popUpTo(Screen.ArticleList.route) { inclusive = false }  // clear back stack
    launchSingleTop = true  // avoid duplicate screens
}

Coroutines

import kotlinx.coroutines.*

// viewModelScope — tied to ViewModel lifecycle
viewModelScope.launch {
    val result = withContext(Dispatchers.IO) {
        repository.fetchData()  // blocking I/O off main thread
    }
    _uiState.update { it.copy(data = result) }
}

// Launch concurrent work
viewModelScope.launch {
    val deferredA = async { api.fetchUsers() }
    val deferredB = async { api.fetchPosts() }
    val (users, posts) = deferredA.await() to deferredB.await()
}

// Flow operators
repository.articles
    .filter { it.isNotEmpty() }
    .map { articles -> articles.sortedByDescending { it.createdAt } }
    .distinctUntilChanged()
    .onEach { Log.d("TAG", "Articles updated: ${it.size}") }
    .collect { articles -> _uiState.update { it.copy(articles = articles) } }

// Dispatchers:
// Dispatchers.Main   — UI thread
// Dispatchers.IO     — I/O (network, disk)
// Dispatchers.Default — CPU-intensive (parsing, sorting)

Hilt Dependency Injection

// plugins: id("com.google.dagger.hilt.android")
// implementation("com.google.dagger:hilt-android:2.51")
// kapt("com.google.dagger:hilt-android-compiler:2.51")

@HiltAndroidApp
class MyApplication : Application()

// Provide dependencies
@Module
@InstallIn(SingletonComponent::class)
object AppModule {

    @Provides @Singleton
    fun provideDatabase(@ApplicationContext context: Context): AppDatabase {
        return Room.databaseBuilder(context, AppDatabase::class.java, "app_db").build()
    }

    @Provides @Singleton
    fun provideArticleDao(database: AppDatabase): ArticleDao = database.articleDao()

    @Provides @Singleton
    fun provideRetrofit(): Retrofit = Retrofit.Builder()
        .baseUrl("https://api.example.com/")
        .addConverterFactory(GsonConverterFactory.create())
        .build()
}

// Inject into ViewModel
@HiltViewModel
class ArticlesViewModel @Inject constructor(
    private val repository: ArticleRepository
) : ViewModel()

// Inject into Activity/Fragment
@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    @Inject lateinit var analytics: Analytics
}

Key Architecture Patterns

• MVVM + Clean Architecture: UI layer (Compose) → ViewModel → Repository → Data sources (Room, Retrofit).

• Single source of truth: Room DB as the local truth; network data flows through DB before reaching UI.

• UiState sealed class or data class: represent Loading/Success/Error states explicitly.

• collectAsStateWithLifecycle: preferred over collectAsState — stops collecting when screen is in background.

• SavedStateHandle: persist ViewModel state across process death. Inject via @HiltViewModel.

• Use sealed interfaces for UI events (one-shot actions like navigation, snackbars) separately from UI state.

• Preview parameters: use @PreviewParameter to show composables with sample data in Android Studio.