Understanding and Implementing Navigation Components Jetpack Compose in Application | Part 1

Photo by Heidi Fin on Unsplash

Hello everyone, this is my first time writing an article on this platform. As I have recently become interested in learning Jetpack Compose, and the journey is begin. I am attempting to document what I have learned.

Introduction

Jetpack Compose is a modern toolkit for building Android user interfaces (UI). Jetpack Compose simplifies UI development by using a declarative approach to UI design. Navigation is crucial in mobile applications, and Jetpack Compose provides an easy-to-use navigation library. Let’s Go!!!

Navigation in Jetpack Compose

The Jetpack Compose Navigation Component is part of Navigation in Android. This component makes it easy for developers to navigate between screens in an application.

To perform screen navigation, the NavController component is required. NavController is the central component when using Navigation in Compose. Its function is to track previous composable data entries, move the stack forward, enable manipulation of previous data, and navigate between destination states. NavController should be created as the first step in setting up Navigation Compose because it is the center of navigation. To create a NavController object that is remembered during recompositions, use rememberNavController.

...
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComicsLibraryTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val navController = rememberNavController()
                    CharactersScaffold(navController=navController)
                    
                }
            }
        }
    }
}

@Composable
fun CharactersScaffold(navController: NavHostController){
   val scaffoldState = rememberScaffoldState()
    
    Scaffold(scaffoldState = scaffoldState, bottomBar = { CharacterBottomNav(navController = navController)}) { _ ->
        NavHost(navController = navController,startDestination = Destination.Library.route){
           ...
//destination screen..
        }
    }
}
...

Conclusion

The Navigation Component in Jetpack Compose provides an easy way to handle screen navigation within the application we create. By simplifying the UI development process, it is easier to create complex UIs.

Ok Guys... In this post, I have only introduced the Navigation Component and the composition function used to implement navigation in Jetpack Compose. In the next post, I will explain how to implement Navigation Components in a project. Stay tuned!!

“You don’t have to be great to start, but you have to start to be great.” — Zig Ziglar

source :
Android Developers Official