Building a Robust Android App with Jetpack Compose and Navigation

/ Blog, Tips and tricks

Jetpack Compose is a modern UI toolkit that revolutionizes Android app development by offering a declarative approach to building user interfaces. This means you can describe your UI in terms of its desired state, and Compose handles the rendering. This approach leads to more concise, readable, and maintainable code.

Disclaimer: I’m currently learning Jetpack Compose from Google’s courses, and I’m eager to share what I’ve learned about navigation in Android apps.

Getting Started with Jetpack Compose

1. Add the Necessary Dependencies:

To begin, add the following dependencies to your app-level build.gradle file:

Groovy 

dependencies {
    // add this
    implementation 'androidx.compose.ui:ui:1.6.0'
    implementation 'androidx.compose.material:material:1.6.0'
    implementation 'androidx.compose.ui:ui-tooling-preview:1.6.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
    implementation 'androidx.activity:activity-compose:1.7.2'
    implementation 'androidx.navigation:navigation-compose:2.6.1'      
}

2. Set Up Your Activity:

To display your Compose UI, you’ll need to use the androidx.activity.compose.Activity class:

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

3. Create a Centralized App Container:

An app container is a single composable function that encapsulates the entire navigation and UI hierarchy of your app. This promotes a clean and maintainable architecture:

@Composable
fun App() {
    val navController = rememberNavController()
  

    MaterialTheme {
        Scaffold(
            topBar = {
                // Custom top bar
            },
            bottomBar = {
                // Custom bottom bar
            },
            content = { paddingValues ->
                NavHost(navController, startDestination = "home", Modifier.padding(paddingValues)) {
                    composable("home") { HomeScreen(navController) }
                    composable("details/{itemId}") { backStackEntry ->
                        DetailsScreen(itemId = backStackEntry.arguments?.getString("itemId"), navController)
                    }
                    composable("settings") { SettingsScreen(navController) }
                    // ... other screens
                }
            }
        )
    }
}

Example of a Centralized App Container with Multiple Screens:

import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun HomeScreen(navController: NavController,  homeViewModel: HomeViewModel = viewModel()) {
    Column {
        Text(text = "Home Screen")
        Button(onClick = { navController.navigate("details/1") }) {
            Text("Go to Details")
        }
        Button(onClick = { navController.navigate("settings") }) {
            Text("Go to Settings")
        }
    }
}

@Composable
fun DetailsScreen(itemId: String?, navController: NavController,  detailsViewModel: DetailsViewModel = viewModel()) {
    // ... display details based on itemId
    Button(onClick = { navController.navigateUp() }) {
        Text("Go Back")
    }
}

@Composable
fun SettingsScreen(navController: NavController, settingsViewModel: SettingsViewModel = viewModel()) {
    // ... display settings options
}

Key Concepts and Best Practices:

  • State Management: Use remember to cache values and mutableStateOf to manage mutable state.
  • Theming: Customize the appearance of your app with MaterialTheme.
  • Layout: Create flexible and responsive layouts using Column, Row, and other layout components.
  • Navigation: Use the NavHost and NavController to manage navigation between screens.
  • Performance Optimization: Employ techniques like LazyColumn, LazyRow, and remember to optimize performance.
  • Accessibility: Adhere to accessibility guidelines to make your app inclusive.

By following these guidelines and leveraging the power of Jetpack Compose and Navigation, you can create stunning, performant, and user-friendly Android apps.Sources and related content

Scroll to Top