How to Navigate Back With a Result in Jetpack Compose

hey guys and welcome back to a new video in this quick video I want to show you how you can navigate back with a result in Android so very often we have the problem that we need to navigate through another screen which we can do with this button click here for example and then enter some kind of data on that other screen and when we then click apply OK or whatever we want to take that data from the second screen and transfer to the first screen so we enter something here like Hello World and click apply then we get back to the previous screen while keeping the text that we entered on the on the second screen I want to show you how you can achieve this type of behavior in Jetpack compose but one more thing I will host a completely free live workshop for all Freelancers among you or those who want to become one and the topic will be how you find the right clients as a mobile development freelancer so I will share all my strategies in that light Workshop how I managed to get to a point where I don't actively need to look for clients anymore because they all knock on my door the workshop will be on June 11th at 3 pm UTC time so convert that to your time zone and really make sure to attend because there won't be any recording so if freelancing is interesting to you then save your free spot by clicking the first link at this video's description so I am in an empty Android Studio project I just added the single navigation dependency here so we have access to the nav host to be able to implement navigation of course but other than that this is a completely blank project I want to remove this initial service code here and instead create our very first nav host for that we need enough controller which is equal to remember nav controller and we then pass this to enough hostels on the nav host we just Define all of our different screens and destinations we have in our app so let's take this and pass our nav controller and ourselves the graph we want to pass an initial start destination which in this case let's just call it screen one for Simplicity also we factor or rearrange this a little bit and in here in the naphthos We Now define the different screens we have on the one hand that is a composable called screen one which is our initial screen on the other hand we have our screen 2 where we navigate to so also open this block here let's quickly Implement our little UI we have here so for screen one this is just a column the modifier is modifier filmax size and in this column we just have our text composer but we only want to show that if we get a result from the second screen so let's ignore that for now because we don't have that yet but rather start with our button when we click that we want to get to our second screen so we say nav controller dot navigate and we want to get to screen two and the text of our button will be something like go to screen 2. on our second screen screen number two we also want to have a column modifier filmic size but here we want to have an outline text field so just a text field where we can enter some text the value of this will need to be some form of state which we can Define here so VAR text if I remember just use this overload here for example we don't need a key and in here we say we have a mutable state of an empty string by default let's hit Alt Enter on remember and for some reason it doesn't recognize this to to import it let's scroll up and go to import duplicate this composer runtime import if you also have this problem and replace this with a set value and get value and then we will also have the import for that I don't know why Android Studio has this bucket that it doesn't suggest to Auto Import that but now it works and is recognized okay so for this outline text field we will pass our text state and when the value changes when the text changes we just update this text with it so with the new text and I want to give this text field with of 300 DP so we have some space to enter something it gives us an error here because um we need this experimental annotation let's add this to oncreate and then let's simply add a button below when we click this we now want to get back to the previous screen let's call this apply so how do we now get back to the previous screen and take this result so the text here whatever we entered in the text field to the previous screen so we can show it there first of all if we are on a screen and we want to get back to the previous screen we usually want to do that by just popping uh the current screen from the back stack so we say navcontroller.pot backstack but right now we still don't have the result from from the second screen on the first screen to achieve that we can use the nav controller and refer to the previous backstack entry so if we are on screen two then screen 2 is the current backstack entry and the previous backstack entry is just yeah the previous screen in this case so screen one and we can refer to this backstack entry and pass some values to its safe State handle so we can say question mark dot saved State handle which is just uh yeah kind of a class that holds some data which will be also restored after a screen rotation after process death and this is also what Android or the navigation framework actually uses to pass data from one screen to another screen so all that really happens if you have a navigation argument is that value will be passed inside of this Save State handle the Save State handle will be passed to the next screen and then it will be retrieved there and we will now make use of the exact same mechanism just that we refer to the previous Save State handle so we can say that set to set a certain value the key of that is let's say my text doesn't really matter as long as you use a unique key and you use the same key to access it on the first screen and the value is done simply is our text and if we then scroll up to our screen one you can see here we get access to the nav backstack entry so this is the backstack entry off screen one which now has the Save State handle which we manipulated from screen 2. so if we go here and we say we want to get our text then we can say that's equal to entry dot safe State handle it doesn't get and we're going to get a string here and the key of that string is simply my text again and if that text exists so if there is a string we passed we can check that here that alert then we want to show our additional text here that just shows our text and it's really that easy so if we Now launch this on our emulator take a look here there's of course still at the old app that I showed you before there we go my app launched we can click on go to screen 2. here we can enter something like hello everyone click apply we get back and we see our string hello everyone if we do that again we can of course also use different things hello world click apply and then we see Hello World so we just overwrite it uh this value so thanks for watching I hope you'll learn something new and I will see you back in the next video have an amazing rest of your week bye bye thank you

Channel: Philipp Lackner

Views: 17,616

Keywords:

Id: NhoV78E6yWo

Length: 7min 36sec (456 seconds)

Published: Sun Jun 04 2023