Replicating a CV Mobile App in Xamarin.Forms
Tags: csharp, dotnet, mobile, xamarin
Published: 2022-06-23 11:54:22

---
title: Replicating a CV Mobile App in Xamarin.Forms
published: true
date: 2022-06-23 10:30:06 UTC
tags: csharp, dotnet, mobile, xamarin
canonical_url: https://www.syncfusion.com/blogs/post/replicating-a-cv-mobile-app-in-xamarin-forms.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jac1pvxmrqmqx3fgxzyc.png
---

In this article, we’ll see how to replicate a CV mobile app in Xamarin.Forms based on this [Dribbble design](https://dribbble.com/shots/14894936-CV-Mobile-App "Dribbble design").

We are going to develop the sections of this UI in steps, as shown in this image.

![Replicating a CV Mobile App in Xamarin.Forms](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Replicating-a-CV-Mobile-App-in-Xamarin.Forms_.png)
<figcaption>Replicating a CV Mobile App in Xamarin.Forms</figcaption>

**Note:** We will make some modifications to the original UI to get the most out of the controls with which we will work.

## Agenda

- **Frame:** We will learn to design a frame with two rounded corners.
- **Avatar View:**  I will teach you how to use [Syncfusion’s Xamarin.Forms Avatar View control](https://help.syncfusion.com/xamarin/avatar-view/getting-started "Syncfusion’s Xamarin.Forms Avatar View control") to render the profile image.
- **CollectionView:** We will use this control to organize the information in the lists.

Let’s code! ** **

## Main layout

Let’s start by organizing the main layout of the page. I am going to use a DataGrid control.

Refer to the following code.

```html
<!--Main layout-->
 <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto">
   <!-- Here you must add the code blocks explained in steps 1, 2, and 3.-->
 </Grid>
```

Then, add the following background color to your content page.

```
BackgroundColor="#f0f0f0"
```

## Step 1: Timeline

![Step 1: Timeline](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Step-1-Timeline.png)

For better understanding, we will divide this step up to delve into each part.

### Timeline color bar

This is the blue bar that you can see above the profile picture. The **visual trick** here is to hide the two top borders. We can hide them with a negative value in the **Margin** property (in this case, the Top value).

**Margin= “0, – 50.0.0”**

Now, let’s see the complete code implementation.

```html
<!--Timeline Color Bar-->
  <Frame Grid.Row="0" BackgroundColor="{StaticResource MainColor}" HeightRequest="100" CornerRadius="20" HasShadow="False Margin="0,-50,0,0"/>
 
<!-- You must write here what is explained in the next code block -->
```

### Rounded image

Use the [Syncfusion Xamarin.Forms Avatar View control](https://help.syncfusion.com/xamarin/avatar-view/getting-started "Syncfusion Xamarin.Forms Avatar View control") to design the profile picture.

First, add the [Syncfusion.Xamarin.Core](https://www.nuget.org/packages/Syncfusion.Xamarin.Core/ "Syncfusion.Xamarin.Core NuGet Package") NuGet package.

Then, add the **Syncfusion.XForms.AvatarView** namespace in your XAML file.

```
xmlns:sfavatar="clr-namespace:Syncfusion.XForms.AvatarView;assembly=Syncfusion.Core.XForms"
```

On iOS, go to your **AppDelegate.cs** file. Add the following code after  Xamarin.Forms initialization.

```
Syncfusion.XForms.iOS.Core.SfAvatarViewRenderer.Init();
```

That’s it! Now, you can start using the  **Syncfusion**  **Xamarin.Forms AvatarView** control in your XAML file.

```html
<!--Rounded image - SfAvatarView Syncfusion Control-->
  <sfavatar:SfAvatarView Grid.Row="1" BorderWidth="0" ContentType="Custom" ImageSource="Profile" HorizontalOptions="Center" VerticalOptions="Start" WidthRequest="140" HeightRequest="140" CornerRadius="70" Margin="0,-65,0,0" />                 

<!-- You must write here what is explained in the next code block -->
```

### Name

Refer to the following code example to render the Name details.

```html
<!--Name-->
  <Label Grid.Row="2" Text="John Doe" FontAttributes="Bold" HorizontalOptions="Center" FontSize="22" Margin="0,10,0,0"/>

<!-- You must write here what is explained in the next code block -->
```

### Contact details

Here, I used an intermediate grid to place the contact details.

```html
<Grid Grid.Row="4" RowDefinitions="*,*" ColumnDefinitions="Auto,Auto,Auto,Auto" HorizontalOptions="Center" Padding="0,25" RowSpacing="20" ColumnSpacing="10">
 <Image Grid.Row="0" Grid.Column="0" Source="Calendar" HeightRequest="14"/>
 <Label Grid.Row="0" Grid.Column="1" Text="January 1st, 1990" FontSize="14" FontAttributes="Bold" TextColor="#a7a7a7"/>
 
 <Image Grid.Row="0" Grid.Column="2" Source="Phone" HeightRequest="14"/>
 <Label Grid.Row="0" Grid.Column="3" Text="0812 3456 789" FontSize="14" FontAttributes="Bold" TextColor="#a7a7a7"/>
 
 <Image Grid.Row="1" Grid.Column="0" Source="Home" HeightRequest="14"/>
 <Label Grid.Row="1" Grid.Column="1" Text="Jarkarta, Indonesia" FontSize="14" FontAttributes="Bold" TextColor="#a7a7a7"/>
 
 <Image Grid.Row="1" Grid.Column="2" Source="Email" HeightRequest="14"/>
 <Label Grid.Row="1" Grid.Column="3" Text="john@doe.com" FontSize="14" FontAttributes="Bold" TextColor="#a7a7a7"/>
</Grid>
 
<!-- You must write here what is explained in the next code block -->
```

Finally,  let’s add the **dividing line** (for this, we will use a **BoxView** ) and the **contact description** text.

```html
<!--Line and descripcion-->
 <BoxView Grid.Row="5" HorizontalOptions="FillAndExpand" HeightRequest="1" Color="Silver" Margin="20,0"/>
 <Label Grid.Row="6" FontSize="14" FontAttributes="Bold" TextColor="#a7a7a7" Margin="20" LineHeight="1.2" HorizontalTextAlignment="Center" Text="Hello! I'm John, an architect-turned-UI/UX designer with a passion for technology. I am currently learning UI/UX design at Purwadhika School"/>
 
<!-- You must write here what is explained in the next code block -->
```

With these, we completed the first step of our UI!

## Step 2: Education

![Step 2: Education](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Step-2-Education-1.png)

Let’s render the education details. Use a **CollectionView** to design the education list and the [Syncfusion Xamarin.Forms Avatar View](https://help.syncfusion.com/xamarin/avatar-view/getting-started "Syncfusion Xamarin.Forms Avatar View") control to design the rounded images for them.

Refer to the following code example.

```html
<!-- Education-->
 <Frame Grid.Row="8" HasShadow="False" Margin="25,0" CornerRadius="20" BackgroundColor="White">
  <StackLayout>
   <!-- Education title-->
   <Label Text="Education" FontSize="15" FontAttributes="Bold" Margin="0,0,0,10"/>
   <!-- Divisor line-->
   <BoxView HorizontalOptions="FillAndExpand" HeightRequest="1" Color="Silver" Margin="0,0,0,10" />
 
   <CollectionView ItemsSource="{Binding EducationCollection}"
                   HeightRequest="170"
                   VerticalScrollBarVisibility="Never">
    <CollectionView.ItemTemplate>
     <DataTemplate>
      <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*" Padding="0,0,0,30" >
       <sfavatar:SfAvatarView Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BorderWidth="0" Margin="0,0,10,0"
                              ContentType="Custom" ImageSource="{Binding Picture}" HorizontalOptions="Center" VerticalOptions="Start" WidthRequest="50" HeightRequest="50" CornerRadius="25" />
         <Label Grid.Row="0" Grid.Column="1" Text="{Binding Title}" FontAttributes="Bold" FontSize="14"/>
         <Label Grid.Row="1" Grid.Column="1" Text="{Binding Description}" FontSize="13"/>
         <Label Grid.Row="2" Grid.Column="1" Text="{Binding Years}" FontSize="13"/>
      </Grid>
     </DataTemplate>
    </CollectionView.ItemTemplate>
   </CollectionView>
  </StackLayout>
 </Frame>
 
<!-- You must write here what is explained in the next code block -->
```

## Step 3: Skills

![Step 3: Skills](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Step-3-Skills.png)

We will continue using the **CollectionView** for the skills list. We are going to add the following elements:

- Label title (Skills).
- A BoxView to simulate the division line.
- A CollectionView for the list.
- A ProgressBar to indicate the knowledge percentage of each skill.

Let’s see how to do it in code!

```html
<!--Skills-->
 <Frame Grid.Row="9" HasShadow="False" Margin="20,30" CornerRadius="20" BackgroundColor="White">
  <StackLayout>
   <Label Text="Skills" FontSize="15" FontAttributes="Bold" Margin="0,0,0,10"/>
  <BoxView HorizontalOptions="FillAndExpand" HeightRequest="1" Color="Silver" />
 
  <CollectionView ItemsSource="{Binding SkillsCollection}"
                  HeightRequest="300"
                  VerticalScrollBarVisibility="Never">
   <CollectionView.ItemTemplate>
    <DataTemplate>
      <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*" Padding="0,0,0,30">
       <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Margin="0,0,10,0" Source="{Binding Picture}"
                           VerticalOptions="Start" WidthRequest="50" HeightRequest="50" />
        <Label Grid.Row="0" Grid.Column="1" Text="{Binding Title}" FontAttributes="Bold" FontSize="14"/>
        <ProgressBar Grid.Row="1" Grid.Column="1" Progress="{Binding Percentage}" ProgressColor="Blue"/>
      </Grid>
     </DataTemplate>
    </CollectionView.ItemTemplate>
   </CollectionView>
  </StackLayout>
 </Frame>
```

And our UI is done! As the screens shown are for iOS, now I’ll show you the screens on Android so you can see both platforms.

![Replicating a CV Mobile App in Xamarin.Forms](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Replicating-CV-Mobile-App-in-Xamarin.Forms_.png)
<figcaption>Replicating a CV Mobile App in Xamarin.Forms</figcaption>

## GitHub reference

To see the complete code structure of this project, refer to our [CV Mobile App in Xamarin.Forms demo on GitHub.](https://github.com/SyncfusionExamples/cv-mobile-app-in-xamarin "CV Mobile App in Xamarin.Forms demo on GitHub")

## Conclusion

Thanks for reading!  In this blog, we have seen how to replicate a CV mobile app using Syncfusion Xamarin.Forms UI controls. Try out the steps in this blog post and leave your feedback in the comments section below!

You can enjoy over 150 UI controls, from basic editors to powerful, advanced controls like [Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts "Xamarin.Forms Charts"), [ListView](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview "Xamarin.Forms ListView"), and [Rich Text Editor](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rich-text-editor "Xamarin.Forms Rich Text Editor") in our Syncfusion’s [Xamarin](https://www.syncfusion.com/xamarin-ui-controls "Syncfusion Xamarin.Forms UI controls") suite. Use them to build elite apps!

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion Feedback Portal"). We are always happy to assist you!