Onboarding with Jetpack Compose & NEW Splash API - Android Studio Tutorial

hi hello there and uh welcome back to my new video so in this video i am going to teach you how to implement onboarding process into your android application and you will learn how to implement the new splash api as well so before we start let me show you how this application will work okay so this is our application and here we have a three different onboarding pages we can go to a second and to a third page so after we reach the third page then this finish button will be visible and if we press this finish button then we are going to get navigated to our home screen which will mean that we have successfully completed our onboarding process and whenever we launch our application the next time [Music] we will be able to see this as a splash screen and after that our home screen which means that our welcome screen or our onboarding pages will no longer be visible because we have successfully completed the onboarding process so be sure to watch this video until the end if you want to learn how to implement this functionality in your application okay so now that you have seen how our actual final result will look like and now let's start with our project so i have already prepared some code for this project so we don't have to write all the stuff from scratch anyhow now let's check out the actual dependencies which we're going to need so the first one is a splash api and this is a newest splash api which we're going to use to actually implement a splash screen in our android application next we just have our navigation compose and then we have our pager and indicators which comes with our accompanies library and this accompanies library will allow us to implement those onboarding screens so you will see about that next we have a data storage preferences and with this library we will be able to save one simple boolean value which will indicate that we have finished our onboarding screens and this will basically allow us to display those onboarding screens only the first time a user installs the application and finally we have a dagger health library so now we can close that here i have also created this application class and annotated with this health android app notation because uh we are going to actually need depends injection for this project then in our android manifest file i have also specified that the same application class okay we can close that as well now uh this is our main activity so so here we have created the nav controller and we have called the one function name the setup nav graph which will allow us to actually set up our navigation graph now this is our screen holder class it contains only two screens a welcome screen which will hold those onboarding pages and our home screen next this is our navigation graph which contains this same function which we are calling from our main activity and that the function contains a nav host in which we have placed those two screens so here you can see that a start destination is our welcome screen which will display our onboarding pages however this star destination will be later used to dynamically pass this screen depending on that value which we retrieve from our data store preferences and you will see about that at the end of this video for now we can close this navigation graph as well let's open up our welcome screen now in our welcome screen you can see that i have already created some composable functions and the first composable function is a pager screen so this arpeggio screen will represent a one page from our onboarding screens and as you can see it contains just one image and the two text elements the first text element will be used as a title and the second one will be used as a description so here on this composable preview we can see those three different uh onboarding pages and each one of those contain one image and the two text elements okay now you can see that this pager screen composal function accepts one parameter which is an onboarding page so let's open up that uh seal class so you can check that out and this sealed class contains three common parameters the first one is a image drawable resource the second one is a title and the third one is description so this seal class contains the two different objects and each object represents a one page in our onboarding screen and as you can see here each object that contains a different kind of information so i have already prepared those drawable resources for those images as well so you don't have to worry about that the source code of this project will also be available for you to download on my github profile so no worries there okay now we can close this sale class as well and after this arpeggio screen we have one more composable function named the finish button so this finish button is just a simple button and it's wrapped inside this animated visibility composable function which will allow us to display this button only if a certain condition is satisfied and in this case the condition is this arpeggio state the current page which means that our finish button will be shown only if we are at our last onboarding page and our last onboarding page has an index value of number two because the first page starts with zero which basically means that our finish button will only be visible inside this third onboarding page right and of course after this finish button we have a three different preview composable functions where we are previewing each and every on-boarding page from our sale class and here in our welcome screen we are going to actually implement the logic we need to set up our onboarding screens now the last thing that i want to show you here is this home screen so this is just a basic home screen which has just one text element and we are going to be able to navigate to this home screen after we complete our onboarding screens so let's go back to our welcome screen so the first thing which we are going to do here uh we are going to create a new variable name the pages and then i'm going to add here a list off and i'm going to specify those three pages so onboarding page dot first onboarding page dot second and the onboarding page dot third there we go now below that i'm going to create one more variable pager state and i'm going to call here remember pedro state and after that we're going to add the one column in which we're going to place those onboarding screens onboarding indicators and our finish button so first let's add a column the column will have only one modifier a fill max size and then here inside let's add the horizontal uh pager for the account let's add number three because we're going to have a three different uh screens if you recall then after that let's specify the state so a pager state which we can pass here there we go and next i'm going to name this lambda position and down below let's call our pager screen composable function and let's pass here our pages and let's grab that item from this list dynamically by passing this position so as you recall our pager screen will actually contain those three elements like a image and those two text elements and inside this horizontal pager we will be able to scroll dozer pages dynamically by using this same composable function also one more thing so i'm going to add here alignment alignment.top now after that i'm going to add another uh composable function which comes with this accompanist library so horizontal uh pager indicator and this indicator will basically represent those three dots which will be displayed and animated whenever we move from uh one to another uh onboarding page right so the first parameter here is of course a pager state and i can add here uh one modifier for now so i can add here uh alignment dot center horizontally there you go and of course after that let's call our finish button so let's pass here that pedro state as well alright there you go so let's recap once again what we have done here in our welcome screen so you have already seen that we have created already this pager screen which holds all those information about each and every onboarding page then after that we have created here uh one list of uh onboarding pages and this list will contain three different onboarding pages now after that i have specified here a horizontal pager which will hold those three onboarding pages then below that i have specified a horizontal pager indicator which will represent those little circles which will be animated whenever we move from one to another onboarding page and finally finish button which will be visible only after we reach the final onboarding screen so now i think that we can try and run this application to see if those elements will actually be shown on our welcome screen okay so uh don't mind if those elements are not arranged in the way that they should let's just check if the functionality is actually working so as you can see we can move from one to another okay so there you go and if we check and move to our last onboarding page then we are going to see this finish button so only after we reach our last onboarding page only then this button will be shown otherwise it will be hidden so the next thing which i want to fix here i want to arrange those three elements here so that our horizontal pager can take uh the most out of this space and to achieve that i'm going to add here a modifier and i'm going to add here a the modifier so our horizontal pager should take a space of a 10 f while those other two elements down below like a horizontal page or indicator should take only one so here let's just add one f and here let's add the width of a 1f as well now let's run this application once again to see if that's going to work in the way we actually want okay perfect so now it looks even better there you go everything works fine and if you are wondering how you can change the color and the size of those uh horizontal pager indicators uh well very easily because this horizontal pager indicator composable function accepts parameters like active color inactive color indicator width uh height and spacing as well so you can basically change their color if you want it's up to you however in this video i'm not going to focus on customizing this component anymore the only thing that i want to do here now i want to add here one click listener for our finish button so whenever we click finish button we want to navigate to our home screen so let's call here navigate function and let's navigate to our screen.home dot route and we also need to call uh navcontroller.popbackstack so we can pop uh our previous welcome screen from the backstack so now let's run our app once again to check out if this one click will actually work the way we want so here i click finish button and there you go so now we have our home screen if we press our back button then our application will close because our welcome screen has been popped off of the backstack and now if i run this uh application once again then this onboarding screen will be shown all over again so how can we fix that well we are going to fix that by using our data store preference library to save one simple boolean value whenever we click this finish button so whenever we click this finish button we want to save one boolean value and persist that value in our application and whenever we launch our application we want to check that value every time and depending on whether that value is true or false we are going to navigate to either a welcome screen or a home screen so now we are going to implement that functionality as well let me just create here one new uh package name the data here i'm going to create a new kotlin class data store repository and here i'm going to just paste some code so basically i have just pasted here some code which will be used to save a data boolean value to our data store preference and read that the same value as well so if you're not familiar with the data store preference i have already made a video about using it and now that we have created that data store now i'm going to create a new package name the di and here we're going to create a new dependency injection or their health module so let's create here a main module i'm going to again paste here some code so here i'm basically describing how to provide an instance of this data store repository which we have created okay now let me just close that and that as well after that let's create here a new package named view model let's create our welcome view model for our welcome screen so welcome view model again i'm going to just paste here some code and this view model will hold only one function named the save onboarding state and this the same viewmodel is basically injecting this datastore repository so after we inject that repository then we're going to call it's a function save onboarding state so we can persist that a simple boolean value to our data store okay and now let's go back to our welcome screen uh here basically i'm going to initialize our welcome view model by using this health viewmodel composable function and now down below i'm going to scroll and inside this finish button on click listener i'm going to call uh actually here so a welcome viewmodel dot save onboarding state and here i'm going to pass through because whenever we press finish button then we are going to complete our onboarding process and that value will be persisted in our data store okay so now that we have created a way to persist that value and tell our android application that we have completed that onboarding process so now in our application we need to implement the logic to read that the same boolean value whenever we launch our application and that way decide whether to navigate our user to either welcome screen if this is the first time they are using this application or to navigate them directly to our home screen if they have already completed this onboarding process and to achieve that i'm going to create here a one more view model and this view model will be named as splash view model i'm going to also just paste here some code and then i'm going to explain okay so this splash viewmodel is also using that repository which we are injecting right now this splash review model will contain two different variables the first one will be named is loading so this is loading variable will be used for our splash screen to decide when we should close our splash screen and continue with our application and our start destination variable will be actually observed from our application and its value will be passed to our navigation graph directly so you will see about that and here you can see that we are reading that onboarding state boolean value which we have already saved by pressing that finish button so if its value is true it means that we have clicked that finish button and in that case our star destination needs to be home screen otherwise our start destination will be welcome screen because it would mean that we haven't completed our onboarding process so now the last thing which i want to do here i want to show you how to implement a splash screen using a new splash api so the first thing which you should do uh you should open up your themes.xml and here i have already declared a new style or a new theme so this new theme is called the custom splash screen theme and the important thing here to note is that its parent needs to be this splash screen a theme okay so here we have a four different attributes the first one is the color of our background the second one is the actual logo which i'm going to use for this splash screen the third one is the actual duration of this splash screen but you don't have to specify that if you don't want i guess and final one is this supposed splash screen theme which is our default application theme so after this splash screen is completed then we should just apply this a new theme which is our default onboarding compose so basically this attribute is telling us that we should replace this custom splash screen theme with our original theme after we finish our splash screen okay and now the last thing we need to replace our original theme so here uh inside this application and the activity uh element we need to replace this theme so our default one will be custom splash screen and only after we complete that splash screen only then we are going to use and apply this default one okay so after that close this uh xml file let's open up our main activity here the first thing i'm going to uh inject our splash viewmodel so let's uh use here latenit variable splash viewmodel there you go and now before this set content function i want to call one function install a splash screen and this function will of course implement that splash screen which we have defined in our application so next i'm going to call this a set keep on screen condition function and here inside we basically need to pass a one value so a boolean value and in this case i'm going to call a splashviewmodel.is loading dot value so here i'm going to add this exclamation mark so i can return the opposite value of this is loading and basically as you can see in our splash screen whenever our splash screen is initialized and that is whenever we open up our main activity then we are going to call our read onboarding state function and collect its value so if our value is completed and depending on that value we are going to set a different star destination value and after that we are setting this is loading value to false which means that after we collect that value then we are no longer going to display data splash screen and now inside this onboarding theme composable function i want to observe that the value from our view viewmodels so let's call here a screen value let's use a buy keyword so splash viewmodel.start destination let's import that okay and before we continue let's open up our navigation graph here let's add a new parameter so start a destination of a type of a string and that value will be passed dynamically to our nav host so let's go back here and let's pass that star destination from that variable which we are observing right so now let's run this application and let's test it out uh okay so now we have received here uh some error uh connected with our dagger health library so what i'm going to do here i'm going to just remove this hilt viewmodel annotation and then i'm going to run this application once again so that annotation was removed from our splash screen only and now let's run our application once again [Music] so there it is this is the splash screen and after we uh collect that value uh from our uh repository then we're going to set this is loading value to false and only then our splash screen will close so now let's go here and press this finish button now we are at our home screen so now when we have a press that finish button we have saved a boolean value true to our data store preferences and now let's run this step once again so we can see uh where should we get the navigator to and now we are navigated directly to our home screen so we don't see our welcome screen anymore because we have saved that value and we are reading that same value whenever we launch our application and if you recall in our splash view model our star destination will be home if this completed value is true and that value is currently true otherwise if that value is false then our star destination will be welcome screen so now you have seen how to easily implement onboarding screens using this useful accompanies library you have also seen how to implement the newest splash api into your project of course this project will be available on my github profile as always so i do hope that you have enjoyed watching this video and if you have then be sure to comment down below and like this video and see the next one [Music]

Channel: Stevdza-San

Views: 27,607

Keywords: onboarding, on boarding, screen, welcome, android, studio, app, kotlin, jetpack, compose, composable, accompanist, how to, guide, tutorial, development, indicator, circle, animation, anim, datastore, save, first time, launch, display, show, process, complete, completed, once, trigger

Id: 6dRwaXH2cYA

Length: 22min 8sec (1328 seconds)

Published: Fri Feb 25 2022