Developing a Complete Android Project in Jetpack Compose | Step-by-Step Tutorial

foreign [Music] [Music] welcome to Native mobile bits in today's video we are going to create one completely functional Android application with the help of Jetpack compose this is the application which we are going to develop so here in this screen we can take some input from user user can enter some basic details so let's say if user is entering his name and then we have the functionality to remove this Focus From the two places either we can click on this on the keyboard or if soft keyword is showing up we can select any one of the animal let's say we selected this cat so this animal card will be highlighted and this button will appear on the screen if you don't have any one of these details let's say we don't have the name this button will not be there on the screen but if we have failed both of these details perfectly so this button will be there and when we click on this it will take us to a new screen then we will come to this welcome screen here we will see one welcome message and we will see that what animal we love either we love cat or dog and based on our selected animal it will show us one random fact about that animal so if Pablo has selected that he is a cat lover application is showing us one cat fun fact if we go back and we choose that we love dogs and we go to the details screen it will just update that via radio glubber and it will show us one fact about dogs and we are going to implement this complete application step by step so please watch this video completely and please hit like share and subscribe button and please keep your support with the channel let's start coding this is the brand new project which I have just now created I am deleting all this composable function and default code Android Studio has created for us this is the initial state of our main activity this is the launcher activity we have for now and we need to set up the navigation inside our project because we want to go from screen a to screen V and there can be several screens so we are going to use jetpack compose navigation inside this project and I have seen that most of you have commented in our previous video that I want to know more about jetpack compose navigation how we have implemented the navigation inside our previous videos so I am going to show you how to implement jetpack compose navigation as well step by step inside this project and we will build this project once we set up the navigation then we will start coding different different screens and then we will move forward step by step so we are going to add this dependency navigation compose and we need to sync our project and then we can use this navigation compose dependency inside our project so in order to implement this navigation inside our jetpack compose project we need to deal with these three main component nav controller nav host and nav graph nav graph is kind of a component which will have access to all possible screens inside our project and nav host will be kind of a empty container where we could show all of these screens we have inside our nav graph and with the help of nav controller we will be able to navigate to different different screens and we can put these screens inside our nav host okay so now let's Implement these things inside our project okay so first we are going to write one composable we can just call it fun facts app okay we can Define this with the help of at the rate composable annotation we can Define one function fun facts app and this is going to be the main composable for our application all right now as this is the entry point for our application so we need to refine that which screen we should show and to Define all the possible screens and the starting point of our screens we need to Define one nav host okay so either we can Define the name host here or we can create a separate file but to keep it simple first let's define one nav host here okay we have this nav host we need to pass snap controller and start destination okay we need to also pass the Builder but for now we can remove it now we need to pass these parameters so we can Define one app controller variable first of all okay and we can use remember nav controller this one okay so with the help of this we can remember the last state of our navigation host okay so we can just make sure that what was the last screen we were showing on and all of those things so we are going to use this remember nap controller we can pass it here and for start destination we need to define the first screen we want to show inside our application okay so for now let's keep it as a empty string and we can just create one Lambda here and inside this we can pass all the composable screens we want to keep inside our application now we need to Define few screens first so that we can just put inside our navigation host so inside UI theme let's go inside and here let's define one folder screens basically I am keeping all of these things inside UI so now we have two folders inside UI package one screen and one is for theme inside screens let's define one Cortland file we can call it user input screen and let's keep it as a file and we can just call it as a composable function we can call it user input screen as of now we are now defining the inside content for these screens we will define those things later first we want to just Define the navigation host properly okay we need to Define one more screen let's call it welcome screen okay let's define with the help of composable function again now we have defined two screens composable function we will Define the inside content in a moment but for now we need to give some name to these screens right so we can Define one class or we can define a Singleton class let's call it routes and inside this Singleton class we can Define some constant for our user input screen and let's call it user input screen itself we can Define one for our welcome screen and let's name it as welcome screen itself now we have few constant defined for both of these screen let's come back to our main activity okay so in the star destination we can just use routes dot user input screen this is the entry point now we can Define some composable here basically if you want to add one screen inside our nav host so we need to Define this composable and we need to pass the route name and the arguments if you want to pass some data from one screen to another we can pass that with the help of this arguments okay so let's define first composable and let's give it name as routes dot user input screen okay this is the first composable we have defined and inside this what screen we need to show we can Define here okay so this is the first route and if some user want to come to this route so inside this we can Define what screen we want to show so where screen will be user input screen okay now similarly we can Define the second composable route and this will be our routes dot where welcome screen and we are going to define the second screen as the route presentation here okay so this is the nav host starting destination is user input screen so whenever our application will be launched this is starting destination will be shown so we will come to this route and inside this route we have this user input screen so whatever we will write here it will be shown as the starting point okay then we also have one route for the welcome screen we will Define the content for both of these screens in a minute okay so now if you want to simplify our main activity we can also take this navigation host code out of this file we can just Define it inside one another composable function to do that we can just create one file and let's call it fun facts navigation graph and we can Define it as a composable function we can Define one function here for this navigation graph and we can just take this code and put it here okay now this navigation graph is having all the things we need nav controller and our nav host we can just take this composable and Define inside our fun facts application okay so now this is looking little bit simplified right so this is the main activity then we have our fun facts app this is the main composable for our project then we have this navigation graph and this navigation graph is having all the screens we have as of now and the starting destination is also defined here let's define some basic functionality here so we can just try to use one surface composable and inside this let's use one modifier and we will just use fill maxed size okay so that it can take the entire space let's define one preview also here we can just use composable function we can just take this and Define user screen preview and inside this use the composable okay so that we can just see what kind of screen we are designing and how it is looking as of now okay so our preview is showing up in the right side now inside this let's add one text and we can just add some name let's say we add the route name itself so we can access from routes okay and it should show up inside the preview it's coming up let's make this as little bit more intuitive so we can just use modifier and we can just take the entire width with fill Max width okay and let's give some custom height as well so that it can help us when we set up some kind of clicks we can just import it and let's use this comma and we are good to go okay so this is the text composable we have as of now and we can just add the same thing inside our welcome screen as well we will of course change it but I just want to show you how we can navigate from one screen to another for the first step okay here we are going to use welcome screen and we can Define one preview for this as well welcome screen preview and inside this we can Define our welcome screen okay so now we will be having our composable preview here as well okay now we have very basic screens this user input and welcome screen and our starting point is user input so if we run our application the first screen will be shown as the user input screen okay and then if you want to navigate from this screen to welcome screen we can of course do that with the help of navigation controller as expected our first screen is showing up as the user input screen if you want to make this welcome screen as the starting destination we can just change it here and then our welcome screen will be showing up okay now if you want to navigate from one screen to another we can do that with the help of nav controller okay so the simplest step will be that we pass the nav controller to this screen user input screen and add this as a parameter okay so our nap controller is added as a parameter inside this screen and inside preview we can use remember nap controller like this okay so if you want to navigate to the welcome screen when we click on this so we can just add the nav controller.navigate method so let's say whenever we click anywhere inside this screen we want to navigate so we can just use this clickable and with the help of nav controller we can navigate to the next route which is our welcome screen okay let's run the application and let's see this in practice and then we will move towards the actual implementation of this project so our app is installed and initially as defined inside our navigation graph it is showing user input screen when we come inside user input screen and we click anywhere so we are navigating to the welcome screen so let's click it and yes our welcome screen is launched this way we can navigate in between different different composable which we have defined inside our navigation host okay so now let's try to modify these screens as per our project need and then let's proceed further inside our project implementation so as we can see that our user input screen is going to be like this the first screen so let's break down this screen into different different composables we can create to achieve this okay so first we have some kind of toe bar and this can be common in both of these screens right we have some kind of bold title text then we have this image logo at the right hand side right so this can be one first composable we can create and this composable can also be shared between these two screens right we have it here and here in the second screen as well then we can use one text component which can have some stylish text and this can also be shared in both of these screens right so this is going to be our second composable then we have this normal text so either we can create one text composable again we can just say description text component or we can also use normal text composable which is inbuilt inside jetpack compose right and after this we can have one text field component which can be used here for entering the username then we have the normal text we can utilize the same text composable if we have defined one for this description and we can utilize it here then we have these two images but the thing is these images are clickable and when we click on these images we want to show some kind of border here the selected border and we want to make sure one button appear at the bottom right and when we click on that button we navigate to the next screen so now let's start implementing all of these components so first let's start with this toe bar component so let's jump back to Android studio and let's start coding so inside our UI package we can create one file and we can call it components or let's call it app components okay this is going to be one file where we are going to implement all of these components which we can share across all of these screens right so first we are going to Define one composable let's call it top bar okay let's create one preview as well for this composable and we can just call it toe bar preview and inside this we can just access toe bar okay so that we can just see how it's looking while we are implementing this okay so as our screen is showing up this is going to be one horizontal block so we can just use one row composable here okay and this row is going to take one modifier why because we need to take the entire screen space so we can just take modifier Dot fill Max width so that our entire screen is taken and inside this Row the first thing we need to add is this text right so we can use the text composable which is inbuilt and for now let's add one static text hi there this one so for our preview first let's add one background so that we can just see how it's looking more clearly and now let's customize our text composable so we can see that it's bold color is black and the size is little bit more so first we can add one color for our text composable and we can access color dot black okay we can add some font size and let's add 24 SP we can import this so that our text will be little bit bigger and we can add font weight we can just use phone weight dot medium okay so that it's little bit boldish kind of thing we can see that our toe bar is updated right so now the next step is we need this image okay we need to add this at the right hand side so we have this image I can paste this inside drawable okay we have our Channel logo so now let's add this in the right hand side okay so to do that first let's add one image composable okay now we need to pass these values so we can just take this in the next line now for this painter we can use painter resource we can pass drawable with the ID so we can just pass logo we need to import this resource so we can just come here and import it and for Content description we can just add native mobile bits okay our Channel logo is a little bit bigger so we can customize its size with the help of modifier okay and we can just use modify dot size and let's give 80 DP we need to import this DP we can add one comma and then it will update the size of this image now we need to align this text and image in the center so we can customize our row and we can use vertical alignment and we can access alignment Dot Center vertically okay so all of the children inside this row will be aligned vertically center right so the next step is we need to put this image in the right hand side if we can see inside our design we have this logo at the right hand side so to do that we can just add one spacer and we can use modifier stored weight 1 F so basically what it will do is it will put this next element at the right hand side and in between it will put n of space okay so our preview is updating and we can see that it's updated as we need inside the design okay so now we have our toe bar ready so let's go to our first screen and this is the first screen we have as the star destination so inside this let's start designing this screen first so the user input screen this screen is going to have one surface okay and then we have the element inside vertical orientation we have the stop a bar then we have these components so let's design this so first let's add one surface we can just use one modifier with modified old fill Max size okay then we can just take one column composable because we need to define the element inside vertical orientation okay let's take this in the next line so that it looks little bit more clear and for column let's add one modifier again and we need to add modified old film exercise and if we check out the design so we have some kind of padding inside all of the directions right so we can use modifier dot padding and let's say we add 18 DP okay so that we have some kind of padding inside our entire screen so now the next step is we need to add the store bar so we can just access this store bar and it should reflect inside the preview so we can see that our user input screen is looking little bit like this bar now one another important thing to note here is our top bar can be shared in between these two screens so it will be wise that if we add this text value we want to set inside the store bar as a parameter right so let's refactor this dope a little bit and let's add value string as a parameter and inside this text let's use this value which we can pass from the place where we will use it now inside our user input screen we need to add this text hi there and one emoji okay so this Emoji can be added as a Unicode and we can add this text here hi there and this Unicode will be added as the Emoji right now we can see that our user input screen preview is updated now the next part is we need to design this text component and we can just minimize this preview and all of these components and we need to add one new composable and we will call it text component okay this will also take one text value as the input because we can use this in both screens so let's add the parameter here itself now let's look at the design ones right so we have this text color is same for both of these texts right but size is little bit different right so it will be great that if we can pass the size also as a parameter right so let's go back to a Vertex component let's add one more parameter text size and this will be of type text Unit okay now the next thing is color is almost black but in this case we can also utilize the same text component but here we'll be having some different color right so we can also add one color as the parameter and by default we can add one value color dot black okay so vertex component is having three parameter one text value text size and one color color is by default as black right now let's add one text composable here okay and by default the text will be text value we will have the font size here and we can just set text size for color we can just pass the color value let's make it color value so that we can differentiate and we can set some kind of font weight as well and let's make it light okay this is going to be our text component let's add one preview for us so that we can just understand how it's going to look like and inside this we can just add our text component so for default values we can just add some value here and let's call it native mobile bits and for text size let's say at 24 SP for preview background we can just add some default background so that it will look little bit clear okay so we can see that we have this text component preview ready for us so now we need to add this let's learn about you inside our user input screen okay so inside our user input screen we can just add one text component which we have designed just now and let's take this to the next line full text value we need to add let's learn about you okay and for text size we can just use 24 SP all right now it should reflect inside our preview based on the text component which we have designed right we can see that our preview is updated if we just zoom it little bit so we can just see that it's looking almost like our design right we have this tow bar design then we have this text component designed as well now the next thing is another text but only difference is the size is little bit smaller right so we can try to utilize the same text component okay we can just use this and for text value we need to add this app will prepare a Details page based on input provided by you okay so I have copied this I have added it here for text size we can just go ahead with 18 SP okay now let's try to refresh our preview and let's see how our app is going to looks like okay so by text is updating but we can see that there is some difference there is some space in between these two text right so for this we can add one spacer okay and we can just use modifier dot size and we can just add 20 DP okay so it will add 20 DB space between these two text okay we can see that our screen is updated now the next part is we need to add some space then we need to add one text field right so first let's add one space here again and this time we can just make it as 60 DP so that we will be having enough space right this is the empty space we have and here our text field will be coming up okay now the next thing is we need to design one component for this text field okay so let's go back to app components let's minimize everything and inside our app components file let's Design One new composable and let's call it text field component okay and let's Design One preview as well at the same time let's add so background true let's add this as a composable and let's take this text field component preview and inside this add our text field component now one thing to note here is our text field is having one outline right so we have either we can use this text field composable or we also have something called outline text field okay this is coming up by default with this outline now to hold this value either we can keep one variable here itself and we can modify that variable and we can set that variable as a text but we can also hold this as a state or inside a view model because we need to add one condition to show one button based on these value and the selection right so first let's add one viewmodor dependency this is the dependency we can add life cycle view model compose and we can sync the project okay our project is synced and now we are ready to add the view model so inside UI itself let's create one class and let's call it user input view model okay and let's extend it with viewmodel this is the normal view model which we have created and we will keep all the values of this user input screen inside this view model now inside our user input view model we need to Define one state for this screen so our user input screen can have two values at a time if user enter any name so we'll be having one name entered by user and we will be having one animal selected by the user at a given point of time right so let's create one data class okay and we can call it user input screen state okay this is going to have two things name entered okay and this is going to be a string let's create default value as empty and the second value we can have animal selected and this will also be of type string and by default we are keeping it as empty string okay this is going to be our state data class which will hold both of these field value okay so now our screen state is ready right so where the screen can have either name entered by user and animal selected by user we have both of these field inside our data class which is the state class now let's create one variable now let's create one variable and let's call it UI State and we can just use mutable state of and we can Define the class name user input screen State here okay so this is the default UI state for our screen okay this is our user input detail screen we have created one state we have created one state variable with the default value now we need to Define few events right so in compose if user takes some action like if user enters some name so we want to update the UI state right so the logic here will be that if user enter anything inside this name field we will need to update our UI State and to update our UI State we will need some kind of events defined so inside this screen If You observe this screen carefully we can have two events to update the UI State one event when user will enter any name so our UI state will update with the name value and whenever user will select one animal our UI state will again update with the respected animal selected so we need to Define this event class so we can just take one sealed class because there is only two event possibility here right so we can just call it user data UI events and this is going to be a seed class inside this the first event will be when whenever any user will enter any name so we can just call one data class username entered okay this will also have a name value of a string type we can just use as well keyword here and this will be of type data events okay this is the way we Define one sealed class so as there are only two possible UI events so the first one we have defined the second one will be selected and here also we'll have one animal value this will also be of type string and this event will also be of type user data UI events okay this is our event class if we want we can also Define this as a separate independent class we can also take both of these things out of our view model we can just Define one package first let's call it data and let's define this class first so we can just Define one code line class we will call it as a data class and let's take this code let's add it here okay we can just import it and for our sealed class as well we can just take inside data itself we can Define one sealed class and we can take this code out of view model okay so now we have our UI State class which is a data class it holds name entered any animal selected then we have the events class which is a shield class and these events will be used to update the UI State okay let's close both of these and just open our view model now inside our view model let's define one function on event and this one event function will be triggered whenever any action will be taken by the user inside this screen so if user enter any name or user select any animal so this function will be triggered so here we need to Define that this event can only be of type user data UI events okay and inside this we can add one when expression that if event is user data UI events dot name entered if name is entered by the user so we are going to update the state and if user data UI events dot animal selected then we are going to update the state only these two events can happen now whenever any user name entered event we will receive so we'll just access this UI State and we will update its value to update the value we just need to take the current UI state DOT value dot copy and we need to enter or update the name whatever we have received inside this event so to do that we will just access this named parameter named enter and with the help of event we will access the name okay so if you have observed carefully whenever this event will be triggered we will receive the name as well okay so that's what we are updating inside our UI State now whenever any animal is selected we will do the same thing we will update the value of our state and to update the value we need to just take value dot copy and we will pass the value for animal selected from the event okay like this we are updating our State value all right okay this is the initial state for our view model now let's go back to our main activity okay we have this navigation graph here now inside our first screen we need to pass this user view model now inside our navigation graph we can just access that view model so to access a view model inside composable we just need to use this function and we will be able to access our user input view model this we can add as a parameter inside our user input screen now inside our user input screen we are passing user input view model as a parameter now let's get back to the app components we were defining so inside our text field component we can use outline text field because we want to have some kind of outline surrounding our text value input by user now inside our text field we need to store the value entered by user somewhere so we need to keep on remembering that so we can Define one variable current value and we can use with the help of remember function here and inside this we can just keep mutable State and the default value will be empty string okay so I think this is node imported properly so we have this mutable state of so we need to just import set value and get value as well so that that error will be gone now we can see that error is gone so we can just use this in place of value and whenever own value is changing we will Define some functionality but before that let's see what the error we are getting so we need to import this experimental material 3 API now our text field component is showing up but now let's add other attributes so we need some kind of placeholder and this can take one Lambda and inside this we can add some text like enter your name and let's say we want to use font size as 18 SP okay we can see that our placeholder is updating but it's not taking the full space so we can just use modifier and with the help of modifier we can just say fill Max width so that our text field component will take the entire width of the screen okay now our placeholder size can be little bit smaller which is 18 SB that's fine but let's say we want to customize the text style and this text style will be applied to the text which user will enter okay so let's say we want to show placeholder as 18 SP but if user enter any proper name we want to update the size of that text right so we can use text style.default Dot copy and for font size we can just pass let's say 24 SP if user enter any text we want to highlight that value so we are using some bigger text here okay now inside own value change whenever user is entering any value we want to update our UI state right so to update our UI State we have defined these events right so whenever user will enter any value we need to trigger this event so that our UI State can have the updated name inside this variable so basically we need to call this function inside our view model okay okay now we have one basic person for our text field component so let's try to use this inside our user input screen okay let's add it here and it should reflect basically let's try to run our application and let's see how our screen is looking and how it's reacting okay so our screen is looking like this but if we try to enter anything it's not functioning right that's because inside our text field component we have node handled this own value chain function so now we need to handle this own value change so basically what we need to do here is we need to tell to its parent this parent is user input screen where we are using it we need to tell the parent that user has entered some value please update the UI State okay so to do that we can just Define one function let's say own text change one function we have defined and we will be passing name inside this and this will not return anything so we can just use as unit type so whenever this own value change will be triggered now we will just call this owned exchange Dot it it is basically the value entered by user okay now if we just go to the parent Declaration of this so we are having one error here that's because we have node handled this owned exchange function here okay so inside this we can just use own text change we can use one Lambda like this so now whenever user will enter anything we will get a callback inside own text chain okay so now we have the user input view model here what we need to do here is we need to call the function own event and inside one event we need to use this sealed class event username entered okay so inside one event we need to call user data UI events dot username entered and we need to pass the value which is it okay let me show you once again what we have done so we have designed one text field component this text field component is having outline text field and this text component is having one current value as a string state with the help of remember function and whenever own value change is getting triggered means whenever user is entering any text in the outline text field we are calling one high order function own text chain with the value entered by user this function is giving one callback to its parent inside user input screen as owned exchange with the value and here we are calling the function own event inside our view model to update this UI State okay and we are passing the name entered by user and our UI state will be updated now we have added this won't exchange higher order function which is triggering a callback in its parent which is user input screen but to update its value locally we also need to update this current value with it whatever is entered by user now if we try to run this our text field component will work as expected okay so our application is installed if we click here our keyword is showing up if we enter anything our value is updating here okay one another thing is we can just change the ime option here as done okay so to do that we just need to add we can use keyword options inside our text field component and inside our keyboard options we can just change the ime action with IMA action dot done so if we just see our ime action done is updating inside our emulator now one last thing here is let's say if you want to take any action when we click on this button right so we have this done button if you want to take any custom action when we click on this we can do that with the help of keyword actions and we can just use keyboard actions this Lambda and to clear the soft keyword first we need to access the local Focus manager so you can access local Focus manager we can create one variable with local Focus manager dot current okay now if we try to run our application so we will see this code also will work for us so if we click on this we can see that our ime action is showing us as done because we have implemented this keyboard option and if we take any actions from the keyword that means if we click on this ime button so it will clear the focus let's click here so we can see that focus is cleared and the soft keyword is also hidden okay so our outline text field is implemented but let's check our design once again so basically we need to show one name text as well so let's close all the tabs let's open user input screen okay and let's add one text component OK we have this text component already with us so for text value we just need to pass name and for text size we can just pass 18 SP okay so we can see that our name text is coming up we can add one spacer with some space in between and now it's looking much better okay so now we have the toe bar we have this title text we have this description text as well we have this name okay so now our screen is looking similar to the design we have now the next thing is we need to add what do you like but we need to add little bit more space I think double then this space so we can just use this spacer we can add it here with 20 DB so there will be some space then the next thing is we can just take text component we can add it here and we need to just change the text to what do you like okay so the next thing is we need to design this cat and dog card so first of all we need to add to driver I have these two images with me this is for the cat and the next one is for dog okay let's close the other tabs let's go to the component file let's minimize everything and we need to design one composable and we will call it animal card so this animal card will have the capability to show this cat and dog image with one card first thing first we need to use one card composable so let's use card and we need to add one modifier so first we need to add some padding we can also give some custom size so first let's add padding 24 DP and let's add size 130 DP okay let's minimize this and let's add one preview okay let's add one composable and let's call it animal called preview and inside this let's access animal card okay now let's open this so that if we have some preview we can see here so this is going to be the animal card component we are designing as of now now inside our card we are going to add one image composable and for painter let's add one painter resource and let's add one default image for now we'll change this for Content description we can just add animal image okay okay so our image is updating but our animal card preview is a little bit different there is some padding and all so first first let's try to add one modifier we can use this modifier dot padding and let's add 16 DB so that some padding will be there inside this card yes now it's little bit better okay now our card is having the similar padding which we have inside our design right we can also add some kind of brap content with and brap content height although it will be overrided with this size but let's keep it here okay now one another thing is we can see there is some kind of elevation so we can add inside our card we can use this card default stored card elevation and we can just pass 4dp now as we want to use this annual card in two places so we can just access this drawable ID as a image and this will be of type integer let's try to use this in place of ID okay and we can try to use this inside our user input screen okay so now we need to add these two animal cards with cat and dog image so we can just come to our user input screen we can add one row composable we can just take one modifier and basically we will access the full width of the screen with fill Max width okay and inside this we can just add animal card with image IC cat and another one with Doc let's see how our screen is looking after this preview gets updated we need to just rebuild it yes so we can see that our screen is updating and we can see that both of these animal cards are showing up okay now let's try to run the application on the emulator our app is running and I have pasted the design inside the studio just to see that how similar our design and implementation is looking like so this is the first screen we have we have this High there top bar then we have this and it's looking almost similar right if we enter any name here Tony it's updating and if we just click on this it's hiding now the next thing is we want to make sure that we are able to select one of these animals right so let's take this back now the next thing is we want to make sure that we are able to select one of these animals right so we need to go to this animal card now first thing is whenever we click on this we want to show some kind of green highlight right so to do that we cannot directly set on this card because there is one elevation right so inside this card we need to Define one box composable and we need to put this image inside box composable okay and all of the properties of this box composable we need to keep similar to this card so that it will look like one component itself so let's add one modifier and we need to use modified old fill Max size and we need to add one border and this border will be of 1dp and let's say we have one parameter coming to this that if it's selected or not we'll write this logic inside view model in a moment but for now let's say we are getting that if we are showing one animal card if it's selected or not so let's say we need to change this border color to Green based on the selected value okay so we can write condition like this that if selected border color will be colored green else color dot transparent okay like if it's selected then green color else no color will be there and we need to make sure that we are using the same shape inside our box composable so inside border we can add the shape attribute with same value now let's go to user input screen and let's pass cat as false endog as true okay we will change this logic but for now just to see how it's looking okay we are getting some error here so if we just go to the Declaration okay let's say we pass the default value inside the preview as well now if we try to run okay so as we are passing true in selected value for the dog card we can see that dog is selected right so first thing is whenever we select any of the image we need to update the UI state right so if you just go to the view model we have this UI state right we have this animal selected so we want to update this value whenever we click on any of these image how we can do that we need to trigger one event inside the view model and the event will be animal selected so whenever we click on any of this we will trigger one event okay so whenever we click on this image let's add one clickable okay so if we will click on this image we will just pass one high order function to its parent means to its user input screen and from here we will pass one higher order function to its parent screen which is user input screen so let's add one function here first animal selected okay this is one higher order function it will just take one animal name that what animal we have selected and this will return unit okay so now whenever someone will click on any of these images we will come inside this clickable and we need to trigger this animal selected function okay so we can just trigger this but we need to pass the value of the animal name right so how we can find out the animal name well we can Define one variable any one name so we are getting the image here right so we can just check that if image is equal to Ardo driver dot IC cat so animal name will be cat else it will be dog so we have written one condition that if we are clicking on this so we are matching the image that if we are clicking on the cat image the animal name is cat else it's dog okay and inside this animal selected we can just pass this animal name okay now if we go to its parent so we'll be having this error here so let's remove this selected first now inside this animal card let's take this animal selected function first animal selected and use this Lambda and let's add this animal selected in the second card as well now inside this animal selected we need to update the UI state with the help of this function right so we can access user input view model dot on event and we need to call the events so let's take user data UI events dot animal selected and we can pass the value which is it okay same thing we need to do inside the second card now we need to pass the value for this selected so the selected will be true that if we access the viewmodel state and animal selected is equal to cat then we need to pass true for this cat card and if selected value in state is dog then we need to pass true inside this dou card okay so basically what we have done is we have added one event in animal selected Lambda that means that whenever we will click on any of these images we will come inside this annual selected callback with the selected animal that annual value we are updating inside this state animal selected then we are checking the state we are checking the value inside animal selected is cat so we are passing true inside this card else we are passing through in this card when animal selected is equal to dog inside the state now let's run our application okay inside preview this error will be there we can just pass inside this now let's run the application again okay our application is installed now if we click on one of these images we can see that wherever we are clicking that animal is getting selected if you click on cat cat is selected if you click on dog dog is selected and how we can verify the state value right so whatever we are doing if it's happening correct or not so let's go to user input view model okay and whenever any event is happening let's add one log so first let's add one tag here or let's use companion object itself let's define one tag okay and let's use and let's use this user input view model itself now inside both of these events let's add one log okay so inside own event username entered we are printing that what is the value for the state right so we can just use so we can just print the value of the state and the same thing we can do inside the second event which is animal selected okay so our application is installed inside this search box let's add the tag which is our view model name here now let's try to hit this event username entered okay let's enter Tony okay we can see that our events are getting triggered whenever we are entering anything and we are getting this log as well okay username entered right now our state is this and state is having value for name entered an animal selected is empty as of now now let's click on this animal selection card so let's say we are selecting cat the moment we selected this our event is triggered animal selected we are coming inside this okay and now our state is having both of these value we have entered name as Tony and animal selected is cat the moment we click on this dog our state is updating to dog right if we remove this name so our state will be updated and we don't have any name as of now only the animal selected so now the next part is we want to show one button at the bottom which will take us to the next screen welcome screen but the logic is we need to show that button only when name is entered properly and one of the animal is selected okay so let's go back to the app components let's minimize this and let's add one composable and let's call it button component inside this let's use button okay so first thing first we need to update the look and feel of this button so let's say we are using modifier.fill Max width so that it is going to take the entire screen space in the width style and inside this let's use one text component which we have already designed right and for this let's add some text value go to details screen okay and for text size let's add 18 SP now let's say we Define one higher order function go to details screen and it's not taking anything it's returning unit okay so now we are going to use this inside our user input screen this is the row composable we had now we need to use this button component inside our user input screen okay so let's add it here and inside this we are going to use go to detail screen this higher order function okay so inside this button component we should be having so first let's try to run this and directly see inside the emulator we are not designing the preview this time okay so our button is coming up but let's try to modify it and let's try to add the color as well so we need white color okay we can see that our button is updating so the next thing is we want to put this button at the very bottom so we can use spacer and we can just use modifier we can use weight one F and as this is inside the column composable this one so it will put one space in between these things but we need to show this button only when the name is entered and the animal is selected right so how we can do that we have the viewmodel added here okay and inside view model we have the UI State UI state is having name entered and animal selected value so we can check these values if the value are proper then only we need to show this button so we can just come back to our user input screen and we can add the condition that if viewmodal dot UI State value dot name entered is node null or empty with this exclamation mark and if user input model load value dot animal selected is node null or empty okay if both of these conditions are true then only show this button or we can simplify this so we can just come to overview model we can add is valid state and this will return one Boolean okay so we can add if UI state DOT value dot name entered is note null or empty we can add this note symbol and if UI state DOT value dot animal selected is null or empty this also with node symbol that means if it's node null or empty that time state is valid so we can just add return true else return false and this will obviously be simplified like this okay then we can utilize this function in place of this condition check so we can just remove all of those things and we can write if view model dot is valid State then show this button okay else it will not be shown now let's try to run this okay so our application is installed and we cannot see the button at first but when we entered some proper name and we select this then we select one animal so we can see that the moment we have selected the animal and entered the name so our state is valid and we can see the go to detailed screen button if we remove the name that means our state is not valid that button is disappeared but the moment we enter any name our button is shown okay but one thing I want to do here is that if we select the animal this should be disappeared this soft keyboard right so we can do that with the help of this animal card so what we need to do inside this is we just need to get access to this local Focus manager we need to add it here and inside click inside this image click we will just use localfocus manager Dot clear Focus okay so now if our soft keyword is shown and we click on the animal our keyboard is disappeared okay so this is much better if we enter any name here again so now our soft keyword can be disappeared from two places one from our image animal image click another one is if we just come inside text field component so if we just take this keyboard action that means if we click here on the ime button it will be disappeared like this right or from here okay now the next thing is we need to click on this go to derails screen and it will take us to the next screen okay so how we can do that let's close everything let's come inside user input screen okay this place so whenever we click on this we are getting callback inside go to details screen so first let's add one print statement here that are we coming here or not okay and inside this we can write coming here and let's print the values we have as of now so we can just access UI state DOT value dot name entered and animal selected okay let's run the application now so if we click on this we are not getting any call back because we have node called this higher order function from this one click so we can just call this function here and now if we run it so let's enter some name let's select this our button is appeared if we click we are getting this callback okay if we remove this we will be having both of these logs okay so we are having the username enter and the animal selected okay now the next part is we need to click on this button and we need to go to the second screen right so we have these designs we need to go to this screen first of all we need to design this screen we need to create some custom component for this screen like we have this quotation component and we need to link both of these screens so now to implement navigation we have two different ways either we can pass the nav controller as a parameter or we can write a high order function to its parent so that's the separate thing and I want to focus completely on that in the next part of this video so that's it for today's video we will implement the rest of this application in the next part if you have enjoyed this video please like share and subscribe to my channel I will see you in the next video please support the channel stay happy [Music] foreign [Music]

Channel: Native Mobile Bits

Views: 19,129

Keywords: JetpackComposeTutorial, AndroidAppDevelopment, Full Project in Android, Android Complete Project 2023, Complete Android App Development Tutorial, AppDevelopmentTutorial, AndroidDevelopmentTips, AndroidStudio, AndroidJetpack, Jetpack compose tutorials for beginners, how to learn jetpack compose, Jetpack Components Android, Jetpack Compose Navigation Android Kotlin

Id: dEEyZkZekvI

Length: 72min 19sec (4339 seconds)

Published: Sat Sep 02 2023