UI

Replicating Good Mood UI in Xamarin Forms

Howdy!!! 🙋‍♀️In this case we are going to replicate a Good Mood UI App obtained from Dribble. I hope this is use for you! 💚

⚠ 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 on 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 to you that the next block code explanation goes right where the comment line is added.
.
➖ I will not be using styles so that the properties added to the various components can be seen and understood faster in the explanation process.
.

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 in which we will be reproducing each one, these are:

La imagen tiene un atributo ALT vacío; su nombre de archivo es AskXammy_GoodMood_Structure-1024x748.png


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-31-at-3.48.51-PM-1024x44.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es AskXammy_GoodMood_1-552x1024.pngAs the first step, I want to build the floating button. To do it, I’ll use a ScrollView inside a Grid layout to get the desired effect. If you want to know more information about how to do it, you can enter here.

💡If you want to add a Shadow, you can use Xamarin Community Toolkit, check it here!


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-27-at-5.22.21-PM-1024x47.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-27-at-6.53.56-PM-599x1024.pngLet’s break down some important points!

 Rounded Image: I used a Frame where the magic property is IsClippedToBounds, which allow us to clip its children to its bound.

Inside this one, I added the Image which must have the same value both in WidthRequest and HeightRequest properties and half of that value in the CornerRadius property, to achieve the exact rounded shape.

You can see more information here.


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-31-at-3.50.23-PM-1024x45.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-27-at-8.50.57-PM-586x1024.pngLet’s continue with the Topics list, here the objective is to make it as scalable as possible using a CollectionView, in this way you can add as many Topics / tags as you need in your App without having to modify the XAML. 😎


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-27-at-8.19.02-PM-1024x46.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es 9ab2caea-2451-4320-890a-ce3e58ff89b5This block requires that the information is presented with a repetitive pattern which must be divided into two columns, for this, let’s also use the CollectionView.


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-27-at-9.26.25-PM-1024x47.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es AskXammy_GoodMood_5-556x1024.png

.

Do you remember the first step where we made the floating button? Yep! Well, in this step we are going to work on the description block and this is where we are going to see the “float” effect reflected!

.

.

.


In the main image of this post, I added some screenshots of the IOS version,  now I’ll leave those of Android.
La imagen tiene un atributo ALT vacío; su nombre de archivo es AskXammy_GoodMood_Android-1.png

And our Good Mood UI  is done! ?.
.
To see the complete code structure you can enter to my Github repository ?
.
.
Tagged , , ,

2 thoughts on “Replicating Good Mood UI in Xamarin Forms

Leave a Reply

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