UI, Xamarin

Replicating user profile UI in Xamarin Forms

Howdy!!! 💁‍♀ For February, as #LoveMonth, I decided to create a post series on a topic that I  💚 !! ... So weekly, I’ll be replicating some UIs starting from basic to more complex. Together we can create great things, so are you ready to start it!?  😎

The first article of this series is a basic UI that we will replicate, based on a User Profile design obtained from Dribble. You can check it here!  This time we will be explaining and creating the UI step!

To achieve a clear understanding, I will be dividing this topic into the following points:

➖ Let’s divide the original design into blocks

➖ Analyzing and implementing each block obtained


 
⚠ 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 of priority with which we will be reproducing each one, they are:

This image has an empty alt attribute; its file name is Screen-Shot-2020-01-29-at-12.19.52-AM.png


This image has an empty alt attribute; its file name is Block1-1024x53.pngThis image has an empty alt attribute; its file name is Block1Sample.png

Let’s start! 😎 The first block is named “Profile picture”. To do it, I used the following image. The main design structure is contained in a Grid. In this grid we’ll only be using one line, so that the effect of the Block called “Contact information Frame” can have better results.


This image has an empty alt attribute; its file name is Block2-1024x58.png
 
For this block, I used a StackLayout and mixed it  with the Frame to achieve the oval shapes above and the rectangular ones below.

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

Here the style created (If you don’t know about styles you can read this article.)

 

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

Here, we also have worked with a Grid to achieve reproduce blocks three and four. To create the Phone and message buttons, I used TranslationsY and TranslationsX. To accommodate a little more outside the Frame added above.

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

Here the style created:


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

To end up, inside the grid created in the previous block, let’s continue add controls with the contact information remaining.

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

Here the styles created:

And our User Profile design is done! 😎


 
    To see the complete code structure you can enter to my Github repository 😍

https://github.com/LeomarisReyes/UserProfileUISample

 
 

Second serie post: https://askxammy.com/lets-replicate-a-banking-profile-ui-in-xamarin-forms/

Spanish post: https://medium.com/@reyes.leomaris/replicando-un-ui-de-perfil-de-usuario-en-xamarin-forms-bde06bdf0e52

Thanks for reading!!! 💚💕

Tagged , , ,

5 thoughts on “Replicating user profile UI in Xamarin Forms

  1. I read a lot of your articles. It’s simple the best. Thank you so much and continue with your job. My suggestion to add more articles about FlexLayot,Shell and maybe Xamarin Native(i know its big area).
    Good luck

    1. I have to admit, after finding this sight today, it made my favourites list. Well done! These are great content

Leave a Reply

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