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:
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:
Let’s start with the left screen
It’s important to know that before everything we need to define the main screen layout structure. In this case I will use a Grid (I love it 💕 )
When doing UI replication it’s very important to pay attention to every detail of our block to replicate, in this case for the Main Header Block we will need to add the following components:
Now, let’s use a CollectionView to create the sneaker list! If you want to know more information about it, you can enter here.
In this block we will need to add the following components:
Let’s continue with the last screen
.Let’s continue with the last screen, in this case is the sneaker detail. To create the main structure I also will be using a Grid as in the block code added below:
⚠ If you want to know more information about the Grid. You can enter here.
The first block is named “Sneaker menu” and here we have a main circle, to replicate it we will be using Shapes in Xamarin Forms.
To work in this block, we will need to use some additional components, such as the CollectionView and we will add circular buttons with some available colors (You can see this more detailed topic here).
In detail, we must integrate the following components
And finally! Let’s work with the Description block!
⚠ Sometimes we want our design to only adapt to one type of orientation, for this reason I configured it only for Portrait. If you want more information on how to do it, you can access here.