How To Create A Navigation Menu

Liaqat Ali
A free video tutorial from Liaqat Ali
Expert in Youtube, SEO And social Media Marketing
4.1 instructor rating • 3 courses • 111,001 students

Learn more from the full course

How To Create Android Apps Without Coding Advance Course

Best Android Apps Development Without code Course That Will Teach You To Create Stunning Apps Within Hours Without Code.

02:50:07 of on-demand video • Updated May 2019

  • A Simple No BS Android Development Course That Will Teach You To Create Stunning Apps Within Hours.
English [Auto] Hi guys. So today I will teach you how to create a navigation menu for your app. So first we need to prepare our navigation buttons. OK. So we will do that by going to Kanva dot com Candler dot com is where we will design our navigation buttons right. So I show you how. So first we have to go to Google dot com and type Kanva. OK. So the first web site just click that and you can see I'm already log in because I already have an account. But if you don't have one you need to create one. OK. So let's just click here. The more button on the upper right corner and then the scroll down. OK. Let's go to the marketing materials section and then click logo. You can just click logo and then here many logo designs but you will choose the one that says circle shape. OK so let me just look for it. OK. So here. So this is what you use. So first we need to expand this make this nager and then we will eliminate the excess tax OK. So for example we're making an app about puppy training and this are our menu items. So we have housebreaking leash training kennel training and clicker training. So this will act a sort of menu button. OK. So let's just copy the first menu item piece housebreaking. Copy paste that. OK so let's make this bigger. OK. So next we need to copy this. OK. Because you have four buttons so just click this copied space. Second Copy third copy fourth copy. And then we need to change the text. So our next menu item is leash training. So you have to copy that paste. OK sir. Next menu item is kennel training. So just copy paste and then lastly we have clicker training. Just copy that. So next you'll change the color. OK so let's just leave this at red and then the leash training. Change it into blue and kennel training. We can make it into purple. OK. And they are training. OK. If you want to have a custom color just click this. The plus sign. And then there's a color picker. So there's more. OK. So you can do that. So after that let's click download here at the upper right corner. Just click it and make sure that it's all pages. OK. All pages and then click download OK. So I actually already downloaded the signs and this is an example. Here's what it looks like. OK so next you'll go to Mobin. All right so let's just typed Mogen. OK. And then search for it. All right. So we'll just go to Monique you and then we need to log in this quick log and log in using my Facebook account. But you can also log in using Google or Twitter. K so let's just we were a bit OK. So now we're already inside Mobin cube. OK so we need to create a new app. So just click this plus button and then put the name of the app OK so it's just blank and then quick create OK so let's just wait. Well it's still creating OK so now we're here. There's description name OK if you want to change it quick here Monday-Friday that but for our purpose of our exercise we will skip that. OK. So let's just click here. Put it OK. OK so this is where we will choose our screen. OK. So we need to quick the detail screen can't just click that and you will go here to blank canvas. So first we need to add separator. OK let's add two separators and then let's remove the line here so quick edit and then click here and then choose no line. So let's do that again. OK so I want to add a color here. So just click this and then a quick background and then two solid and then quit this box right. So will it use a color like this color. OK. So let's go here. Can you see the Asser sign here. Just click it and then right click copy. Because you want in there separate you to be the same color. So click Edit and this. Let's go to the background and quick solid quick this box and let's go to the asterisk again and then paste. It's just the color quick enter. Right. So you see there's a border here now. OK so let's add another separator and then no line again OK so now we will need to insert a table OK and then let's drag the image back in here. And then another OK. So now we will add the picture on that image section. So let's just click here and then quick select here at the bottom bottom right click select and then upload resource file and then let me just look for the icons. Just hold them you look for the OK so we need to upload them on so I just click this link except just hold on for a bit and then we need to click the check sign and then will do it at the other side. So quick edit select then quick upload resource trial and then that quick icon quick access and then click the check icon. OK so this is our menu items OK this is our menu items OK. But I find this too big so let's just quit it. OK. And here it's just 100 percent on the way. Just make it 80 percent and then let's line it at the center. And then this other one is just do the same quick 80 percent for the width and then align the center. All right so let's add another separator. And another. And then let's remove the line again. OK. So so make do that doing this all over again. Just click here. OK you will see that the box that this color pink. OK. When you see that just click control see. OK let's just copy it. Control C from cat control plus C. OK. And then let's face it by clicking control the ok control V for victory. All right so let's face it and then let's just change the item so let's click and it click here and then quick select upload resource file and then click the clicker training like accept OK then just click the check icon and then that's quick here again and then select it and then upload resource Crile leash training at the click Check. OK. So this is what our navigation menu looks like. You started the navigation buttons and then if you click it then it will go to the specific screen or page but it will teach you later how to connect to the specific pages. All right. So I'll see you in the next lesson.