Learn to make Amazing Home Screens in Canvas App - PowerApps

hi everyone welcome to last minute coders my name is winner in this tutorial we are going to learn how we can make different kind of home screens in our canvas app power app so I have made three home screen for you different examples so that you can also get ideas from them okay so this is our first home screen where I have just added the name of my company let's say learn experience and here I've just given some basic demo of it created one button and here is a little Shadow behind this button and here you can see today's date the version of the app about us and here it is the top nav bar on the top top right hand corner okay so here you see and you can also see that when I'm hovering over it there are some little bit you can see the transition up here the color is changing this bar is up here so how I made this we will learn this let's see the second one the second one is like pretty simple here we have the version here the images of which our project or app is related to logo of our company the name of the the name of the project or at the app and little bit description highlighter description and some other description as well and one button uh now let me click on this button and this is the third example where let's say if we have multiple buttons in our home screen and we want to navigate it to like various pages so we can we can create like this okay and here we are using like left nav bar right version of the app again all copyright are reserved about us is here only you can also give the description I have just given my channel name email okay if you want if you have any doubts okay regarding canvas app power app or power automate power bi anything you can just mail me at this email ID or if you are any facing any issues right so you can just mail me it here I'll definitely reply okay and here I just added one audio also so let me play this okay you can have a video up here as well but uh videos take a little bit time so I would not recommend that audios audios are fine okay and the logo of our company so this is what we are going to learn today so let's start with this one the first question you might be having like where do you get these images right these SVG images I can say so how do I make these for that what you need to do just go to canva.com so see I'll provide this link in the description okay so just go to canva.com and once you go to canva.com just click on create design okay and you can you can go with a YouTube thumbnail since it's a resolution is 1280 into 720 and if you see your tablet also so it is it is like this okay 1280 720 resolution okay so just click on like YouTube thumbnail once you click on it like uh you will have this this blank canva with you go to elements first thing first uh we have we have these kind of svgs or images what you can say present inside our canva only so see I just increase the size of it once I increase the size of it let us say let me do like this okay and here I can change the color of this also like if I go up here let me change it to like dark this uh maybe yellow okay so this is this is up to me totally up to me see and to change the middle color let me click up here okay uh anyways let's let's keep it like this okay so see how easy it is like to uh what you say this these are like waves kind of images right so you have created one wave there are plenty of examples just search your graphics just search your graphics like this Graphics you you will be you will be able to see see there are lots of lots and lots of free Graphics are here see if I if I add this up here okay so so these things will make your app look amazing okay so let's let's delete this once like this is done now the second question is like where did I get this image either you can search it in canva okay like you can search for let's say if I want to search for health okay so there are images up here okay but like you see this they are like uh they need a pro licensing for it so I would just recommend you just to go to Google okay just whatever your app is related to let's say my app is related to health sector I'll say health sector SVG images okay so once you go there go there click on images see I clicked on images so let me let me search here I am not seeing any so let me type something like this SVG and let's see um okay SVG images for health sector type something like this now I always know that uh that if they are if they are like they require licensing don't don't use them but most of them are free let's say if I wanted to use this image so either I can just simply click on save image as here you can see SVG documentation the name uh its name is illustration let me save by this name only so once I save this like uh this is showing me as a web page if you don't want to save it as a web page you want to save it as a PNG you can do that just click up here let me copy this image go to word let me try to paste it okay see I pasted this okay how did I paste it this see if I do control V I don't think see I press Ctrl V it didn't paste it it did something like this okay so just right click up here and see this image picture okay so paste the picture once you paste this just right click on this okay this image and save picture as now go to desktop save by whatever name and see this let's say one uh PNG okay portable Network graphics and once I save this see on my desktop it will be saved okay no background let's say if if it had a background what then how how to remove the background let me tell you that not this one let let us take example of this one let's just hope it it contains a background see it contains this uh background right let me first save this image uh save images again the steps are same to PNG portable Network Graphics let me save this once I save this Let me refresh up here let me open this see it contains a background how do I remove this background so for that simply go to Google's type remove dot BG slash upload okay visit this website anyways I'll provide these links in the description you can just go up there and click on upload image uh select your whatever you download see I downloaded this right I'll select this uh it is not identity sometime it happens that it will not identify a foreground maybe the quality of the image is not up to the mark Oh see now it is working no so sorry this image is not working let me search for another image let's take this one again the steps are same same image as let's directly save this image three let's see if it contains a background see this one does have a background let me upload this one third one and see even though it looks just like the same but it is not the same you will see the difference since I download the C now when I download this there is no background in it but in the previous image if you remember it does contain C it does contain the background the only limitation of this is like it reduces the quality okay so I would recommend like uh if if you are getting a mage without without this background so just go with that but anyways you can there are so many online tools up here so for you can use to remove the background this is the best one remove dot or remove dot BG slash upload so I use this so once once you are done with this see if I wanted to have this image just in your canva click on upload click upload and let me upload this one this one okay open and let's upload that one also which I just now downloaded okay so I have these three image let's say if I wanted to use this one okay so I can I can use this one up here right you see it is pointing up here now once like this is done if you have your company logo with you either you can directly like use your company logo let's say let me search if I have my company logo with me see I have here whatever your logo is let's say my logo is like this okay so I can simply align it okay so let's let's align it like this once like this is aligned this this part is then just uh download this okay and once like this is downloaded okay so your your part is done like it is downloaded with the name of Untitled design2.png once like this is done go to your canvas app see let me head over to the section let me click on new screen blank screen okay here uh let me in uh sorry I'm on the screen see background image currently it is done I'll click on ADD image go to download say this one let's add this background just wait just wait see I got this image right okay now this is done let's add some controls up here I'll recommend you just click on insert and see I am seeing a modern controls up here and if you wanted to see this modern controls how you can enable them go to your this thing three dots up here settings go to upcoming features and scroll all the way scroll and you will see like where is that preview here model controls modern controls and themes okay just turn this on and once you turn this on you will also be able to see the model control modern controls up here now click on classic uh here first thing I'll recommend you go to your layout always create containers right once you create this containers like right now I am just doing like this okay so I'll recommend you like if you wanted to start it from the second half okay let's say this is my first half of my screen I wanted to start this one the second half let me just give it some color so that you can see like this is this white portion is the first half the second half so how we'll start it from the second half go to its X property write this code parent dot with divided by two okay once you like do like this it will start from the second half and just copy this code only and for its width just paste this so the width is also the same okay once you like done this for its height say parent dot height let's let's let's let's wait okay and Dot height okay this is done y is zero okay so this is done like this is done let me remove the color from here okay now here our container is up here uh this is looking fine uh first thing first we need to provide uh let's say nav bar so how I am going to do that go to your insert you can use model controls or you can use classic controls up to you if you go with model control just click on this tab list it will be very easy for you okay once you click on this tab list it will ask you like what is the data source for this to ask us so I'll click on the items I'll create one list okay so how do we create a list inside a square bracket double quotes then we say let's say home okay home let's say services [Applause] let's say contact us this will be based on your app okay I'm just giving some dummy here see once like this is done this is large the only limitation with this is like see anyways I have created this but uh for the size of this icon I can't control this but see it is working right most of the things are working it is totally like Dynamic and in itself and I can even align this okay based on like where do I want to align this I can align this so this this is then anyways like uh if you want like full control I would recommend don't go with this approach like this is simple right even aligning it could be little challenging because see you have to manually align it like this since it doesn't have any like property we could utilize see if I wanted to start it from the extreme right inside how can I do this I can I can say like this uh I'll say parent dot width if I do like this C it is a starting from here it it if I click up here see this it is starting from here right now I'll just subtract my words from itself dot width so see now this will start from extreme right corner okay and the width you need to provide the width like uh static where the only you can provide let's say 1360 based on like whatever values you have you have to provide it like this and you can test this also out like if this is working fine for you then this is fine now you might be seeing like this this line up here this container is containing online right I don't want to see this line so how can I remove this just click on your container Let's see we have this border radius give it a zero and wait wait wait wait wait wait container here she drop shadow just click on see now we are not seeing the that little line okay now that is also removed this is this is fine but let's say if if you don't want to create it like this you want like a little bit bigger size you want The Styling in it so how how you can do that for that click on your container again click on insert go to classic control and create vertical gallery okay once you sorry not vertical but horizontal let me delete this one again go to insert or create a blank horizontal Gallery okay once you create this blank horizontal will just look like this okay for its data source again let me copy from here from let me copy this and I'll click on its data source let's wait let's wait okay I'll paste it up here once like this is done click on see this edit bar up here click up here uh you can you can create a button right you can create buttons and in the button text property you can write like this this item Dot and just value so see this home services and there are other thing as well but uh we are not able to see them right now let me align them like this uh for its template size what I'll say is for now let's let us do 100 or no maybe 150 okay uh see this is 150 this is done and for its height I don't need to give the so much height let's give the height of this as maybe 70 okay so this is done okay so yeah fine now we just need to style them let's say I don't need any background color for this button so I can just click on this color I can head over to this and you will see the background color will now be removed as you can see up here right the background color is removed let me delete this one anyway you have learned right how we were doing that now if I wanted to increase the size of this I can simply increase the size with the font size property let's increase it to let's say 17. so we can do that let's play now this is looking okay but like if I'm hovering over it and still seeing this ugly color so how we can remove that just click on your button see I am on this button see the suburb color there is this property right just remove this click up here click on this transparent and you can check this out see now we are not seeing any color but on click still I'm seeing like this is going to in this is like [Music] see now if I'm clicking on this button it is like white background maybe white the text color so how we can fix that just click up here press color see appear press color firstly for background I'll just remove this first thing and I'll just say like this B like this and for its pressed color I'll I'll give like let's say let let's give this color okay now let's play this and see this time if I'm clicking on this it is like this let's say if I click on home so there should be one like uh what you say rectangle up here or okay so by rectangle what do I mean by that let me click on this Gallery see I am on this Gallery let me add one rectangle so that we will be able to know like I'm on this tab okay so for that we will okay wait let me control X click up here click on this edit button and then paste it okay see once I paste this this is fine let me either you can have it like this okay see this either you can have it like this or you can have this rectangle like this it's up to you I like this one much better than the than that one so I'll go with this one so I'll click on this rectangle for its width let's let's give a width of five maybe a five is fine what it's height uh I'll say whatever my button high is whatever my button 2 dot height is oh I'll just give the same height okay see this button too right and start it from where my button 2 is starting okay so why wherever my button 2 is starting to start from there and there itself so this is this is fine actually right so this this looks okay and uh see my button width is 160 right here see up here button width is 160. button X is currently nothing but uh let me change button X2 like wherever my rectangle three is ending right X Plus rectangle three dot width so start after my this this rectangle okay so see this it will start after this this image okay image or rectangle so this is this is okay and this is done this is done okay now one more thing what we can do is let me click up here okay we have this thing right template size so now we can make this template to size also Dynamic how we can make this Dynamic so we can say button two dot with plus button 2 dot X so with by using this code we we had made this also Dynamic and for our Gallery what we will say for its width let's make this width also dynamic as yourself firstly I'll use this formula count rows wait rows self dot all items so how many items do I have I have four items right so C up here it is giving me like four I need to multiply this by I need to multiply this by what let's say If I multiply this by 160 so see like this is working right so what is this hundred and sisters this hundred and sister is nothing but this template size or maybe 100 and 65 so I'll say self dot template width we have okay so see now this thing this whole thing is dynamic again like you will say you are seeing up like this thing right so let me increase its size a little bit reason because this container size is like little small for this let me decrease the width of this button like 150 then we will not see that okay now everything is okay uh let us let's do like this okay anyways uh for like Gallery words again you can do it the formula is still the same like parent dot width minuscell dot width you can make this also Dynamic right uh wait let's let's wait yeah so this is this is then so now this this looks okay right and like if you want to change the color of this rectangle just click on this rectangle just change the color okay so now this is done let's say if I click on home so this color should be like purple and these all should be hidden right the I I should not see these okay so how am I going to do that okay so for that what we have let me let me click on this rectangle let me click on where is that on its color property I'll say or maybe it's visible property I can write the code okay so what code I'll write up here I'll say if this item Dot selected if this if this item is selected if this is like true then show me this button and then show me this rectangle otherwise do not okay so you can see a pair currently like maybe about as a selected C so this is this is cool ride in the same way like if you want to change the color of this home so see I click on this home see here here we have this color right a but from here I am not able to like go up here so you need to click on this drop down or either click on this drop down either go to advance up to you but let's let's move it from here let's Select Property from here we have that fill or not fill maybe color property So currently it is like this I'll say if this item dot is selected if it is selected what I'll say I'll say maybe the color name is violet color dot this it is blue violet blue violet so this is this is done right and if the if you see the color differences up here just click up here go up here right uh uh wait wait wait wait wait wait wait wait wait I'll click on this rectangle go to its color go to the custom just remember this thing 109 49 162 109 49 162. 109 49 162 [Music] and at last 100 and just copy this rgba that is red green blue a is aggregate or what but it just gave some opacity I think and just remove this color from up here and now this time our colors are also fine okay since I'm hovering over it so the color is changing to White okay so if you want to fix this as well like you don't want it to be white uh you want it to be like a little darker shade or something so you can do that let me select this button and here it's our color is a pair right and we have this color let me go to customs and let me like make it little darker ah not not this one not this one so sorry I changed the background color not background body but this color okay what I'll do is I'll firstly select this one then I'll go to custom and make it a little bit darker see this time fine right looks okay so this is how we can make like our top nav bar using gallery and like this is amazing right and if you wanted to navigate to another screen using this I will recommend you to like create a collection rather than like I have made like this right Home Services contact us about us what I'll suggest you let go to this app go to its onstart property anyways I've created these variables hold on just ignore this create one collection how do you create type like this clear collect okay I don't know why code is not coming up here who knows call let's say my nav bar I'll say cool nav bar and here I need to provide items so for that I'll use curly bracket and inside it First Column will be my let's say uh like the same name okay so the name will be what let's say home first will be home other other thing what you can give is like uh screen I'll say where where do I want to do move to so here should be like a screen name let's say home screen one screen dash one so like like this let I'm just giving you an example like this is one let me copy this let me please disappear please disappear okay homes services about us I have like one two three four screen right let me change the name this to home screen Dash four so this is done this should be two should be three before okay so I have created this now let me copy this uh variable or you can say collection variable call nav bar I'll go up here go to its data source instead of this I'll use cold nap but I know it is going to throw me an error reason is very simple I'll just go to Stacks property here I'll say name and let us wait okay and click on these three dots up here click on run app on start first we will wait okay so see now I'm seeing this up here now if I wanted to navigate like if I click on this home this should be navigated to this screen if I click on if I click on Services it should navigate to this screen and so on and so forth so how we can do that see a pair I'm on this button right I'm on this button too click or click up here on its property section go to on select where is that on select right here what you need to do is you need to write a code like this so since you want to navigate to another screen so the code is also very simple navigate where do you want to navigate it will ask me answer this item not a screen and it is throwing me an error navigate should be a control or a screen um okay this is this is the name right how do we do that um we can use switch cases if else cases up to us let's let's use switch there is there is other way also like currently I'm not able to like get but we can we can use switch anyways uh we will say this item Dot we'll just use name only okay name I'll say if the name is home navigate to like this the first screen home screen this thing one okay wait um navigate here if it is like maybe about us on the second one is service is Right services navigate to home screen two okay let's let's check for these two first okay so I just created for these two the same thing we have to do for other so if I click up here see find right again if I go up here Okay click on Services I'm on services so this is this is okay I guess this is okay I guess okay same for about us and everything we have to write so if you don't know how switch work is which is very simple like this item dot name if this is equal to whom then see let me first uh align this for you okay firstly I thought like if I just provide the name up here it should navigate but it does not navigating foreign able to guess like what is that let's do it like this about us contact us and let's let us give like three four is anyway there's a screen only but whatever okay so like like this we have done if I click on like this fourth one I'll be on the screen but if I click on this third one I'll be on the third screen say home screen three and like this this will work right so yeah I was talking about like the switch case how this work so first thing is like you have to provide it a source okay so this is our switch value this item dot name so over this item dot name contain like this Home Services about us contact us now if it match with this home so it will navigate to this one this page oh this is screen if it matches with Services it will navigate to this and so on and so forth it is just as simple and here above also you can see like if I click up here see this switch value match value match result match value match result match value match result and if there is some default you can directly let's say if I have a default I can directly navigate to that page Okay so you can do that so like this top nav bar is done like it is functional also well I just showed you how you can make it functional as well okay so this this part is done now this thing let me just copy the text from here only so that we can save some time okay let me head over to this let me click on this container paste inside this container okay so see the font I'm using a single UI you can also use this font up to you okay the size of this one is 40 these is like 20 okay so this is fine and like uh here my text is from here so I can align it from like right align I can just write align it up to me like I can left align It Whatever whatever works for you right let's Center let's Center align it and let's see like if it looks okay me maybe like write a line that's fine or this text is like this right let me fix this text first okay let us fix this text now this is okay so yeah this is this is okay now okay now if you wanted to give like a little bit of spaces from this uh right hand side so what you can do is just click on both of these and we have this see padding so just give 20 see up here 20 okay 20 is fine I think yeah so see there is some padding up here also and for width for these two width what I'll say I'll say whatever my parent.where just just use that word only okay and for their exercise I'll say start from zero so now this these two are properly aligned right anyways you can you can like fix fix these like if you want it to be here this text maybe sometimes it looks ugly so we can we can fix it let's say I can press up enter up here and see now 2 is coming up here let's say from Dynamics if I press enter okay this this doesn't look good but let's say if I press enter from here okay now the uh uh hello from here let's put enter and let us see now this this looks this looks fine now okay so like this we can we can make now let's have a button I'll click on this container firstly I'll just click on this home screen let me just show you what up how a button look is okay so the button is like this let's uh increase the size of this button to make this button round we have this broad radius property make it 100. okay so see this it does round but I if I ask you like how you can give it a shadow so you will search for any property like there isn't any property that provide this button a shadow but even then we can give this button a shadow so how we will give it a shadow click on insert go to layout container here we have our container inside this container insert a button okay and x is 0 y should be 0 for this button for container X and Y are fine don't set it section Y where it should be button okay that was the issue 4 dot width I said that it's width and height also okay why this is error it's fine right Yeah the code was fine I don't know why it was giving an error now it's a height okay so this is fine and for the button I'll click on this button I'll give its water radius is hundred uh this is fine for this container Also let's give about a radius of 100 this is also fine now let's give it some Shadow let's say see this able to provide the shadow right here you see this I hope you are able to see this shadow okay let me click on this container so that I can move it if I turn off the Shadow the button look like this see without a shadow but with the shadow there is life inside this button right it is like that see I selected this bold so a container has this drop shadow property now so you can utilize this property amazing right once like this is done let me change the color of this button too so that it matches everything let me change it to this color and see if I hover over this button see it's color changing to Blue what you can do is simple fixes select this button uh here hover color here right currently it is like changing to this color when I'm hovering over it just remove this code and type self dot uh what is that fill maybe cell dot failure see now its color is fine little darker shade and you don't need to change anything that's it that's how quick it is uh for its width let's increase width to 350 maybe 350 or 350 is fine let's control X this container let's paste this container inside this and let me move this button up here okay anyways the color doesn't is not matching okay so to match the to give it proper color to this button let me select some other color maybe the clo or maybe this one plus yellow [Music] okay so you can you can select the color of your choice you can increase the font size to maybe 20 and we can say let's start something like this we can we can just give it a text and you can also change like this font of this text like my fonts are like SQL UI so I'll just stick with that you can change the font of these as well okay currently it is open sound so you can just select it to so you go UI you can change the size like 20. right so like this is this is fine amazing right now we have button where the proper Shadow amazing it is looking good right so this is our first example it is just similar to this now the three things left is like date and time this is simple about this anyways you can make now the thing is like how I how did I give the app version right or that what you need to do is go to your data section on the left hand side and search click on add data and search for Power app uh uh maybe not here click on connectors here you need to search for Power app for maker from here power app is there a space okay power apps for maker so see Power F4 makers when you click on it you will have this connector with you right once you have this connector with you you need to write like this code go to your app okay so this is the code for it I will not explain this code in this video anyways like this video is way too long you can just use this code I'll make a short video on this like one two minute video I'll make if you are eager to learn and I'll just once I made the video I'll just add it in the description of this video so but for now just uh let me just give you like little bit details so what does app.maker do is whichever app you are using right I just see like let's say if I'm on this app home screen dot tutorial so it will just move on to this app right so whatever the name of this app this thing name so it it is just giving the version okay so the get app version so whatever version We are on so if you are doing it for the first time it will throw you an error so you need to publish your app first okay save and publish your app close this open this again then you will able to you will be able to see your version like this and this text you can you can modify like here I have written something like this beta version okay so if you are on production you can say broad version okay beta version Alpha version it is up to you right so very very simple code if you if you want to understand this this is this code is very simple right so the code is not an issue it is very simple code you can you can understand this so anyways I'll make a video for it and I'll attach it in the description so once you have this code I just saved it inside this variable via app version okay you can just take a screenshot of it if you want okay once you are you have done that now simply like uh we have this thing right and if I wanted to show the versioning of my app up here okay I'll select this container I'll click on this label okay let me attach it like this uh go to app I'll just copy the name of this variable I'll use this variable up here so that it will give me an version of my app change the color to white let's say increase the size of a 216 Maybe okay write a line it give its uh padding to 20 right padding to 20 cool uh we can we can give it some like uh color maybe like this green blue whatever color you want which matches your theme just give it that color uh let's not give this one let's give this color and maybe a little darker yeah so see this ah there's a little bit up let me move this all the way to the down and yeah it is looking it is looking good right date anyways like date you can give let me just show you the code update if you are eager to learn like how to give date simple go to the text property say now not now but for date how you will since if if you give like this right uh now the issue with this is like this time this time is not Dynamic right this time will be not dynamic anyway we are seeing this time up here but uh don't think like this is dynamic it will change when your time will change okay reason is very simple like once like it is set to now then it is it is like it doesn't change actually if I click up here see the time is here it is 11 35 right and here see even though the code inside them is just same but reason because let's say if I remove this now from up here right control X and Ctrl V Now You See It updated the time it is 12 40 but it will remain 12 40 until unless I do the same for it okay so here you see it is 12 40 now but uh still it is showing me like 12 39. so we can we can make this thing also Dynamic not a very big thing to do uh we can make this Dynamic how we can make this Dynamic uh we just need to use a timer function and inside of a timer function we will just create one variable shall I show you okay let's let's learn that also that is little bit Advanced but let's say if your requirement for your app is like this make this uh this date and time Dynamic just create one timer see uh give its duration like a 100 millisecond okay this is millisecond okay 100 millisecond that's fine and where is that it has its property like on timer start on timer and okay one is a start start is like false just turn it to true so that every time the app opens like this uh this automatically turns on okay okay and repeat just turn the repeat also to true so this is good and just say on timer start just set one variable set to like where refresh time I'll say refresh time and I'll say no we'll do like this and that's it that's it copy even this is fine even on timer and also you can you can use this code but anyway not necessary once you create this variable let me double click firstly let me copy this whole thing whatever variables you create right go to your app on start property and just paste the code up here as well okay whatever like onstart whatever you want to show let's do this I'll copy this via refresh time variable name now instead of this I'll use this see currently it is blank right once I play the app I'll click on this see I am seeing the time up here uh now as the time increases right this will be like 12 43 12 44 because this timer is anyways started even though like you are seeing this zero up here because I have set it its duration 200 millisecond and it is repeating itself so let let us wait for one minute and let us see that if it changed to 1243 or not if it don't change we will look into the code but I am pretty sure it will change C I change it to 12 43. right so our code is working anyway if you if I close this now this will not work since uh timer doesn't work in the edit mode okay but like this this is fine okay now you will say like what to do with this just hide this turn this to visibility off and that's it right so I just showed you like you can have this time as well uh where do I put this time I don't actually need the timer pair but it's better to have like all right servers of something like uh this one all copyrights are reserved let me copy this thing okay now how do I get this copyright sign again go to Google say like copyright symbol okay oh man what is this go to copyright symbol just copy this just copy this paste up here simple as that right so this is how I get this copyright simple simple I'll copy this thing I'll go to my here if I want like I'll paste it up here okay and change its color to maybe White because here white make more sense Maybe grayish white okay so this is our date here I'll fix this let's move this second where is that let's move this label a little bit up move this to all the way to the down date I don't need it up here let's put date up here let's change this color to maybe this one anyways like uh here date is not making any sense because we do not have any space up here if this image is a little bit up we can we could put this data there UI is like this is not looking good otherwise where do we put this for now um man this data is irritating me let me put this um here in the center and this should be right aligned so that and 20 y that is didn't changed okay so this is this is done all copyrights are reserved let's have date up here only okay let me change its color to white for now let us keep it like this okay it is it is fine okay you might be seeing like this color is changing no need to change this color but yeah it's okay so this is our first example okay we created one button with a shadow a beautiful nav bar which is dynamic right and uh we have added uh this text up here like how to give description and all and how to style it I just showed you simple things to style them how to give the beta version of your app so you can give it like this uh and I just showed you how you can create this amazing svgs using canva so this is our first video on this home screen tutorial uh if I I can make other I can show you other also but uh like these will again take some time but for now for this video let's let's keep it till here only okay otherwise this video is going to be way too long I'll make a video for this and this as well now that you know the basic like uh how to give shadow to the button how to make this thing okay how to give your company logo how to align the text how to give app version and all okay so and how to make the snap bar so now you have uh idea like how you can how we can design your home screen right so this this won't take much time anyways this doesn't contain any app bar this is very very simple I would like to request you like you guys make this for yourself go to canva try to design the same UI because I have designed it from canva only I've got this image from there as well and even in canva you can design logos as well the slogo is also been designed from there and see this uh I've used this container and given a shadow so you can you can make so many things okay so you can you can I think you can make this one for our home screen number three I'll make a separate video for this I think uh anyways this is also like very simple these are what these are nothing but galleries only uh inside we have like different buttons right uh this is like I have created like three containers one two three right one container is for left nav bar one for like metal where my buttons are and this thing is about us container so we will see this in the next video uh till then goodbye take care and if you enjoyed this video if you learn from it don't forget to hit the Subscribe button like this video as well I'll see you in the next one till then goodbye take care

Channel: Last Minute Coders

Views: 4,350

Keywords: Home screen tutorial for canvas app, Home screen tutorial for beginner in canvas app, powerapp canvasapp home screen tutorial, how to make Home Screen in canvas app powerapp, how to design ui for Home screen in canvas app, how to make top nav bar using modern control in canvas app, how to make top nav bar in cavas app using a gallery, Amazing looking home screen tutorial for canvas app, Ideas to design home screen in canvas app

Id: kZQ9j13NetM

Length: 60min 10sec (3610 seconds)

Published: Wed Aug 16 2023