Replicating Pet Adoption UI in .NET MAUI

Howdy!!! In collaboration with the .NET MAUI UI July Calendar, we will be replicating the Pet Adoption UI obtained from Dribble. I hope this is useful for you!

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:

First, let’s define the main layout we’ll be using!

In this case, we will use a Grid to structure the screen as you can see in the following code block:

	<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="*,*,*">
	<!-- Add here al the code of the following blocks -->
	</Grid>

view raw PetUI.xaml hosted with by GitHub

If you want to know more information about the Grid, I invite you to see this article.

Let’s start with the Blocks!

The first one is the Profile Picture, here we just have to add the profile image of the Pet.

.

	<!-- 1. Profile picture-->
	<Image Grid.Row="0"
	Grid.Column="0"
	Grid.ColumnSpan="3"
	Source="pet.png"
	Aspect="Fill"
	HeightRequest="400"/>
	<!-- Here add the code that is being explained in the next block -->

view raw PetUI.xaml hosted with by GitHub

.

To begin with, we will divide this block into sub-blocks, each one of them will go with its explanation followed by its code implementation, let’s explore it:

Frame and main Grid of the Pet Card

Let’s evaluate the goals:

Rounded edges, these are the rounded edges that can be seen at the top of the image, for this we will use a Frame.

Overlapping of controls, to achieve the effect of overlapping we will use the Margin property, to which in the Top value we will assign a negative value to achieve the effect of being above the image of the previous block.

Now let’s see it in code:

	<!-- 2. Pet Card-->
	<Frame Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" CornerRadius="40" HasShadow="False" Margin="20,-80,20,10" BackgroundColor="#f9f9f9" HeightRequest="100">
	<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto" VerticalOptions="Center" HorizontalOptions="FillAndExpand" RowSpacing="10" Padding="20,5">
	<!-- Add here the following blocks contained in this block. -->
	</Grid>
	</Frame>

view raw PetUI.xaml hosted with by GitHub

Let’s add the controls to the Frame

Now we will add the general information contained within the Frame, information such as main name, address, among others.

	<!-- General information-->
	<Label Grid.Row="0" Grid.Column="0" Text="Martha" FontAttributes="Bold" FontSize="21" TextColor="Black"/>
	<Image Grid.Row="0" Grid.Column="2" Source="symbol" Aspect="AspectFit" HorizontalOptions="End" WidthRequest="22" HeightRequest="22"/>
	<Label Grid.Row="1" Grid.Column="0" Text="Border collie" TextColor="#797979" FontSize="17" />
	<Image Grid.Row="1" Grid.Column="1" Source="clock" HorizontalOptions="End" Aspect="AspectFit" WidthRequest="22" HeightRequest="22"/>
	<Label Grid.Row="1" Grid.Column="2" Text="1 year old" TextColor="#797979" FontSize="15" HorizontalTextAlignment="End" />
	<Image Grid.Row="2" Grid.Column="0" Source="location" Aspect="AspectFit" WidthRequest="22" HeightRequest="22" HorizontalOptions="Start" />
	<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" TextColor="#acacac" TranslationX="20" VerticalTextAlignment="Center" Text="120 N 4th St, Brooklyn, NY, USA" HorizontalOptions="Center" FontSize="15"/>

view raw PetUI.xaml hosted with by GitHub

To finish, let’s continue with the last block, which is made up by the following components:

Rounded photo, name, role and date.

	<!--3. Details -->
	<!-- Rounded image-->
	<Frame Grid.Row="2" Grid.Column="0" Grid.RowSpan="2" BorderColor="White" HorizontalOptions="Center" WidthRequest="70" HeightRequest="70" HasShadow="False" CornerRadius="35" Padding="0" IsClippedToBounds="True">
	<Image Source="owner" Aspect="AspectFill"/>
	</Frame>
	<!-- Main name, roles and date -->
	<Label Grid.Row="2" Grid.Column="1" HorizontalOptions="Start" Text="Harry Jones" TextColor="Black" FontAttributes="Bold" Margin="0,30,0,0"/>
	<Label Grid.Row="2" Grid.Column="2" Text="24.01.2022" HorizontalTextAlignment="End" TextColor="#acacac" Margin="0,30,25,0" FontSize="14"/>
	<Label Grid.Row="3" Grid.Column="1" HorizontalOptions="Start" Text="Owner" TextColor="#acacac"/>
	<!-- Here add the code that is being explained in the next code block -->

view raw PetUI.xaml hosted with by GitHub

Description

	<!-- Description-->
	<Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Margin="{OnPlatform Android='35,20,35,15', iOS='35,20,35,0'}" TextColor="#a5a5a5" Text="Hi! Martha has impeccable manners when I fisrt met her, most of which I've since undone. She's also become very 'chatty' with a full range of Scooby Doo noises when she doesn't feel she's getting the attention she deserves."/>
	<!-- Here add the code that is being explained in the next code block -->

view raw PetUI.xaml hosted with by GitHub

Like and adopt buttons.

	<!--Buttons-->
	<Button Grid.Row="5" Grid.Column="0" TextColor="Black" Text="♡" BackgroundColor="White" BorderColor="Silver" BorderWidth="1" WidthRequest="50" HeightRequest="50" CornerRadius="25" HorizontalOptions="End" />
	<Button Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" Text="Adoption" FontAttributes="Bold" CornerRadius="22" TextColor="Black" BackgroundColor="#fbce56" Margin="20,0,40,0" />

view raw PetUI.xaml hosted with by GitHub

And our Pet Adoption UI  is done! .

To see the complete code structure you can enter to my Github repository 

.

https://github.com/LeomarisReyes/PetAdoptionUI

.