UI, Xamarin

(Part 2) Replicating Flight UI: Working with the XAML

Howdy!!! ?‍♀ I’ll continue doing what I love ?In this case we are going to replicate a Flight UI obtained from Dribble from Gleb Kuznetsov✈. You can check it here!
.
To get the best out of this post, if you haven’t seen it yet, I recommend reading the first part of this article named “(Part 1) Replicating Flight UI: Preparing the project to work with MVVM“.

⚠ 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.
.

First of all, let’s add the NuGet Package needed!

  • To achieve gradient block and rounded borders, add PancakeView! ??      (⚠ We will be using this NuGet in more than one block, you can identify them when you see them marked with the star.  ⭐)

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-07-at-12.18.21-AM-1024x89.png

Them, add the following namespace in your XAML:


Let’s start!

Let’s divide the original design into blocks

For better understanding, I have divided the original design into blocks, which are listed in the order in which we will be reproducing them, these are:

This image has an empty alt attribute; its file name is MainFlightBanner-1024x716.png


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

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

Let’s start! In this part we will be working with the Main Wall block and to replicate it we just need to add the following parts:
.
➖ Blue background bar
➖ Footer options
.
As the first block of our page, we need to set the full layout structure that will be containing our design, in this case I use a Grid.

Once we create the main structure, let’s go step by step, to build the first block. For each code block I have added some instructional lines so that you know where to add the code, which say: <! – Add here the “Block name” ->.

➖Blue background bar

➖ ⭐ Footer options


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

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-06-at-1.27.58-PM-527x1024.png.

Now, let’s continue with one of the coolest blocks “Gradient background”! ?.

⭐ Since the goal of the Application is that different flights can be viewed in a gradient frame, in this block we’ll be using a CollectionView.

Do you remember the Flights Model created in the first part of these series? Great! Let’s start using in the CollectionView, thanks to the ItemsSource property we can easily Bind our data.   (ItemsSource=”{Binding flight}”).

⚠ Important: For now we will add a fixed size to the Grid that is indicated in the code as <! — WidthRequest will be changed later- ->, this is so that you can see the design. (In the next block you can remove the WidthRequest property.)

Here the code implementation!


This image has an empty alt attribute; its file name is Screen-Shot-2020-05-07-at-5.11.17-PM.png

Now, let’s start to fill out the information from the flight and the passengers.

As the information contained in the complete flight block is a bit long, I have divided in “Flight information part (1 and 2,3 )” blocks.!

⚠ Important: Here you can already remove the temporary WidthRequest indicated in the previous block.

.

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-07-at-5.25.14-PM.png


This image has an empty alt attribute; its file name is Screen-Shot-2020-05-07-at-6.12.21-PM.png

So, Let’s continue with the “Flight information (Part 2) block”.

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-07-at-6.09.31-PM.png

.


This image has an empty alt attribute; its file name is Screen-Shot-2020-05-07-at-6.20.11-PM.png

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-14-at-5.15.09-PM-530x1024.pngRemember the passenger information we filled out in the first part of this article? This is the time to show it! Thanks to this design we will be able to display the passenger information of each flight. In this block we will also be using a CollectionView.

⭐ We achieve the effect of rounded images by adding the CornerRadius with a value of 50% of that indicated in the HeightRequest property.


This image has an empty alt attribute; its file name is Screen-Shot-2020-05-07-at-7.11.48-PM.png

.

Finally, let’s add the Payment block!This image has an empty alt attribute; its file name is Screen-Shot-2020-05-14-at-5.21.16-PM-579x1024.png

.

.

.

.

.


And our Flight UI App is done! ?.
Tagged , , ,

11 thoughts on “(Part 2) Replicating Flight UI: Working with the XAML

  1. Leomaris podrías hacer un día un directo/grabado de hacer una app desde 0 a fin. Algo que tuviera un poco de todo, themming, código, etc… La gente busca mucho eso y no hay nada en google ni Youtube

    1. Hola! El objetivo es ir detallando esos puntos importantes para hacer una App desde cero y que los temas no sean abrumadores, por eso los divido, pero si hay un punto específico que quisieras que trate pues dime y lo escribo!

    1. Hello!! 💕 I’m glad you liked it! We will not have a third part, the second is the last of this series! But keep an eye out for the other UIs!

Leave a Reply

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