UI, Xamarin

Replicating Food Delivery UI in Xamarin Forms

Howdy!!! 🙋‍♀️In this case, we are going to replicate a Bill Details UI Ap obtained from Dribble. You can check the design here!

⚠ Before starting, to get the best out of the post, I’ll leave you some instructional notes so that you have a better experience reproducing the UI:

➖ In the beginning, you will see an image with the original UI where you will see divided into blocks as we’ll be working on each part of the design.
.
➖ Each block presents the image with the design explicitly that we’ll be working on that block, they are highlighted in a box.
.
➖ In each of the code blocks, you can see a comment that says: “Here add the code that is being explained in the next block“. To keep you as focused as possible, this part indicates to you that the next block code explanation goes right where the comment line is added.
.
➖ I will not be using styles so that the properties added to the various components can be seen and understood faster in the explanation process.
.

Let’s start!

Let’s divide the original design into blocks

To better understand, I have divided the original design into blocks, which are listed in the order in which we will be reproducing each one, these are:

La imagen tiene un atributo ALT vacío; su nombre de archivo es FoodDeliveryUI-1024x835.png


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-14-at-8.31.04-PM-1024x44.png

First of all, let’s hide the IOS status bar, to create a cleaner design. To do it, you just need to add the following code in your ContentPage header:

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-19-at-11.44.42-PM-522x1024.png

Let’s start with a simple page, the main layout will be contained in a Grid. If you want to know about Grid, you can enter here.

To build the main screen, we need to add the following controls:

🟡  Back Button

🟡  Skip label

🟡  Main image

🟡 Title label. As you see, the title has two different styles. To see more information on how to do it you can open the following post.

🟡 Description label.

🟡  Circle Button. If you want more information about how to do it, you can enter here..


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-14-at-9.40.11-PM-1024x49.png

It’s important to see that the second page has a Floating button, that’s why we’ll adding a ScrollView inside a Grid. Once created, let’s add a Grid as Main layout. (If you want to know more information about floating button, you can enter here.)

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-14-at-9.54.04-PM-550x1024.pngAnd now, let’s continue with the “Main Delivery” Block.

.


La imagen tiene un atributo ALT vacío; su nombre de archivo es 3da003aa-e9eb-462a-a38b-b518a52e59ba

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-16-at-4.54.24-PM-589x1024.pngNow let’s continue creating the Category list. To replicate it, we’ll be using a CollectionView.


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-11-at-10.37.35-PM-1024x50.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-20-at-12.12.10-AM-563x1024.pngAnd finally, let’s add the Popular Food list, we also will be using a CollectionView.

To add the floating button, go to the block two and identify exactly where it says “<! – Here add the Floating button deployment ->”, then replace that line with the following code:


And our Food Delivery UI  is done! ?.
.
To see the complete code structure you can enter to my Github repository ?
.
.
Tagged , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *