Android Development

AppBars in Jetpack Compose are powerful and flexible UI components that replace the traditional Toolbar from the Android View system.

They provide space for branding, screen titles, navigation icons, and action items such as buttons or menus. AppBars in Compose promote cleaner, declarative code, adapt well to screen changes, and are highly customizable using composables.

Difference Between AppBar and Traditional Toolbar

• Traditional Toolbar: Part of the View-based UI, defined in XML and set with setSupportActionBar().
• AppBar in Compose: Built using Composable functions, fully declarative and more flexible.
• Customization: AppBars in Compose can be nested or conditionally shown using Kotlin code easily.

Types of AppBars in Jetpack Compose

1. TopAppBar

The standard app bar shown at the top of the screen with a title and optional navigation/action icons.

2. CenterAlignedTopAppBar

Centers the title text and is often used for minimalist design aesthetics.

3. SmallTopAppBar, MediumTopAppBar, LargeTopAppBar

These are Material3 components that support different heights and scroll behaviors.

4. BottomAppBar

Shown at the bottom of the screen, usually for navigation or floating action buttons (FABs).

How to Add a TopAppBar in Jetpack Compose

@Composable
fun MyTopBar() {
    TopAppBar(
        title = { Text("My App") },
        navigationIcon = {
            IconButton(onClick = { /* handle navigation */ }) {
                Icon(Icons.Default.ArrowBack, contentDescription = "Back")
            }
        },
        actions = {
            IconButton(onClick = { /* handle search */ }) {
                Icon(Icons.Default.Search, contentDescription = "Search")
            }
        }
    )
}
    

Using Material 3 Top App Bars

import androidx.compose.material3.*

@Composable
fun MyLargeAppBar() {
    LargeTopAppBar(
        title = { Text("Large Title") },
        navigationIcon = {
            IconButton(onClick = { /* back */ }) {
                Icon(Icons.Default.Menu, contentDescription = "Menu")
            }
        },
        actions = {
            IconButton(onClick = { /* settings */ }) {
                Icon(Icons.Default.Settings, contentDescription = "Settings")
            }
        }
    )
}