UI, Xamarin

Replicating Burger UI App in Xamarin Forms

Howdy!!! ?‍♀In this case we are going to replicate a Burger App UI 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:

➖ At the beginning, you will see an image with the original UI where you will see divided into blocks as we’ll be working 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 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:

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-2.53.47-PM-1024x715.png


Defining the main structure: To start developing the complete design structure that will contain our first screen I will use a Grid.

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-3.01.02-PM-1024x51.png

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-5.05.55-PM-593x1024.pngAs we could see in the image of the structure, we will be replicating two screen, for the correct understanding we will divide the replication process for each one, we will finish the first one and we will see its result, and then the second one.
.
Once we create the main structure Let’s start with the first block! In this part we will be working with the Main Wall block and to replicate it we just need to add the following parts:
.
➖ Information icons
➖ Searchbar
.


This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-3.26.55-PM-1024x49.png

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-5.20.47-PM-586x1024.png

Let’s continue with our next block named 1.2 Menu.  Here we will be using a horizontal CollectionView. It’s important that the project adheres to the MVVM Design pattern. That’s why I used text properties Binded.

To replicate this block we just need to add the following parts:
➖ Food picture
➖ Name
.

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-5.22.57-PM-1024x48.png
.
Finally, to complete the first screen I also used a CollectionView to replicate the “1.3 Popular menu”.
.

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-5.24.28-PM-542x1024.png


Finally, the result of the first screen! ??

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-6.04.15-PM-1024x788.png


Let’s continue with the second page!

Defining the main structure: To start developing the complete design structure that will contain our second screen I will use a Grid.


This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-6.07.00-PM-1024x48.png

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-6.14.04-PM-569x1024.png.

Once created the main structure of our second screen, let’s start with the first block! In this part we will be working with the Main picture block and to replicate it we just need to add the following parts:

.
➖ Main image
.
➖ An overlapped title
.

.
.
.
.
.

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-6.31.12-PM-1024x47.png

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-6.34.26-PM-529x1024.png.

To replicate the “Rounded board” block, we just need to work with  PancakeView to achieve the oval shapes above.

.


This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-6.43.30-PM-1024x49.png

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-6.42.45-PM-566x1024.png.

To replicate the “Legend” block  we just need to add the following parts:

.

➖ Number of Restaurants
.
➖ More icon
.

.


This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-7.54.31-PM-1024x48.png

Finally, the last block named Menu options! I also used a CollectionView to replicate it!

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-8.21.04-PM-600x1024.png


And the result of the second screen it’s done! ??

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-23-at-10.30.59-PM-1024x801.png


And our Burger UI App design is done! ?

    To see the complete code you can enter to my Github repository ?

https://github.com/LeomarisReyes/BurgersUIApp

Spanish post: https://medium.com/@reyes.leomaris/replicando-ui-de-hamburguesas-en-xamarin-forms-17c5970ae5a1

Thanks for reading!!! ??

Tagged , , ,

9 thoughts on “Replicating Burger UI App in Xamarin Forms

  1. Great article. Thanks for taking the time to break the app into pieces. I do a lot of XAML, but I love to see how others approach a design. This was super helpful.

Leave a Reply

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