Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

 

Android Jetpack Compose: Navigation

 

 
Sergio Belda
Software Engineer & UI Designer https://sergiobelda.dev Valencia • Spain
Published: December 01, 2020
Tweet
Share
 

 

The navigation component in Jetpack Compose helps you navigate between composables and take advantage of the features it provides.

 

dependencies {
    def nav_compose_version = "1.0.0-alpha02"
    implementation "androidx.navigation:navigation-compose:$nav_compose_version"
}

 

NavController

The NavController keeps track of the back stack of composables and the state of each one. It is also stateful which means that can directly change or mutate state.

We must create it in the place where composable hierarchy is specified so that all composables that need to reference it can access it.

To create a NavController we can use rememberNavController():

 

@Composable
fun ToDometerApp() {
    val navController = rememberNavController()
    ...

 

NavHost

The NavController created must be associated with a NavHost composable. Inside the NavHost you specify the composables that you should be able to navigate to. To construct the navigation graph inside the NavHost we can use the Navigation Kotlin DSL. Using the composable method we specify the route of destination and the composable related to the destination.

 

 

Navigate

To navigate to a destination, we use navigate() method which takes a String parameter that represents the destination’s route.

 

navController.navigate("addProject")

 

To return to the previous composable we simply call popBackStack().

 

Passing arguments between destinations

We can also pass data between destinations by defining placeholders in the composable route, in the same way that we specify path placeholders in a URL.

 

composable("route/{navArg}")

 

 

We can specify the type of argument by passing the NavType to typeparameter in navArgument function, because by default all arguments are parsed as strings.

 

 

navController.navigate("taskDetail/1")

 

We can also specify optional arguments by using the following syntax 
?navArg={navArg}. We also must set a default value or set nullability to true using defaultValue and nullable parameters.

 

 

navController.navigate("taskDetail/?taskId=") 
// taskId argument = "task1" default value

 

 

navController.navigate("taskDetail/?taskId=") 
// taskId argument = null

 

Code

 

 

 

Documentation

https://developer.android.com/jetpack/compose/navigation

 

Repository

 

serbelga/ToDometer_Compose

✅ A meter to-do list built with Android Jetpack (Room, ViewModel, Compose...), Kotlin Coroutines, Dagger Hilt…

github.com

 

 

Tags: Jetpack Compose, Android, Navigation, Android App Development, AndroidDev

 

View original article at: 


 

Originally published: November 14, 2020

Android News
Compose CameraX on Android
Compose CameraX on Android

By Peng Jiang

Android new UI toolkit Jetpack compose is in beta now, which has all the features you need to build production-ready apps. CameraX is another Jetpack support library, which let you control the camera easier. As compose is still under development, lots of the views are still not available the compose way.

By ProAndroidDev -
Android News
Getting… your BottomSheetScaffold working on Jetpack Compose Beta 03
Getting… your BottomSheetScaffold working on Jetpack Compose Beta 03

By Carlos Mota

It’s Monday, no releases this week, and… there’s a new version of Jetpack Compose — beta 03—available. What a perfect time to just increment 02 to 03 and see what’s new. The API is (almost) final so after updating from alpha to beta there weren’t any big changes to do. However, and remember that’s still in development, there’s always something that I need to update. 

By ProAndroidDev -
Android News
Noisy Code With Kotlin Scopes
Noisy Code With Kotlin Scopes

By Chetan Gupta

Scopes make your code more readable? think again... You are going to encounter these scope functions namely let, run, apply, also, within every Kotlin codebase, along with all the mischievous ways developers exploit their usage from the way they were intended for. Let see how popular opinion on those ends up just as a code noise.

By ProAndroidDev -
Android News
Improving Android DataBinding with Bindables library
Improving Android DataBinding with Bindables library

By Jaewoong Eum

DataBinding is one of the most important factors for MVVM architecture. The basic concept of DataBinding is to link the view and view model via observer patterns, properties, event callbacks, etc. Linking and automating communication between the view via the bound properties or something in the view model has a lot of benefits in the MVVM architecture concept.

By ProAndroidDev -
droidcon News

Tech Showcases,

Developer Resources &

Partners

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One