Android Slide / Walkthrough / Onboarding Screen Design - Android Studio

if you are a developer or have you installed more than a few apps on your mobile phone then you may have heard of onboarding screen or maybe a get started screen now if you are curious just like I was in creating that screen without using any library then you are in the right place hello guys this is a JH from TX to do and in this part we are going to create onboarding screen for the Android app in Android studio so let's get started first of all I'm gonna go with creating the project now as you guys may not already know it's actually pretty simple to do we just simply start typing in the app name then we select the version of the Android API that you are gonna use and we're gonna go with API 21 as it is installed in 71% of devices though I'm not gonna release my app but it still matters next step is we are going to simply use the empty activity and we'll hit the finish button by creating the main activity and once the app is started you're gonna see the very simple and very usual screen that we already see first thing that I always do whenever my project is started I change the view type from Android to project I like to see all the apps which are present in our Android library though I may never use all of them but I still like to see them all and then when we move to our activity main I'm gonna remove the text the basic text to you and I'm gonna change the layout from constraint to relative layout let's just stick with this for a while because we are not really used to the constraint layout then once that is done next step goes to adding the colors in our values directory so open up the values directory let's go to Styles first and change the dark action bar to no action bar cuz we don't like any kind of action bar in our app we would like to create it by ourselves if needed then we go to our colors dot XML and here I am going to paste a few colors you are welcome to pause the video for a while and paste it by yourself now I will explain you why we have pasted so many colors and where we are gonna use them so as you can see there are very basic colors and I've also included white and a little transparent white that is kind of a gray color not actually transparent white but I renamed it to transparent white because I like it anyways next step is we go to we go to start importing some of the assets first of all I am going to import the background so before doing that we actually need to create a resource directory so that we would be able to store our images in that so I'm going to create a new directory and I am going to call it travel hdpi now that is very basic size also we need to create five others which are mdpi xhdpi and double xhdpi and also the last one you already know so once you are done with that next step goes to importing the background image which will be provided in the link in description and you just simply copy and paste it in your trouble directory according to the name next step goes to renaming that you need to make sure that you are not using any capital letters or spaces in the name so once that is done we are now allowed to use the background anywhere we want also it renames it reef actors all of the names automatically so let's go to the relative layout and select the background image right over there you just click on that options button and you select the main background and the background is selected once that is done now the next step goes to adding the viewpager now viewpager you just simply go to your relative layout type in the viewpager and it will be imported but the major thing is you need to actually adjust the height a little bit because we also need to import one more thing which is actually the linear layout at the bottom now this linear layout will be used to add the dots that usually you see on getting started page now you if you don't like those dots or indicators you can simply skip this step but if you are too you need to at least import some sort of layout right over there now in our case I'm going to use linear layout once that is done let's just assign some IDs to this I'm gonna call one slide viewpager other one that layout that's simple as that next step goes to going out to our main activity and actually start initializing them which is actually pretty simple step as you already know all of this stuff so we can go a little bit faster right over here so I just initialized both of the slight viewpager and the dot layout then we are going to create one new layout resource file and we're gonna call it slide layout now this will actually contain the actual layout of our slider now you can also create multiple files for different kind of UI but if you are having the same UI for all of the screens then you can just simply create a single slider or single layout and then we can convert it into multiple pages next step goes to importing the assets which are the images that we are gonna use also these will be provided in the description description as well then we can just simply rename those and it will refactor in all of the drawable folders by itself make sure that you don't use any capital letters or spacing in them once those are imported I am going to drag an image view inside our slide layout in our relative layout once that is done I'm gonna place it in centre and also give it a little bit margin from top once that is done we are going to add some text views actually two of them one for the heading and one for description now the properties are gonna be a little bit different as you can see on screen I am changing the layout properties and I will provide you the whole source code files so you guys will be able to add these properties by yourself or you can do any custom design if you want to I have given some width to the image 200 to be exact also the heading is a little bit larger 20 SP size the description has a padding of approximate 35 and also the these are aligned Center also I've added some letter spacing and line spacing to those description and I have changed the color of description to that white transparent kind of color and the pure white color to our heading now once that is done now is the time to add these like slider a data the slider adapter will be used to add that pagination kind of effect which is exactly what we needed right over here once we create our slider adapter dot Java file we need to extend it to the pager adapter once that is done you're gonna see an error but if you alt and press Enter it's gonna suggest some suggestions or solutions you just implement both of these methods that it's it's asking us from once those are done the next step goes to adding the context and layout inflator now context is used for adding the context or wherever the context is required so for that we are going to create another constructor and we're going to pass in the context through it so if we are going to use it from main activity it will be a lot easier and error free for us once that is done the next step goes to creating the areas now these areas are gonna store the values for our slider first one is going to be the slide images and we're gonna add in all the drawable files that we have which is the eat sleep and code icons next step goes to another array which is the headings and another one is all the descriptions now I have simply pasted it right over here if you have different descriptions you are always welcome to add but since we are using the same old lorem ipsum text we are just gonna skip that also you can add background variable or array to it if you are using different colored background for all of these slides changing background is very similar to changing all of these I will tell you in a few minutes now once that is done we are gonna add some value in our get count method and here you can see we are actually returning this Lite heading that length which is actually the length the count of total headings that we have that means the total number of slides in our in view from object we are gonna assign the view to the main object that means that our main view is gonna use that lastly we are gonna not actually lastly we are gonna create one more method after that this is the instantiate item method now this is required to add those slide effect or actually inflate all of the things in this adapter we are going to create a layout inflator which will use the system service of layout inflator service that you can see right over here on the screen next step goes to calling that view and then inflating it with our slide layout that we created in our layout folder the steps are pretty simple as you can see on the screen once that is done what we are actually gonna do is we are gonna initialize all of our image and text views in our slide layout once we initialize them now it's time to set some values to those to set value it's quite actually simple slide image views at image resource that means we are setting some image resource to this and this time we are gonna pass that array with the position that is in the instantiate item now the current position of the current slide will be passed through it and it will select the image automatically according to the error position same goes for the heading and also for the description and finally after doing that we are just simply gonna type container that add view will now once that is done now it's the correct time to add the last method if there is a destroy item now what this method will do is as we reach the last page it will then stop prevent us from actually getting any error or something actually it will stop it right over there instead of creating multiple slides so once you do that you just pass in your remove view which is the relative layout which is the object that we mentioned right above once that is done you just go to your main activity now it's time to initialize the slider adapter that we created the separate class once that is initialized now you can just simply add the adapter to a view pager which is our slide adapter by clicking on the play button it will the app and as you can see on the screen you are gonna see the neat and clean sleight without any dots or button but you can see that this works pretty fine now we have completed the slide creation part now it's time to add those dots to our page to add those doors what you can do is you go to your main activity then you initialize your text view which is we are right now creating right over here this is going to be an area it is going to store all those dots now those that are obviously going to be textview because we are gonna use some serious HTML in this once we initialize that now it's once we define actually once we define over there we are going to create a method which is add dots indicator now what this method will do is it will actually count the number of items that you need which we are actually going to manually assign it or you can use it from this slider adapter using the M dot or actually sorry the heading count or description count it's up to you then we are going to create a for loop in this for loop the eye is going to be 0 if I is less than M dot dot length that is the actual number of pages that we mentioned right above here the M dots in new textview 3 and I plus plus each time so what it will do is m dot dot it will create a new text view and at the position of I which is the current position it will start from 1 2 and sorry 0 1 & 2 then what it is going to do is m dot I dot set text and we are going to set is the text to this simple HTML code now this code will change this to a tart you'll see when we will run the app next step goes to giving default some size and also a little bit of color now we are going to use that white transparent color which is actually a gray color once that is done we are going to add these dots to our dot layout which is the linear layout that we created and once that is done in our own create method we are going to call this method which is the add dots indicator once you run the app you are gonna see three dots right at the bottoms but that will display the current page that you are on but we still created three dots right over here as you can see those HTML code converted themselves into a dot a single dot and three for each page sorry one for each page that's total three next step is adding that indicator effect which is which page we are currently on now to do so you need to add the unpaid change listener for our view pager now to do that we are going to again create another own page change listener we're gonna call it view listener and then if you'll automatically implement these three methods if not so you can do it manually by yourself and inside that we are going to say add dot indicator and we're gonna pass in the position which is the eye which you can see on the on page selected now this will work whenever you change the page or change the slide it will get the position of the selected slide and it will provide us into that integer I so we're gonna call that method at the art indicator and we're gonna pass in that in I ain't once we do that we also need to receive it in our method so we're gonna create an integer position once we receive that we're gonna create an if statement so if dots that means the number of that is greater than zero that is obviously gonna be true so once that is true what it is gonna do is m dot position that means the current slide that we are on and it will set the color of that to white because we are gonna type in so once that is done the next step it goes to adding that on a change listener to over slider pager by simply typing an EM slide view pager ad on page listener and then you just pass in the pew pew listener that we created at the bottom once that is done now we run the app and what we actually see is that indicator works pretty well you can see that the current page indicates white color background now don't forgot to add that M root m dot layout dot remove all views because without that it is just simply going to create multiple number of dots so you need to mention that for sure now the last step goes to creating those buttons so you I'm gonna go to my file the activity main I'm gonna add two buttons and once that is done I'm going to change those background to transparent and also I am going to change the text and ID of those buttons I'm gonna call one previous button another one next button and also according to that we are going to add the text to those cuz that is done come back to our main activity and let's initialize those buttons now what this will do is be simply adds the button now we add the functionality by yourself so to do so what we are going to do we are going to create another integer which is going to be M current page now why do we need another integer and you will know really soon once we create that once the page is changed that means whenever a new page is opened what it is gonna do is it's gonna set that M current page to the current page that is actually we are on and after that what we are gonna do is we're gonna create if statement so if I equals zero that means if the current page is 0 that is the first page then what we should do is we're gonna set that next button enabled to true but the back button to false because we actually don't want to the user to press the back button when he is actually on the first page because there won't be any back page to which also set the visibility of back but into invisible and we change the text to next button to next and back button to back sorry nothing in the elsif statement so if the EM current page is so if the current page which is AI is equal to dot dot length what is what it should do is set enabled both of the buttons to true also visibility to visible the next button should change the text to finish but the back button takes your change to back and in the else statement which means if we are not on first or last page it should show us next and back button and also before we proceed with that you need to include that minus 1 that means it should be if the dots Darland give you 3 as an output 2 is the last number of page that we have it actually starts from 0 1 & 2 so you need to make sure that you type in that over here once that is then we are going to go to our activity main and we're gonna set the visibility of pay back button to invisible because we don't want it to show whenever the app starts and now we run the app and here you can see that this works like a charm last step goes to adding the own click listener for all of these I'm in both of the buttons so we simply type in M next button that set on click listener and what it should do is it should say M slider slide viewpager that set current item that means the current item should be two M current page plus 1 that means the current page we are on which is selected by the on page listener and it just adds one to it so if we are on page number one it will send us to page two if you're on page two it will send us to page three same thing goes for the back button but instead of adding the +1 we are going to say minus 1 because we go on we want to go to one page back everything is done all you need to do is hit that play button your apk will be installed and once you won the app you're gonna see that we just got ourselves and fully functional onboarding page without using any kind of library

Channel: TVAC Studio

Views: 347,232

Rating: 4.9132671 out of 5

Keywords: onboarding, screen, slide, walkthrough, android, studio, tutorial, design, develop, beginners, advance

Id: byLKoPgB7yA

Length: 20min 53sec (1253 seconds)

Published: Sat Dec 02 2017