Walkthrough/Onboarding Screen Shared Preferences - Part 3(B) - City Guide App - 2020

assalamualaikum my name is tae Moo Sikandar and welcome to the part 2 of onboarding screen and let's quickly run the application as in the part 2 we have created splash screen and now in the part 3 of the app city app we are currently in our onboarding screen and so far we have designed this onboarding slider and we also have designed this main screen with the let's get started button so in this tutorial we are going to hide this button and we'll see this button only at the last screen with some animations and then also we are going to add a skip button at the top and the main thing we are going to do is we are going to use the shared preferences so the user can only see these onboarding slides for the first time or for the one and only time not again and again so let's get started so the first thing I want to do is I want to remove that top status bar so to remove that status bar right get window dot set flags and right window manager dot layoutparams door flag full screen comma and copy this line and after the comma paste it again and the status bar will be gone ok the next thing we want to do is as we have reached to we've created the dots and in this function okay so open that own page change listener function and where we are where the page is selected so in here what we want to do is we want to hide the specific button which is the let's get started button and it's ID is get started button the first thing is we want to create its hopes let's get started button and in the hopes right let's get started is equal find view by ID or thought I did dot get started button okay next thing is go back to homepage selected and in here we are just okay right if the position is equal equal to zero as we have for so we will call it will be counted like zero one two and three so if the position is 0 else if the position is equal equal to one I am just going to write these all cases else if the position is equal equal to two and then in the else we have oh make yes that's it we have zero one two and the last one is free so alt control added to align the code okay what if the position is zero we do not want to show that button so the button is let's get started dot set visibility you can write the gone-gone will also remove the space so set invisible u dot invisible copy this one and paste paste walk in here at the else we don't want to hide that button but we want to make it visible and make sure by default it should be hidden so go the button and search for the visibility and it will be invisible you can see it is taking its place but it is not visible okay so let's run that education okay as you can see our status bar is gone and we cannot see a button over here and the second third and when we move to over the last slide or the position three our bottom is appeared when we change it our button is gone so it is not looking perfect so what we want to do we want to add some animations to this button so it looks smoothly coming and gone using animations so let's do that for here to add the animation first of all we need to create the animation and go to any folder we already created the animation with slide an image side animation and the bottom animation so we are going to use the bottom animation you can get the code link is in the description so you just have to create a translate from Y Delta from X Delta and duration then alpha is basically for fading effect so once you have to create the any folder go to the resource right-click new and create a new directory and name it enemy make sure it should be small everything is small inside this resource and then we have to create right-click new and create a new animation source for and then you have to paste that code inside it so it's that simple so now we are going to use this animation in here so to use the animation first of all we need to create a variable animation type variable and simply name it animation and let's go back to where it is if you want to shut the animation so we want to set the animation when it when it is visible so first of all to use the animation right animation is equal to animation utils dot load animation and in here we need to pause we want to load this this and then our dot go to the any folder dot we want to use bottom animation that's it okay we are in the function so we need to write onboarding or this okay once we called over any mission then we can set that animation on the button let's get started dot set animation and pause the animation in it so let's run it again okay change it to third and fourth you can see basically we have called the side animation maybe and you can see it is coming from the side to its current position so you can change to any animation you want so currently it is coming from the left side so the next thing we want to do is want to add a button over at the top at the top right corner and we also want to make sure that this little dot should be clickable so to add the button go to the design and in here where you can see we have a viewpager but after this view pager we want to create a button with wrap content and it's text will be skip we have already used the skip button text okay then we want to assign its ID and ID will be skip button okay as we are in the constraint layout so the first thing is go to the design and there is a button it is not appearing because it went inside the slider but we want to make it inside the constraint layout so place it outside the constant layout and here is our button so to make it at the right side what I want to do is again go to the split view okay in here search for this button and I did absolute we want to make it button at the right side okay search for 2 to n of parent and also to talk of parent it's not the start it's 2 and off but constraint end of 2 and off make sure it's constraint and to end off and constraint talk to top of its parent so we have just assigned it or deal and also we want to make it a little lower from the sides so there try it bedding 10 DP and also we want to make a transparent so background will again be the same way 8 zeros and the background is born so if you want to use an icon like I have used over here so for that go to drawable right-click new and click on the vector asset click on this clipboard icon and search for the I can maybe this one or maybe this one click OK and name it skip I can click Next and click on this finish button ok to add the bottom white drawable because I want to add the button at the end so it's skip icon so you can see we have that icon with a skip written over there and it has an ID skip icon drawable and it's just a warning and it's it is saying that drawable and but also use drawable right-click on this bulb and use the drawable right as well ok the error is gone so the next thing is what we want to do is if user click on this button we want to do is we want to jump to our dashboard screen and also when the user click on this button we want to change the slides so this says the next button ID and then it is a skip button okay go back to the Java file and in here in the oncreate method the one way is we manually write all this all these functions and the other way around is close these functions and after the oncreate we can create a method it should be public because we want to access it outside the class public void skip function and it should contain a view then we need another function which is public void next and it will also be having a view here okay we have created two functions skip and next go back to the design and inside the Skip we just form click and we have two functions in our solution this one is skip function and for this one against us for on click and this one is the next function so we simply call these functions from here go back to the Java class and you can see now they are in use so if the skip button is clicked we simply write start activity and in the create a new intent and pass get application context and we want to go we want to go to the user dashboard class dot this so that's it we have called this activity and what is the error okay sorry we need to write the class were here not this so we just called the next activity when the user click on the skip button so for the next button when the user clicks on the next button what we want to do is we want to jump to the next screen as for that we need to have the current position so to get the current position right into a variable in current position and we are going to get this current position from this on page selected so just enough initialize here current position is equal to position that's it and jump back over here when the user click on the next button what we want to do is we want to move this view pager so right viewpager dot set current item the current item as we have declared the variable which is the current position plus one so this means just move or just set its current item which is the current position plus one so that's it for the next button and also for the skip button so let's run our application okay as you can see we have a skip button at the top but we are not going to skip it but when we click on the button at the below we are changing our activity and then we are at the last activity and you can see we have a button appear and we also have a skip button so when we click on the skip button we have reached our dashboard so when I am going to go back so we are going back to our this activity but we don't want to do this so for that we need to use shared preferences so let's quickly start with the shared preferences also when we are going to call the next activity you're going to the user dashboard make sure you write finish this will seem to destroy the activity not coming back to this active so that's it for this code no what we want to do is want to check if the user is using for the first time or for again and again so the first thing is we have to call the splash screen at any condition so when first splash screen will be launched after 5 seconds it should check that either the user is new if the user is new show them onboarding screen if the user is not new and do not show them and simply jump to the user dashboard so for that we first have to create the shared preferences variable it is very simple so you just have to create a variable at the top of splash screen share preferences and name it shared preferences then we need to use this shear preferences inside this new handler so the first thing is shear preferences is equal to get sheared preferences and inside we have to pass two things the first one is the name and then its mod so the name I am going to give to this shear preferences is onboarding screen and also let me please change this variable as well to onboarding screen it has no relations with this string so do not confuse it with this one but I am just want you guys to do not confuse with the shared preference so this one if we can use as many shared preferences we want but this one we are going to use is specifically for the onboarding screen that's why I named it like that and then the mod will be private a more private ok that's it we have just created a variable you can say a variable or a reference of onboarding screen which has a more private and string on boarding screen so in the whole application when we want to use variables of onboarding screen the variables we are going to create just in a minute so we just have to first call the on word screen and then we can use all the variables of this onboarding screen okay first thing we want to check is let's create a boolean not a string type yeah is first time is equal to onboarding screen dot get boolean and we are going to name it first time then make it true yeah that's it so for the first time and the user come to our application the compiler will going to create the shared preferences with the name of onboarding screen and then it is going to get the boolean of type first time as we haven't created yet so obviously there is no variable with the name of first time so by default it is going to create that first time and set true in it if there is the variable with the name of first time already inside this onboarding screen shared preferences then it is not going to set the true but get the value of that specific boolean and set it inside it in this is first time so if if the user is coming for the first time so let's say is first time means true if this is the first time of the user we simply want to let the user go to the onboarding screen and start that activity and finish that's it and also for the first time and the user is using for the first time and and is going to the onboarding so that's it we don't want to allow the user to watch that onboarding screen again so for that we are going to use the editor so write shared preferences dot editor and a name it editor is equal to on boarding screen the odd at it we are just letting the shared preferences to edit all its variables then call editor dot put boolean and the boolean we are going to assign is same as we are getting so copy this one and paste it here so this time it will be false and do not forget to make enter dot commit it is just going to commit all the changes just happen here and close it then it will simply call this on products screen if it is the first time of the user in the else we want to call if the user is not on the first time then we simply copy the intent and not going to the onboarding screen but directed user to user dashboard okay so that's it for this code so let's run the application ok so as you can see for the first time we have directed to our onboarding screen and our onboarding screen is working as it should be press on the skip button and we are in the dashboard so when we are going to press the back button our application simply closes instead of going to the onboarding screen or going to the splash screen so let's run it again and this time you can see instead of going to the onboarding screen As I am going to login the second time we're going to use the second time so it is not letting me going back to the on verdict screen but we are in the dashboard so that's it for this tutorial and also for the previous tutorial if you run something new please like these tutorials and if you are new to the channel please subscribe thank you for watching you can also get the core down below in the link so thank you for watching take care a la vez

Channel: Coding With Tea

Views: 16,948

Keywords: onboarding, onboarding screen android studio, onboarding ui, animation in android studio, animation android studio, onboarding android studio, lottie animation, android onboarding, android onboarding screen, onboarding screen, onboarding screen android studio java, onboarding android, android studio ui design, sharedpreferences in android studio, sharedpreferences in android, sharedpreferences, android viewpager, viewpager in android studio, android image slider

Id: aitFkLdHr3o

Length: 22min 18sec (1338 seconds)

Published: Mon Mar 09 2020