Walkthrough/Onboarding Screen Design - Part 3(A) - City Guide App - 2020

assalamualaikum my name is the MU Sikandar and today we are going to create our next video of shittaka deprecation which is the onboarding screen as you can see we have created our overview video then we have created our basic setup of android studio then ever you created our splash screen and now today we are going to create our own boarding screen which is the third video apart from the overview video so in this onboarding screen let me show you what we are going to create so as you can see on your screen and the splash screen appears this splash screen is we have created in the previous video so when the first time user logged in or the when the first time user open its application and he will see after the splash screen and onboarding screen you can see we have an image heading and then text then we have a skip button at the top and then we have a bottom button simple arrow and then we have dots sliders over here we can slide it with the hand and when you reach at the last light a button with some slides with some animations using some animations appeared when you go back then button will disappear so this is what we are going to create when we going to skip it and we move to the dashboard screen so let me close this one and run it again so when we run it again splash screen appears as you youo and then dashboard is appeared instead of onboarding screen so this is what we are going to create so let's get started ok open the project as you can see we have created a splash screen in a world part 2 so for this petróleo first of all we need to add the strings in our project so go to the resources values and open the strings wrote XML and as you can see I have already added the titles and descriptions and the buttons strings we have used in our onboarding screen then I have to use the images so we have to add images in the drawable and I already added images like I told you we are using 3.6 which is the latest version and it it is not sporting the best reliable imported plug-in to import images so if you don't know how to do that you can check the video link is in the description it is the part one of our city guide app ok after we have added the images and strings go to the Java go to this folder and inside this common package if you don't know what's going on please watch my previous videos so inside this common package right click new and create a new activity which will be empty activity and we are going to name it onboarding and click on the finish ok once this is created first of all we need to design our onboarding screen so close strings and splash things ok first of all we need to design your own body screen the first thing we need to do is we need to add a slider over here so the slider means a viewpager simply search for it and drag it on the screen then for the bottom button and for the dots and then for the next button we need to add a new layout here so I am going to use relative layout simply put it here not inside the viewpager but make sure it is in the constraint layout ok so first thing we have at the top is relative layout and its height will be 150 DP you can see it is at the top simply drag it no not in the viewpager again it should be in the constant layout okay so for the further designing let's switch it to the split screen and inside we have a view pager and a relative layout okay for the relative layout we want to place this relative layout at the bottom so we need to search for the bottom constraint bottom to bottom out not to top off but to to bottom of this parent and it will drag to the bottom of the screen then we need to create these side hooks maybe you have to select this and it will be tied to its parent okay our relative layout is ready but you can see currently our view pager is touring the whole screen so first of all click on these constraints and simply drag it to the top just above this relative layout attach it with this and also change its width to match parent and its height to let's say 100 any value but first thing we want to do is want to make sure that it is attached both vertical constraints then make it zero so it will cover the whole screen of any device size because we want to make our things responsive you can check my video on the constraint layout okay we have created a viewpager and then we have designed our relative layout so inside the relative layout we want to add two to three things the first thing is we want to write I create a button which will be masked parent and wrap content its text will be let's get started text as we have defined strings in the string folder so it's a good practice as I told you in my previous video ok we want to add its background color and it will be color primary pretty good but I is ready we need to assign its ID as well and the ID will be get started button and also we need to assign the ID to viewpager and its ID will be Spyder yes I do okay we've created a button then inside this relatively oh we need to create the dots at the left bottom so for the dots I'm going to use the linear layout you can use any layout it's up to you so it will be web content and it will be placed at the left bottom so for their such for bottom lay out a line parent bottom make it true and you can see it is at the left bottom in here you can see it is at the left bottom of the relative layout just to make sure it is little above from the bottom I am going to add a padding bottom with 20 DB so that's it it is currently not visible but once we attach the dots dynamically so it will be fit and fine or clothes nearly out then the last thing we want to add inside this is a button and the button will be wrapped content and content it will be at the bottom aligned parent bottom true and also it will be to the right side aligned parent right just remember that these things align parent right aligned parent bottoms are only workable inside this relative layout not in any other layout so all the layouts have their own a kind of keyboard so please do not confused and also I am going to add the padding bottom as well be 20 or maybe 30 D before the button I'll close this one and also we need to assign s ID maybe next okay want to make this transparent so to make it transparent such background and add the color 3-0 means some color then again 3-0 means some color so to make a transparent make sure you have eight zeros in here the last to 0 means transparent inside Android studio and we want to add an arrow here so the arrow I have added already so to add these add some icons inside the button you have to search for the drawables and you can place them and bottom left right start I am going to place it at the end bribable and and it will be next button you can see a little arrow over there okay currently what is the error it's just a warning it is saying that used driver right as well with the drivable end and no problem okay as you can see currently your design is attached to the parents without any space so for that go to the top inside the parent layout right padding 20 baby yes you can see the space over here so our design is ready for our bonding screen so the next thing is we want to add some text or the slides over here so for the slides we have to first create the XML and then we have to create our Java file so for the example file go to the resource and inside the layout right-click new and create a new layout resource file and we're going to name it slides layout so in here we are just going to design the layout but not the actual slides so slightly and click OK so in this we just want to define our design of the slides so for our slides I am going to create one image one heading and one description so for the image drag the image over here and this is the any image you can use okay make it the top 0 0 from the left hand right and we are going to change your side to 400 DP and the wit will be 0 DP which means math constraints once we have added the image then the next thing we want to add is our heading attach it with the image and make sure it is 0 right attached below this image and also we need to add these constraints left and right ok we also have to assign these IDs slider image then the slider heading okay first of all design this we need to add text size 30 SP and the font family as we have imported is the Bradman one so I'm going to use the simple black okay once done we need to add one more text view here and just to make sure it should be at the center so one more thing both the search bar and search for the gravity and make it Center here as well okay let's play its place it at the center and the constraints then add the constraint with the top and make it 0 also we need to add like the description as its ID and also we want to change its gravity to center okay I'll let me change this text to first light description yes pretty good we have a description title and the image or for the image I want to add some padding here 20 DP to make it a little smaller that's it for the slide layout we have assigned it their IDs as well as slider I'm a starter heading inside a text description okay once we have designed this layout we are going to change these images dynamically from the Java class we are just going to create and also we are going to set these headings and descriptions from there so to do that go to the Java and inside in the helper classes I am going to put this adapter class in the helper classes folder so right click new and create a new Java class and name it slide the adapter class and click OK so this adapter class will be used to show the images or show the slides on our main screen there are a few functions we are going to create so you have to follow me step by step in this class so the first thing we want to do is to extend it with a page adapter as you can see it is currently showing the red line because we need to import something some functions so before importing that before making you guys person we first need to create a context and that called text variable ok in this class we have to first create its constructor right click generate and click on this constructor button and click OK with the context ok what this means is this slider class will be using some layout and on which activity we want to show this data so the context means on which activity so when we call this constructor and pass the context so it means that on that specific activity we want to use this thing ok after creating this constructor we need to create three things as we have one image one heading and one description so we need to create three errors for them so the first thing is in teacher type of array images and it's an array is equal to a curly brackets and semicolon at hand okay in here we just had it the images so I am going to write our dot images are in the driver folder then we need to mention their name the first is search place okay once the images are added press alt ctrl L to align okay then we need to add another thing which is headings and it is also an array and here this time the headings are in the strings foil so r dot string dot we need to mention the headings here you can also simply mention the strings directly here but the professional or the recommended ways to create strings first and then use over here for the whole project and make sure that do not add a comma at the end of this like I added over here then we need to add descriptions and it is also an array I can remove the comma and we are done with three arrays we simply get these images text and descriptions inside our arrays we are going to use them shortly so now move to the top and it is saying in pour some classes so right leg show context and implement this methods you have two methods over here and click OK to add them so the get count method simply means how many slides we are going to use in our project so for that we can write it statically by a two three four but try to use headings because heading is in every slide so I am writing headings dot length so if in case our headings are going to increase we can simply add we simply get it form over here so you can again write statically it's not that rocket science okay then is view from object means is this view is using this object and let me create the first view or we want to return that view which is equal equal to because not one equal one equal means the assignment and we are returning basically a boolean so we write equal equal to then we have to go to the slides layout and in here you can see we are using the constraint layout so we have to mention that slide adapter and it is constantly out and then it is an object so we are just returning boolean true or false depending on this situation so that's it for these two methods okay the question is we have just added these images and headings but where we are initializing now these images and text so to do that at the end press ctrl o to override the methods and such for instance sheet item and click OK in here if you have ever used something called fragments then you might be familiar with what I am going to do here we first need to create it at the top just around this context a global variable of layout inflator and inflator ok in here before returning we are going to return the view basically but before going to do that let me quickly write the layout inflator so basically to use the design we need this layout inflator inside the fragments as well so as we have created the design in dot XML file and we want to use that design so we need to first request to the system to use that design and then we are going to use the design in here so simply write layout inflator is equal to the context in which we are going to use as I told you the context mean which activity dot get system service and in this system service we are again writing context dot layout inflate service in Fetisov sorry ok the error is just saying that we need to cost it to layout the freighter over here that's it okay we are just requested the system to that we want to use some layout so in here we need to create a view is equal to little Twitter dot inflate and in here the first thing we have to define the layout itself that we want to use is here we just skated slides and this layout and it will be in the container as you can see we have we can pass these two things but the third one which is the boolean is optional but attached to route we're just going to put the false and by default it's also false okay what what we have done is we simply created we request the system that we want to use the service of the design then which design first we get that request and then we are going to point to that layout which is slides and just called layout we have just created so inside the view we have that design so now we can get those images text and also we go here we can set them as well so we have three things the first one is image view is equal to we have every object inside our view so we must have to write the view is set of point view by ID i right you dot find you by ID and simply hard odd I did god slide Mitch press ctrl D three times okay we have just pointed these three things from the design to you can say the the hooks from the design because we have just pointed our design here as you guys know once we get this hopes we can shut them as well so we are going to set image view dot set image resource file and this response file will be array we have used which are the images and on which location we are going to pass the position so we have this position over here and we are going to pass this position so we will set that image each time and the image we have get from this position so make sure you write the images in proper format the format you want to show okay same for press control D to duplicate same for the headings and text headings and for the descriptions change this image view to heading and description it is not the image resource so we need to type set text and our source text over here so that's it we just have to write the last thing which is container which is the container which is this one the view cook so container dot add view and inside we have to power this view that's it and also we don't want to return the default one but we want to return this view we have just created so this view basically holds this new data of the images descriptions and this thing only okay close this one then the last one is we want to override press control or to override to destroy and destroy item we don't want to use the default one but we want to use this container dot remove view and inside the view we have created was that constrain lay out constantly order then we have the object so the first thing is we have said this said this view then we instantiate that items and change that items for each light and then the last thing is we have just destroyed that very simple so that's it we are done with the verse lighter adapter move to our own boarding dot java screen and in here as you can see we have created our view pager and we have created our relative layout so the first thing is we need to create these hooks view pager will be let it be view pager then we have a linear layout for the dots and name it dots okay for now I am just going to call these two but we have to use multiple ones we have now we have to use all these variables we have just declared but currently I am using the view pager and then this linear layout which holds the dots okay right new pager is equal to find away ID what's its ID it's ID is slider order ID dot slider press ctrl D to duplicate or Tobias we haven't assigned the ID over here it's ideal the dots and it is seen that you need to set the orientation the default one is polish those who let it be horizontal or you go back to the onboarding swing and r dot ID dot the dots we have just created but these are basically the hooks here then we want to call our slider a topper class so to call that we first have to define the variable Rider adopter and and in here we want to create as reference Rider dr. is equal to MU Hydra doctor and as I told you we have created a constructor so we have to pass this means this activity which is onboarding dot this then we have to set the viewpager dot set adapter and the adapter will be slider doctor to run this application we first have to call this onboarding screen so open the splash screen so the first one which will be running is a splash screen and we are calling the user dashboard of the 5 seconds now we are going to call onboarding and run the application ok so our application is running you can see the splash screen and after 5 seconds you can see we are currently rotating our slides from the top but you cannot see any dots at the left bottom we have a button we have get started but I mean but you cannot see any dots here it is also working so let's add the dots here now ok to creates the dots it's a simple process so the function we need to create this private void add dots or maybe add dots that's enough okay inside this function we need okay so first of all how we are going to add or to create the dots so we are going to create the dots using text view and the text view will be an array and its name will be dots is already defining okay okay okay sorry about that we are going to change this as dots layout and two dots layout so these are the dots basically so inside we first want to create these dots in using the text view so how many dots we have dots is equal to new textview and we are going to use four slides yes so pass the four in here we need four text views and then the next thing is to create these views we are going to use the for loop so right for each eye is equal to I is less then dot dot length and I passed this okay inside this fall we have to write dots of the eye position or at the current position is equal to new so this is basically simply creating that textview is equal to new textview and inside this we need to pass this activity or where we want to show this textview inside this onboarding screen so that's it for this line then again we are going to call the dots of I dot set X we want to set the text of the specific dots the text will be we want to create the dot so to create that dot we can use the simple HTML for that HTML dot form HTML and inside you can pass the special character you can get this from the link description below okay after that we need to set the size dot dots of I dot text size septic size and it will be 35 in size maybe we can change the color as well and you can play with all these settings these are simply text views so you can change them as as the way as way you want so that's it for now for the for loop and last thing we want to add these dots on our layout so which is the dots layout so sets dots layout dot add view and it is simply dots of hi location so the error is gone okay so before running this application we need to call the add add dot function inside the oncreate and let's run the application so off the splash screen you can see we have a dots at the layout we have just pasted but when we are changing the slides you can see our dots are not changing so it is a very simple thing so let's quickly do that so for the dots for to change the color we just want to get the current slide and to get the current slide using the page view pager we have 1 by default method and it is you just have to write view pager dot on change on change listener and create a variable change listener is equal to new view pager dot on change listener so we have currently 3 or written methods over here but we are not going to deal with any of them just add a semicolon at the end and on the current page as we just want to use this page on which page we are so we are at this page and we want to call this function add dots add dots and just pass the position in it so it is saying that we know we are not receiving the variables here so that's it for this function close this one and in here we had we just have to receive an integer type of position and in at the top where we are calling on create just pass zero as a position the default position okay for this position what we want to do is after this for loop we just just to make sure that there is something if dots dot length greater than zero that means there is something then we just have to write dots of that specific position which we have just passed in here and it is not the eye because we are not in the follow so dot set text color and we want to get the resources get resources dot get color and the color we are going to use is our dog our dog color primary dark or maybe the okay that's it primary dark okay once we have added this you can see currently this variable is not in use we haven't called this one so again go to this on create and where we are calling this add dots and just after that write the viewpager which is viewpager dot you can see it is paid change listeners or white dot add on page change listener and in that we to call this change listener very able so that's it for the colleague we just have provide a single lying inside our add dots because you can see we are just creating the dots but not clearing the view each time so we just have to make sure that this linear layout the dots one dots layout should clear every time so right doors layout dot remove all views that's it and again run the application okay now let's change it and you can see our slides are changing and we are not getting and you can simply bold it or you can play with this text view because it's just a simple text view so you can change it as per your own requirements okay so the next thing we want to do is we want to hide this button let's get started button until we have reached to our last slide and also we want to create a button at the right top corner which will be saying a skip button and then this next little next button will should also be workable if the user don't want to perform this using the slider so this video is quite this video went too long so in the next video we are just going to do this and also the very important thing we are going to create in the next video is this own body cream should be appeared only once not again and again to the user so when the user downloaded or uses the application for the first time we want to show this so for that we are going to use the shared preferences so the next one will be the shorter video so let's move to the next video so the next section or the Part B of this video so thank you for watching this tutorial so stay tuned and if you run something new till now please like the video if you are new to the channel please subscribe it so let's jump to the Part B

Channel: Coding With Tea

Views: 38,786

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

Id: nG7y1NiCTxA

Length: 38min 48sec (2328 seconds)

Published: Mon Mar 09 2020