.NET MAUI UI Challenge # 5 - Food Delivery App

hello how are you I'm Hector Perez from Dev School welcome to another graphical interface challenge to replicate a triple design in.net Maui this time I came across this design by Amir Hussain in which he replicates a food delivery app we have three screens that look honestly pretty good but I've chosen to do this Middle Design which I find quite attractive it's the challenge we're going to take on this time but before we continue I invite you to visit the site at courses.devs.school where you can find specialized training in.net Maui for creating cross-platform applications with that said let's get started foreign let's start with this challenge to do this I've removed all the pre-created code or the default.net Maui template and assigned main page as the starting page I haven't done anything else this is because it's a graphical interface design because it's a graphical interface challenge so we're going to reuse this page called main page once we've done this I'm going to go to this file called mainpage.saml and change the background color we're going to review some of the colors that are created by default or that we have available in the initial template if we go to the folder called resources then to the folder Styles we see a file called colors.zamil and we can distinguish different colors that come pre-created by default in my case I'm interested in reducing these gray colors to use them as part of the add colors which are these colors we see here so we go back to the main page.xaml file and we're going to change the background color will indicate that we want a background color equal to static resource and use the darkest or one of the darkest colors which is gray 900. let's start the application to see how the design we are working on looks once application has been deployed we can see the design in real time as we create it the next step is to analyze the visual structure of the page we're going to recreate in order to obtain the different dimensions and locate different elements in the XML code let's analyze how many rows we would need to use or create within a grid to accommodate all these elements we will Define a first row for this upper section which would be the navigation bar then a second row for this title that says double Smoky Burger after road that occupies all the content of this image and the nutritional information of the burger and another row for the ingredients section and is descriptive text of the ingredients we will use a last row for this button that says add to cart so there would be one two three four and five rows that we need to Define as part of the XML code let's go back to visual studio we will create a new grid with its row definitions equal to and we will create different rows the first one with 10 percent of space the second another 10 percent the third one 55 percent the fourth row 15 and the last one 10 percent of space okay with this we already have the Grid or main container for our design once we have defined the container let's go back to the design and as part of this first row we can see three elements an icon a text and a last icon what we're going to do is create a grid that contains three columns we go back to the XML code and indicate that we want a new grid with its column definitions we will indicate that all columns have the same width and we will also indicate that we want a margin equal to 20 to separate the content from the edges of the mobile device a little once we have done this in order to use these icons that we see here on the screen which we are actually going to use and icon font for the icons that I have previously created I'm going to import the necessary fonts for this project as part of the special folder called fonts which is part of the project I'm going to drag and drop these fonts I have to stop duplication to be able to add the fonts to the project the fonts that we're going to use first is a font called fontello which is the icon fund we will also use the Roboto font in its light and regular version and a special font called space growth Square in its Vault medium regular semi-volt Vault and regular versions this is because we have different styles of the same font it is one that you can see on the title screen this font that has this somewhat strange edges and is used a lot in the application for this text is also used so that is why we have to import several font styles since we have imported these files let's go back to the Maui program in this case and in order not to waste too much time on the definition of the fonts I have previously created this code snippet in which I add each of the font names and give an alias to each of them basically what I do is take the first section of the font name or the name as an alias and then each of the initial letters according to the font style for example for the Bold version I put an uppercase B I do this with each of the fonts and with this we have added the fonts that we will use throughout the application including a font called fontello which contains the set of icons that I have prepared beforehand for the funds I went to this site called fontello.com and selected these fonts that you can see on the screen these three icons the heart icon the back arrow icon and the clock icon are the icons that we will use on our sample screen once we have done this let's go back to mainpage.xaml and within the Grid at the top of the navigation bar we will start adding the first icon we do this through an image control we will indicate horizontal options equal to start vertical options equal to Center to Center this image let's indicate that we want a source for our image because we're going to use an icon font and then within results we will indicate font image source we will indicate that we want to use a font family equal to icons which was the font we defined with an alias earlier we indicate glyph equal to 100 symbol a hash symbol an X uppercase E 802 which is the code for this specific icon let's indicate a size equal to 20 units and a color equal to static resource and use the gray in its 200 variation after saving the changes we'll start the execution of the application once this is done we can see the first icon in the top left corner the next step is to create the application title which says foot detail we'll return to our xaml code and as part of the grid after the image control we create a label control we position it in column number one with a font family equal to Roboto R font size equal to 18 units horizontal text alignment equal to Center text equal to foot detail X color equal to static resource using the 200 version of the gray color and vertical options equal to Center we save the changes and can see the application title next we create the last image control that contains the last icon we duplicate the existing image control but position it in column number two its horizontal options will be equal to end as we want this icon to be on the right side its vertical options are fine being equal to Center we change the gleaf so that instead of ao2 it is equal to 800. we save the changes and with that we have the last icon in the navigation bar we have finished with this top part the next step is to define the label control to display the text of the product that is currently being shown I'm going to compress this grid and will continue working within the main grid this time we're going to create a label control and position the label in row number one we'll assign a left margin of 20 a top to bottom margin of 10 comma 0 comma zero the fun family will be set to space b which is the bald version of this font font size equal to 25 units text equal to double Smoky burger and a text color that is equal to static resource version 100 of this gray close the tag and we now have this title that we see here which looks quite similar to the version on Rebel which is this font that we can see the next step is to Define this section that displays the product information and the product image which I find to be a rather interesting design to achieve this goal we're going to create a grid and we'll give a percentage to Discovery section with this gray background that we see on the left side and another percentage for the image control will return to visual studio and I'll start by defining a grid that we're going to place in row number two we'll indicate that we want two columns one with 30 percent of space and the second width 70 percent of space next we've already defined this grid that we can see here but we need to start defining the sections for the information within the left part or this section of the left part that displays product information and we'll do this by creating a set of grids that contain a couple of elements we will indicate that we want to create another grid we will Define a set of row definitions and make all rows the same size we will create a total of five rows corresponding to each of the sections we see here within this grid we will assign the grayish color that we see on the left side to create this variation we will return to the file called colors.saml and we can see different variations of a gray color we do not have a definition of a darker gray meaning we go from the value 600 to 900 therefore we will duplicate one of the colors call it gray 700 and the color will be equal to 30 30 which we see is a darker gray color with this color we save the changes and return to mainpage.xaml we will create a round rectangle to have that curved shape that we can see in the design we will place this round rectangle and indicate that it has a row span equal to 5 so that it uses all the available space of this grid we will also indicate that we want a fill equal to static resource gray 700 which is the color we just defined in the colors Style we save the changes and now we can see that we have this section that this part of the round rectangle the only thing left is to define the rounding in the corners to do this we will indicate Corner radius equal to 0 comma 40 comma 0 comma 40 to only affect this pair of edges on the right with this we have achieved this section of the product information the next step is to create this set of product information that we are displaying after this round rectangle that serves only to show the background of this section we will create another grid element with a margin equal to 10 comma 10 comma 0 comma 0 to have a space to the left and up will indicate that we want to create a set of rows specifically three rows which correspond to this board rate the rating and this control that has a set of stars within this grid we have created we will create a label control with a font family equal to space r a font size equal to 12 the text that says rate and the text color equal to static resource grade 200. I close this first tag and save the changes to see it is in real time we already have the word right here let's create the other elements I will duplicate this level control and indicate that I want to position it in row number one the font family will be spaceballed the font size will be 14 and the text will be 4.8 out of 5 from 12 343 reviews finally the color will be gray 100 I save the changes and we already have this second part that shows the product writing the next step is to recreate the star control I could put an image but I prefer to show you a control that you could use in my specific case I will use async Fusion control that allows us to display this type of information I will use the syncfusion control because it is a company that is constantly updating its components so I highly doubt that you will have problems when wanting to use it in a real application and with the view towards the future I looked for some free options but several packages are outdated and have been without updates for a long time that's why I chose to use as in Fusion control to use this control I will go to the nuget package manager of the solution search for the term syncfusion Maui inputs and we have this control or this nougat package which we're going to install as part of the solution once the package has been installed I will close this tab go to my web program and as part of the Builder I will indicate that I want to use the configure syncfusion core method which Imports the namespace automatically we are now ready to use the control therefore let's go to mainpage.xaml and as part of the namespaces I will Define a new namespace called rating that is equal to CLR namespace same fusion.mary.inputs let's indicate that we want to use the assembly equal to syncfusion.mary.inputs with this namespace added we can now use the control as part of the application let's go to the bottom where we have this grid definition that contains three rows and only contains two label controls at the moment after the last label control let's indicate rating column SF rating which is the control we are interested in we will indicate that we want to position it in the last row which is actually Row 3 with the background color equal to transparent do not have a background color horizontal options equal to start to position it at the beginning item size equal to 15 that is the size of each of the Stars we will also indicate that we want a Precision equal to exact which is useful for indicating how much we want to fill each of the stars in the control and we will set an initial value of 4.6 for example to show a part in yellow of the stars and the part that has not been filled as well in addition to this we also have to fill in the information of the rating settings it is through the use of rating color SF rating there is a property called rating settings to configure the outline the color of the Stars Etc in our case we will use the rating settings element with some properties such as for example rated field which is the fill color of the Stars let's use the color FFC 71f for the fill and the rated stroke which is the outline of the Stars I have noticed that a default color is used so I will use the same color as the star field to not have any visual change of the star we will also indicate that we want to use the property on rated field with a gray color and also a rated stroke equal to gray also to not have any visual discrepancy with these changes I will save the xaml file and start duplication again to see how this looks with this implementation we can now see the Start Control that shows the information satisfactorily the next step is to create each of the sections of the additional information for this specific product to do this I will compress the first grid create a second grid which I will position in row number one I will create or specify a margin that is equal to 10 comma 10 comma 0 comma zero also row definitions equal to two rows I will create two rows of the same size also row spacing equal to 5 units this is to separate each of the text of each of the sections and not to have them so close together inside this grid I will create a first label control with its font family equal to space r font size equal to 12 units takes that is equal to delivery time also text color that is equal to static resource grade 200 and finally its vertical options equal to end this is to push the label that says delivery time down and not to have it too far apart from the time once this is done I will proceed to create a horizontal stack layout which I will position in row number one and also assign a spacing equal to 5. this horizontal stack layout is because we have here our first icon that shows a clock followed by the text of 20 minutes that's why we are creating a horizontal stack layout as part of this grid inside we can copy the content or rather this image control that we had used previously to not have to write everything again so I paste the content of the image control and indicate that I want to position this image control in the First Column or rather we don't have columns here because we are inside a horizontal stack layout let's indicate that we want its horizontal options equal to end and vertical options equal to start as part of this font in mesh Source we use the same icon fund the glyph will be equal to 801 the size will be equal to 20 and it will be the same color so let's save these changes and we can now see the first icon that shows the time information after the horizontal stack layout or rather inside the horizontal stack layout but after the image control I will proceed to copy one of these label controls that already contains all the information or the properties set I will indicate that the font family will be equal to space b because it is a slightly darker font the font size will be equal to 15. the text will be equal to 20 minutes the text color will be equal to gray 100 and vertical options will be equal to start with these changes we save the application and we already have this first section that shows the delivery time the next part is easier because we already have this section defined so all we have to do is duplicate one of the grids so I will duplicate this grid that is after the first grid I will paste the grid and make some modifications such as removing the horizontal stack layout and replacing it with the label that is inside with this then we will indicate that we want the Grid in row number two the same margin the same row definitions same row spacing the first level control will be exactly the same or well we will only change the text to calories but the other properties remain the same with this last label we will indicate that the font family is equal to SB also we will position this label in row number one the text will be equal to 1200 calories let's save the changes to see how this looks and notice how we already have this second section once again let's duplicate this grid and only make some minor changes such as for example we want to position this Grid in row number three we will only change the text the first text will be equal to branch and the second text will be equal to click Road the properties are the same so we already have this fourth shown that we see on screen let's create the last information section by duplicating the grid and changing only the text again the first text by price and the second text by a value of 10. let's save the changes in fact you have to change the value of the row to 4. with this we have completed this first part of the first section on the left that shows the product information we are viewing the next step is to create the image on the right side we will place this image within the grid we have defined with two columns one with 0.3 star and the second with 70 space after this grid we will create the image control which we will place in column number one with an aspect equal to fill and a source equal to burger.png we have not imported this image yet so I will stop the execution of the application and drag the image into the folder called images once we have added DC mesh we will start the execution of the application to see how it looks so far with the image control we have added we now have this burger image that looks pretty good in any case if you wanted this image to be positioned more to the right as is the case with the design we can see audible what we could do is push this grid containing both columns a little more to the right so we could add a margin equal to zero on the left 0 on the top minus 50 on the right and finally a value of zero if we save the changes we can see that we have successfully pushed this image to the right once we have finished this section of the information we will move on to the ingredients section to do this after this grid that defines the 0.3 and 0.7 columns we will create another grid which we will place in row number three with the margin equal to 20 comma 10 comma 0 comma 0. its row definitions will be equal to 30 percent for the first row and 17 for the second row this is because we will use the first row for this section or this text that says ingredients and the second for the text of the ingredients within the grid we will create a label control with a font family equal to space m font size equal to 18 a text that is equal to ingredients a text color that is equal to static resource gray 100 and its vertical text alignment equal to Center we save the changes and can see the title that says ingredients this is because I forgot to add the dot for the second row if we save the changes you can now see the title correctly the next step is to create the label control to display the information of the ingredients we will position this level control in row number one with a font family equal to Roberto in its light version and specify a line height equal to 1.3 to provide greater separation between each ingredient line and avoiding them being too close together the following property will be the same copy and paste the text here since it is the text from the dribble design also modify its text color property to be equal to static resource gray in its 200 version and finally the vertical text alignment property to be equal to Center save the changes and now you can see that we have this text section correctly set up here I missed a no so the correct font didn't load with this change we have the ingredients section displayed satisfactorily the last thing we will do is create this button that we see at the bottom to do this after the grid we have defined we will create a button control that we will place in row number four with the margin equal to 15 units on the sides and 0 units on the top and bottom we also specify a background color equal to FFC 71f a corner radius equal to 30 units font attributes equal to bold font family equal to Roboto error that is the regular version of the Roboto font a font size equal to 18 units Arc height request equal to 50 units text that says add to cart and finally a text color equal to Black after saving the changes and returning to the emulator we can now see this beautiful button positioned at the very bottom with this we conclude the dribble design if we place the design and application or the page we have developed with code side by side we see that both designs resemble each other I hope this video is helpful for you designs that you find inspiration with them and if you liked the video I invite you to like the video subscribe share it and click on the notification Bell so you know when I launch a new graphical interface challenge or content related to.net in general see you in the next video [Music] [Applause] [Music] thank you [Music]

Channel: Devs School

Views: 9,317

Keywords: .net maui, .net maui challenge, .net maui ui design, .net maui xaml, .net maui delivery app

Id: lepymVqrqYw

Length: 27min 7sec (1627 seconds)

Published: Mon May 29 2023