UI, Xamarin

Replicating Real Estate Property details UI in Xamarin Forms

Howdy!!! 💁‍♀ In this case we are going to replicate a Real Estate 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-07-09-at-10.49.33-PM-841x1024.png


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

This image has an empty alt attribute; its file name is Screen-Shot-2020-07-13-at-12.53.02-AM-594x1024.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:

Let’s start! In this section we will be working with the “Main picture” block and to replicate it we just need to add the following parts:
.
➖ Main image
➖ Like transparent button
.
Defining the main structure: To start developing the complete design structure that will contain our first screen I will use a Grid. Within this Grid, we will be adding a ScrollView with which later we will achieve the floating effect of the buttons of block 5. Inside the ScrollView we will work the structure of blocks 1 to 4 with another Grid.

Once main structure created, let’s work the first block:

As have you noticed I implemented the new simplification of the Grid! 😍 This is now available as of Xamarin.Forms 4.7-pre1.

This image has an empty alt attribute; its file name is Screen-Shot-2020-07-09-at-11.15.22-PM-1024x45.png

This image has an empty alt attribute; its file name is Screen-Shot-2020-07-13-at-12.56.39-AM-584x1024.png

..

.

So, Let’s continue with the “Main information” block. To build it we just need to add the basic house information such as the price, location and the hours since it was published.

.

...


This image has an empty alt attribute; its file name is Screen-Shot-2020-07-09-at-11.15.29-PM-1024x41.png

This image has an empty alt attribute; its file name is Screen-Shot-2020-07-13-at-1.04.48-AM-577x1024.png

And now, Let’s continue with our next block named House information.  To do it we’ll be using an horizontal CollectionView. It’s important that the project adheres to the MVVM Design pattern. That’s why I used text properties Binded.


This image has an empty alt attribute; its file name is Screen-Shot-2020-07-09-at-11.15.37-PM-1024x43.png

.This image has an empty alt attribute; its file name is Screen-Shot-2020-07-13-at-7.09.05-PM-600x1024.png

.

And almost to finish, in this block we will be adding the house description. In the example I added a lot of text so that the floating effect of the buttons in the next block could be better appreciated.

.

.

.


This image has an empty alt attribute; its file name is Screen-Shot-2020-07-09-at-11.15.47-PM-1024x43.png

This image has an empty alt attribute; its file name is Screen-Shot-2020-07-14-at-3.30.52-PM-562x1024.png

.

Finally, let’s add the “Floating buttons” block.  Do you remember when defined the main structure in the first block?  Yes! In this block we added a comment just like the following: “<!– Here add the code that is being explained in this block number five (5)–>” in this place let’s add the following code:

.

.

.

.


And our Real Estate design UI page is done! 😎.

Tagged , , ,

Leave a Reply

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