Let’s replicate a Banking Profile UI in Xamarin Forms

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:

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

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.

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.

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

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

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!!!