UI, Xamarin

Let’s replicate a Banking Profile UI in Xamarin Forms

Howdy!!! 💁‍♀ In this  #LoveMonth, let’s continue with the second post of the UI series for February! In this case we are going to replicate a Banking Profile 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 BankingAppStructure-1024x901.png


This image has an empty alt attribute; its file name is Block1-1024x53.png
.
Let’s start! 😍 The first block is named “Profile picture” and to replicate we need to add the following things:
.
➖Profile picture (Obtained from here)
➖Name profile owner
➖ID profile owner
.
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 ScrollView and a StackLayout.
.
This image has an empty alt attribute; its file name is BPSample1-536x1024.png


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

This image has an empty alt attribute; its file name is BPSample2-576x1024.png

To replicate the “Contact information frame” block, we just need to add a frame to achieve the oval shapes above.


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

To add all this contact information we will be working with a Grid which will be contained in Two columns and six rows. Let’s start adding “Your balance” block.

This image has an empty alt attribute; its file name is BPSample3-541x1024.png


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

For “Cards” block we will be using a CollectionView. it’s important that the project adheres to the the MVVM Design pattern. That’s why I used text properties Binded.

This image has an empty alt attribute; its file name is BPSessions4.png


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

And finally I also used a CollectionView to replicate the history list.

This image has an empty alt attribute; its file name is BPSession5S.png


In the main image of this post, I added some screenshot of the IOS version,  now I’ll leave those of the Android one.

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


And our Banking Profile design is done! 😎

    To see the complete code structure you can enter to my Github repository 😍https://github.com/LeomarisReyes/BankingAppUISample

Spanish post: https://medium.com/@reyes.leomaris/replicando-ui-de-perfil-bancario-en-xamarin-forms-5bbfac0a8035

Thanks for reading!!! 💚💕

Tagged , , ,

Leave a Reply

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