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 creating our main layout structure which will be contained in a Grid. If you want to know more information about Grid, you can enter here.
Then, add a Background color to the page! 🤓
Let’s start creating our first block, we’ll include the header components which is composed by three controls that are the following:
➖Book Worm logo
In this case, we need to make a gradient in the main picture, to explain it better let devide in two parts:
1⃣. Let’s start including the first two components:
2⃣. Finally, let’s work with the gradient in the image.
How will we do it?
First, let’s add the Image, then let’s continue adding a Frame with a LinearGradientBrush to achieve that on both platforms the gradient is perceived on the image and thus achieve the desired effect. If you want to know more information about Gradients in Xamarin Forms you can read this article, it’s a very useful topic.
For the second block we just need to add two controls which are the following:
To finish the blocks that complete the first screen, let’s add the “Cards”.
Let’s continue with the last screen which we will be named RoomPage! To build it we’ll be breaking down each one of the parts it contains. Let’s start step by step!
1⃣. Preparing main layout and Upper components: We will start working with the Background image and we’ll be adding top buttons which are the Back and Take a Tour Button.
2⃣. Working with the Frame structure: In addition to adding the Frame, in this part, we will be working with the layout structure that the Frame will contain.
3⃣. Adding the components inside the Frame.
In the main image of this post, I added some screenshots of the IOS version, now I’ll leave those of the Android one.