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:
First of all…
We will be using Xamarin Community Toolkit 💚 . So, be sure to include the following steps in the screen developed below:
Add from NuGet Package the plugin: Xamarin.CommunityToolkit
Then, add the following namespace:
Let’s start with the first screen, to do it we need to define the main structure, we will be based on our previous article named Getting started with a UI and not die trying in Xamarin Forms.
Additionally, we need to add the main image in our screen.
Now, let’s create the Description block which is composed by the following components:
➖ Title & Box mark
Title & Box mark: I like this little effect! In this case, we are going to achieve a title with two different styles which have a decoration behind a pink Box!
For the title, we will use a single label with the FormattedText and for the mark behind we will use a BoxView.
The next step contains Description & Rounded Button! Note that we have a shadow for the Button, to edit we will be using Xamarin Community Toolkit!
Let’s continue with the second screen, working with the Header Block.
First, let’s start with the main layout structure that we will be using!
The block is composed by the following components:
➖ Profile picture
➖ Welcome & Name
➖ Search & Action Button
Finally, we are going to create a horizontal list with the Popular Fashion information. To achieve this, we will use a CollectionView.
This list of details will be broken down into the following data:
➖ Profile picture
➖ Like button
If you want to know more information about CollectionView, you can enter here.
Finally, let’s create the recommended list, also using a CollectionView!