UI

Replicating Bill Details UI in Xamarin Forms

Howdy!!! 🙋‍♀️In this case we are going to replicate a Bill Details UI Ap obtained from Dribble. You can check the design here!

⚠ 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.
.

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 Screen-Shot-2020-12-10-at-9.45.58-PM-857x1024.png


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-11-27-at-8.52.29-PM-1024x53.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-10-at-10.40.28-PM-589x1024.png
Defining the main structure:
 To start developing the complete design structure that will contain our first screen I will use a Grid. It’s important to note that we are using a ScrollView to prevent complications when viewing on small screens.

Once the main structure is defined, let’s start! 😎

To replicate the first block we’ll be dividing into three parts:

1⃣ Frame with price information

2⃣ Main image

3⃣ Indicator Bar


1⃣ Starting with the Frame with price information, we will be exploring the Shape and the Styles! Let’s start with the .xaml implementation:

And then, as we see below, let’s create the three styles that will be applying to our controls: MainAmount, SecundaryText, and DivisionLine.

2⃣ Now, let’s continue with the Main image

3⃣ And finally, let’s add the indicator Bar. To do it, I used a PancakeVew! 💕


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-08-at-11.50.25-PM-1024x52.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-10-at-10.43.52-PM-594x1024.png
I love the part that comes now !! 😍 Because Shapes help us give the “Invoice” look we need! To get the shape of the rounded edges where the Frames meet, I created two circles and played with the Translation properties. Let’s see! 👀

To replicate, let’s divide into parts: Product List, Amount of products and the Rounded Border (With Shapes 💕). The first one is the Product list implementation:

The second one is the Amount of products part. Keep in mind that this part must the added in the block code previously added, exactly where says: <!– Here add the code that is being explained in the next step–>”

And finally, the Rounded Corners with Shapes 😍!


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-09-at-12.27.27-AM-1024x49.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-10-at-10.47.12-PM-583x1024.png

In the third block, we will develop the timeline of our App! 😎.


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-09-at-12.52.27-AM-1024x51.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-10-at-10.53.30-PM-604x1024.png
.

Finally, let’s add the Payment buttons block. It’s important to see FormattedText,  it helps us to create a single label with different characteristics. 😎. 😎.

.

.


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

Leave a Reply

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