ViewPager2 with Navigation Component - Onboarding Screens | Android Studio Tutorial

hello there and welcome back to my new video so in this video I want to show you how to use a viewpager to with a navigation component so we're going to create onboarding screens for our application and basically onboarding screens are shown only the first time when the user runs the application so let's create create a new fragment here first and this fragment will represent a splash screen so let's name this fragment splash fragment click finish ok and from here we're going to remove basically everything because we don't need that we just we're going to just leave this on create view method okay and that's fine so now let's change the splash fragment layout let's first delete this text view and I'm going to add the background attribute and I'm going to link background for this splash screen which I have already added and as you can see this is how our splash screen splash screen will look like so now inside our main activity we want to okay so first let's create navigation graph ok and let's name this navigation graph my nav and in Rosewood you will prompt you to add the navigation component dependency just click yes ok and now click this new destination button and let's add this splash fragment here inside our navigation ref okay so our splash fragment will be the default and start destination so let's add the nav host fragment to our activity main layout and as you can see our splash fragment is shown here because it is a start destination so that's fine let's run our application just to see how we'll look like ok so we just want to remove this action bar so in main activity just use a support action bar dot hide and that will hide the action bar ok so now that's fine and the next thing we want to create a new package and we're going to name this package onboarding okay so in this package first we want to create a view pager fragment which will hold our view pager ok so let's select a blank fragment ok let's rename this to view pager fragment so this view pager fragment will contain only a view pager so first let's remove everything from our viewpager fragment we don't need any of those codes we are going to just leave the oncreate method as before so let's open up here and let's change the route layout to constraint layout let's remove this default text view and let's search for a view pager here so Android studio will automatically prompt you to add the dependency for you just click OK and everything will be added for you so let's select this new pager and let's connect those constraints vertically and horizontally as well so this view pager will have the width and height to match the parent ok so that's fine and next we're going to create another class which will be named the view pager adapter so this will be class for our view pager and let's okay let's extend this class with fragment state pager sorry a fragment state adapter and just click hold the + enter to import this class and we need to pass two arguments here so the first argument is a fragment manager and the second one is a lifecycle okay so let's pass those two arguments here and we need to implement two methods to override two methods so get item count and create fragment so let's reformat the code just a little bit okay and we need to add the one more argument which will be array list and this ArrayList will hold a fragments so those fragments will be actually our onboarding screens and let's here create this fragment list variable okay and here we are going to return the fragment with size and in create fragment we want to return a fragment list position so we're going to return this position dynamically okay and that's basically it for our view pager - for an adapter so in the view pager fragment now we're going to just store this inflator in a view variable and we're going to return this view so next and we're going to create a fragment list which will be basically ArrayList of fragments and here we want to basically pass our fragments so first let's create them and to do that let's create a new package so we can organize this code just a little bit so it's name these screens and inside this package we want to create three fragments which will represent three screens for our onboarding navigation okay so let's basically remove everything from this fragment we don't need that we're going to just leave this one create view method okay and I'm going to speed up this video just a little bit so I can create those those two more screens for onboarding and I can just change the layout a little bit so let me just close everything from here and basically each our onboarding screen will contain the image view will contain title and description of course so the description will be some lorem ipsum text and we're going to also have a button or text view which will represent a button and it will say is next so we can navigate to our next onboarding screen okay something like that so all this project will be available for you to download during the video description don't worry and next I'm going to create a second screen for our onboarding I'm going to just copy this layout from the previous screen and I'm going to just change the image view and title next the third screen okay I'm going to just copy this from the previous and just change the image view the title okay alright so we have created those three screens for our onboarding so let's open up a view pager fragment and here inside this fragment list which we created earlier we're going to pass those three screens so first screen second screen okay so I forgot to name this second screen properly so I'm going to rename that so refactor and rename and let's name that second screen click refactor okay and now let's pass this second screen and the third screen as well so this payment list will contain basically that three fragments which will represent our onboarding okay so down below we don't want we want to create adapter variable and we want to initialize view pager adapter and we need to pass three parameters here so the first parameter is fragment list the second one is support fragment manager and the third one is a life cycle okay so next let's use this okay so we forgot to add the ID for view pager so we need to add that now and now inside our view pager fragment we can reference this view pager through the view and we need to set the adapter to our newly created adapter so inside the navigation graph we need to add we need to add this fragment view pager and we need to connect splash fragment to our view pager fragment here alright so this view pager fragment will contain three screens which we created earlier for our onboarding and inside is splash fragment I just want to create a logic which will basically navigate our user from this splash fragment to the view pager fragment so I'm going to use the handler and it's method the post delay so basically we want to navigate our user to this view pager fragment after a few seconds and let's say three seconds for example so let's run our application to see how will that work as you can see after three seconds we are navigating to this view pager fragment and we can scroll those onboarding screens so we got an error and I think I know why so earlier when I imported those vector images for our onboarding screens I got an error so our third image view is problematic so I'm going to replace this third image view with a second image view so let's open up our fragment third screen and I'm going to replace this image view with the image view from our second screen instead okay because this vector was corrupted that's why we got the narrow so let's run our application again and everything should work fine so we can scroll through our onboarding screens easily as you can see everything works fine we just had the same image on our second in the third screen but that's not important and we want to change the text view to finish on our third screen so let's run out this app again okay after three seconds we should be navigated to this a view pager fragment so next next and we have a finish on our third screen okay and later we will implement the logic for all of this so for inside the first screen we want to set this inflator to view variable and we want to return this view and then we want to create onclicklistener for this and next textview okay so let's add this quick listener and here what we want to do we want to reference our view pager from the activity so that's why we need to add the activity to find the view by ID and here okay let's pass view pager actually this this should say view pager to instead of the view pager so be careful so view pager dot current item so when we click on our next text view we want to navigate our user from the first screen to the second screen so the number one is actually the second screen because the screens start from zero so as you can see when we click next we can see this second screen and that works fine okay so let's copy this code to our a second screen as well so we want to add basically onclicklistener for our second next textview okay just return to this view and in the middle just paste the code so we'll just change the ID so next two because that's the ID from our text view on the second screen and the change the current item to number two because that's actually a third screen so let's run our app to see if that will work so click next and next and it works okay and for the finish textview we want to implement a different logic now okay so let's again set this inflator inside the view variable and let's return this view and in the middle instead of this view pager and instead of this next I'm going to use a finish which is the idea of the third text view which has the name of finish and let's remove this view pager so instead let's first create a new destination here and let's create a home fragment so after user clicks finish we should navigate our user to home fragment okay and let's connect this view pager with home fragment and we're going to connect later this splash fragment to our home fragment but not for now we're going to do that later okay and here inside this third screen we want to add find view a fan find the nav controller and we want to navigate from our view pager fragment to our home fragment okay okay so next we want to create a function so basically we want to use the shared preferences object to save the value and let's name this function to onboarding finished so I'm going to use a live template for the trade preferences if you can't watch my tutorial about life template I highly suggest you to do that so here I'm going to pass the name for our shared preferences a file to onboarding and instead of string I want to use a put boolean so the name of this should be finished and the value should be set to true okay so when our user clicks finish textview we should call this method here and we want to save this value of finish to true inside our onboarding shared preferences file and now inside our splash fragment every time a user runs the app inside a splash fragment we want to check if this value is true and if it's true then we want to navigate our user not to view page or fragment but to home-fry mate instead so let's create this own body finish method here again let's use this live template okay and this time we're not going to save share preferences at this time we're going to just read the file so let's remove those last three lines of code and here we want to return a boolean so first let's add the boolean as a return type here and now let's return a shared pref dot get the boolean set the name of our key which is finished and the fourth value is set to false okay so every time a user launches the application in a splash fragment we want to check if this finished value is true or if it's a false so when the user first timer runs duplication the the value will be false okay so let's just copy this code two above if block as well so we're going to replace this first action with the new action but first we need to create a new action inside our navigation ref so let's go to this nav graph and let's connect the splash fragment to a home fragment okay and now we will be able to see this action so let's go to our splash moment and basically if onboarding finished is true then we want to navigate our user not to view pager fragment but to home fragment instead so that means that the user has already clicking the finish button and onboarding screens are completed so let's check out if everything works fine okay so after three seconds we are redirected here to view pager fragment and when we click finish we are navigated to this home fragment okay and now let's run the app again to see if now we are going to be able to redirect directly to our home fragment okay so we have an error basically where the code does not work as expected so I think I know what is the error so we forgot to add the name for our shared preferences a file which is onboarding so be sure to type the name correctly so now I think everything should work fine and when we run our application we should be navigated to this home fragment immediately and as you can see it works perfectly fine so onboarding screen is shown only the first time when the user runs the application and that's a good thing so I'm going to just remove this code from our home fragment and I'm going to edit this home fragment layout file I'm going to change this to constraint layout and I'm going to basically just add one text view which will say something like home so we can recognize this fragment better so let's change the text size and the text style and that's it okay so let's run our application to see how will that work so as you can see from splash screen we are navigated to our home fragment so everything works fine okay so when we remove our application and install this application for the first time you will see that we are going to be redirected to our view pager fragment which is a good thing so we go next and finish and when we run the app again you will see that we're going to be navigated to our home fragment instead this time okay so everything works fine so there is only one more thing which we should fix now and that is our back button so as you can see when I click back I get redirected to a splash screen which is a bad thing and we need to fix that so even when we uninstall this app and install this app again so let's check it out when we go to this onboarding screen when we go next next and finish so when we click back button we are navigated to this onboarding screen again so that's a bad thing so we're going to fix that by going to our navigation graph and we're going to select those arrows which represent an action and we want to set the pop-up to to splash Fryman this time so basically when we navigate from our splash fragment to a viewpager fragment we want to pop our splash event from the navigation back stack ok and we want to do the same thing for this second arrow so select this pop-up to splash fragment and check this pop-up to include it to true and this third arrow as well so this time we're going to select a viewpager fragment because we are popping a viewpager fragment from our navigation back stack and now everything should work perfectly fine so let's test it out again let's delete tap again and let's install that one more time now ok so splash screen then we have a onboarding screen and when we click back button as you can see our application exits ok and when we go next next and finish from our home fragment when we click back button we are not going to be able to redirect to our onboarding screens instead our application will exit so that's it everything works fine and as expected here thanks for watching please like this video if you find it helpful of course and see the next one

Channel: Stevdza-San

Views: 42,135

Rating: 4.9285712 out of 5

Keywords: viewpager, view, pager, viewpager2, with, and, nav, navigation, component, navhostfragment, navhost, fragment, onboarding, on, boarding, sceen, screens, android, studio, tutorial, how to, guide, intro, swipe, next, finish, launch, first time, first, time, user, app, application, destination, slide, walkthrough

Id: COZ3j8Dwlog

Length: 17min 41sec (1061 seconds)

Published: Sun Jun 14 2020