UI, Xamarin

Replicating Event App UI in Xamarin Forms

Howdy!!! 🙋‍♀️  Hope you’re doing well!! This time we’re going to replicate an Events UI, this design contains two screens, one of which we are going to replicate in this article: The event detail screen. It’s very beautiful and super easy to replicate! .. But… 🧐 I would like to challenge you to build the other screen !! Do you dare!!? 🤓 If your answer is positive, I hope to see your results! In the meantime, I leave you the design reference here!

In case you dare to do this “Mini-Challenge”, when you finished just publish it on your social media and tag me so I can see it! With this way, we all be sharing our experiences! And you will see that you will love, as much as I do, to replicate UIs!! 😍

⚠ 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 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 AskXammy_EventApp-778x1024.png


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-10-24-at-8.31.46-PM-1024x50.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-10-24-at-8.55.39-PM-566x1024.pngDefining the main structure: To start developing the complete design structure that will contain our first screen I will use a Grid. It’s important to note that we are using a ScrollView to prevent complications when viewing on small screens.

Once the main structure is defined, let’s start! 😎

To replicate the first block, we just need two components: The main picture and a heart image.

⚠ To define the rounded corners of the image I used PancakeView.  So, don’t forget to add the following namespace:


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-10-24-at-9.01.28-PM-1024x52.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-10-24-at-9.48.58-PM-1024x329.png🎯 For the second block, we’ll be using a Frame that will be containing all the descriptions required by the UI. I also will be using a Grid and before start coding, I show an image with the rows & columns division needed to define our Grid better.

✍️  So, let’s start coding 

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-10-24-at-11.43.23-PM-632x1024.pngThe following code block should be added in the part of the code added above where says “<! – Here add the code that is being explained in this block ->”. And this next block contains the following components:

      • Date Information frame
      • Event, Time and Location Information


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-10-25-at-12.08.17-AM-1024x50.png

In the next block, we just will be building the event details which contains the following components:

    • Description
    • Guest list (To create this list, I used a CollectionView 😋)
    • Go Button

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-10-25-at-11.04.01-PM-659x1024.png


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-10-25-at-11.13.36-PM-1024x48.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es 22621ff6-cda0-4af6-8b67-18422b7d035fAnd finally, let’s add the “Ticket price” block. Here we also use a PancakeView to de Rounded corners.

⚠ Sometimes we want our design to only adapt to one type of orientation, for this reason, I configured it only for Portrait. If you want more information on how to do it, you can access here.

.

.


.
In the main image of this post, I added some screenshot of the IOS version,  now I’ll leave those of the Android one.
La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-10-27-at-9.49.55-PM-1024x898.png

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

7 thoughts on “Replicating Event App UI in Xamarin Forms

Leave a Reply

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