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, let’s hide the IOS status bar, to create a cleaner design. To do it, you just need to add the following code in your ContentPage header:
Let’s start with a simple page, the main layout will be contained in a Grid. If you want to know about Grid, you can enter here.
To build the main screen, we need to add the following controls:
🟡 Back Button
🟡 Skip label
🟡 Main image
🟡 Title label. As you see, the title has two different styles. To see more information on how to do it you can open the following post.
🟡 Description label.
🟡 Circle Button. If you want more information about how to do it, you can enter here..
It’s important to see that the second page has a Floating button, that’s why we’ll adding a ScrollView inside a Grid. Once created, let’s add a Grid as Main layout. (If you want to know more information about floating button, you can enter here.)
And now, let’s continue with the “Main Delivery” Block.
Now let’s continue creating the Category list. To replicate it, we’ll be using a CollectionView.
And finally, let’s add the Popular Food list, we also will be using a CollectionView.
To add the floating button, go to the block two and identify exactly where it says “<! – Here add the Floating button deployment ->”, then replace that line with the following code: