UI, Xamarin

Let’s replicate a Travel App in Xamarin Forms

Howdy!!! 💁‍♀ In this #LoveMonth let’s continue with the third post of the UI series for February! In this case we are going to replicate a Travel UI obtained from Dribble. You can check it 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.

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 TravelAppStructure-836x1024.png


This image has an empty alt attribute; its file name is TravelSession1-1024x55.png
.
Let’s start! In this part we will be working with the Principal block and to replicate we just need to add the following parts:
.
➖ Main image
➖ Place name
➖ Travel date
.
As is the first block of our page, we need to set the full layout structure that will be contains our design, in this case I use a StackLayout.
.
This image has an empty alt attribute; its file name is TravelContent1-547x1024.png

This image has an empty alt attribute; its file name is TravelSession2-1024x48.png
..
This image has an empty alt attribute; its file name is Btravel-Session_2-582x1024.pngTo build Days block let’s start dividing in three parts:
.
➖ Adding XAML design
.
Handling days changes: Here we’ll be using Visual State Manager (If you don’t know about read about it here.).
.
➖ Setting the look and feel
.
.
.
.
Adding XAML design:
.
Handling days changes (Add this code in your App.xaml):

Setting the appearance of the selected and unselected days (In this example we will be working in the YourPage.xaml.cs):

To create this block, I inspired in this sample.


This image has an empty alt attribute; its file name is TravelSession3-1024x50.png
.
This image has an empty alt attribute; its file name is Screen-Shot-2020-02-29-at-10.59.12-AM-594x1024.png
.
Once Days block finished, let’s continue with our last block named Schedule.  Here we will be using a 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:
.
➖ Time
➖ Travel indicator
➖ Place to go
➖ Place description
.
.
....
.

And our Travel design is done! 😎.

.Thanks for reading!!! 💚💕

Tagged , , ,

9 thoughts on “Let’s replicate a Travel App in Xamarin Forms

Leave a Reply

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