Replicating a Social Profile UI in Xamarin.Forms
Tags: xamarin, mobile, android, dotnet
Published: 2021-10-06 11:52:33

---
title: Replicating a Social Profile UI in Xamarin.Forms
published: true
date: 2021-10-06 10:00:21 UTC
tags: xamarin, mobile, android, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/replicating-a-social-profile-ui-in-xamarin-forms.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gh2f6hu8kauldugg3e8i.png
---

Howdy! In this blog post, we are going to replicate a social profile UI in Xamarin.Forms obtained from this [Dribble design](https://dribbble.com/shots/10840196-DailyUI-Challenge-06-Social-Profile "Link to Social Profile UI in dribble design").

Our design contains a single screen: a **profile page**. We are going to develop the UI by following the steps specified in this screenshot.

![Social Profile UI in Xamarin.Forms](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Social-Profile-UI-in-Xamarin.Forms_.png)<figcaption>Social Profile UI in Xamarin.Forms</figcaption>

## Designing the profile page

First, some things that will help us to get our final design:

- We will name our UI screen as **ProfilePage**.
- To create the rounded profile image, I am going to use the [Syncfusion Xamarin.Forms Avatar View](https://www.syncfusion.com/xamarin-ui-controls/xamarin-avatar-view "Link to Xamarin.Forms Avatar View") control. You can read about the control’s implementation logic in this [getting started documentation](https://help.syncfusion.com/xamarin/avatar-view/getting-started "Link to Getting Started With Xamarin AvatarView").

Let’s code!

### Main layout structure

It’s important to make a good selection of the layout. I have chosen [Xamarin.Forms DataGrid](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid "Link to Xamarin.Forms DataGrid"). I like it because it helps me easily position the controls.

If you aren’t familiar with the DataGrid structure, refer to the following articles:

  - [Working with Grid Layout in Xamarin.Forms](https://askxammy.com/working-with-gridlayout-in-xamarin-forms/ "Link to Working with Grid Layout in Xamarin.Forms blog")
  - [5 Tips to Easily Use the DataGrid for Layouts in Xamarin.Forms](https://dev.to/karthickramasamy08/5-tips-to-easily-use-the-grid-for-layouts-in-xamarin-forms-1npm-temp-slug-2577644 "Link to 5 Tips to Easily Use the Grid for Layouts in Xamarin.Forms blog")

**Code implementation**

```html
 <!-- Our main structure -->
    <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,*" Padding="{x:OnPlatform iOS='0,70,0,10', Android='0,40,0,20'}">
           
<!-- You must write here what is explained in steps number 2,3,4 and 5 -->

</Grid>
```

## Step 1: Main information

![Step 1: Main information](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Step-1-Main-information.png)

- Here, we are going to use the Syncfusion [Xamarin.Forms Avatar View](https://www.syncfusion.com/xamarin-ui-controls/xamarin-avatar-view "Link to Xamarin.Forms Avatar View") control to display the user’s profile image in a circular shape.
- Then, we will use a simple label to add the name and role description.

**Code implementation**

```html
<!-- Syncfusion Avatar View (rounded image)-->
<sfavatar:SfAvatarView Grid.ColumnSpan="2" Grid.Row="0" BorderWidth="0"
         ContentType="Custom" ImageSource="PProfile" HorizontalOptions="Center" VerticalOptions="Start" WidthRequest="140" HeightRequest="140" CornerRadius="70" Margin="0,0,0,30" />
<!-- Name & role description-->
<Label Grid.ColumnSpan="2" Grid.Row="1" Text="Catherine Massey " HorizontalOptions="Center" FontAttributes="Bold" FontSize="26" CharacterSpacing="1"/>
<Label Grid.ColumnSpan="2" Grid.Row="2" Text=" UI/UX Designer | Daily ![🌐](https://s.w.org/images/core/emoji/11/72x72/1f310.png)" HorizontalOptions="Center" TextColor="Silver" FontSize="20"/>

<!-- You must add here what is explained in the next step -->
```

## Step 2: Social networks

![Step 2: Social Networks](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Step-2-Social-Networks.png)To design the Social networks section, we require controls with the same, repetitive design. For this, we are going to use the **CollectionView**. It allows us to make this type of scalable design so that we can feed as many records as required in the future.

For more information, refer to the blog relating to [CollectionView](https://askxammy.com/make-your-life-simpler-with-the-collectionviews-layouts-%F0%9F%98%8E/ "Link to Make your life simpler with the CollectionView’s Layouts blog").

**Code implementation**

```html
<!--Step 2: Social networks-->
   <CollectionView Grid.Row="4" Grid.ColumnSpan="2" Margin="{OnPlatform iOS='80,0', Android='35,0'}" HorizontalScrollBarVisibility="Never" 
                   ItemsSource="{Binding sn}"
                   ItemsLayout="HorizontalList"
                   HeightRequest="80">
                   <CollectionView.ItemTemplate> 
                      <DataTemplate>
                         <StackLayout Padding="4,10,10,10" Margin="0,20">
                             <Button BackgroundColor="{Binding BGColor}" ImageSource="{Binding Picture}" HeightRequest="50" WidthRequest="50" CornerRadius="15" Padding="8"/>
                         </StackLayout>
                      </DataTemplate>
                   </CollectionView.ItemTemplate>
   </CollectionView>

<!-- You must add here what is explained in the next step -->
```

## Step 3: Posts and followers

![Step 3: Posts and Followers](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Step-3-Posts-and-followers.png)To add the posts and followers information, we’ll use one more DataGrid and divide the grid into three columns (Posts, Followers, and Following).

**Code implementation**

```html
<!-- Followers information-->
  <Grid Grid.Row="5" Grid.ColumnSpan="2" RowDefinitions="*,*" ColumnDefinitions="Auto,*,Auto" Margin="30,20,30,0" >
      <Label Grid.Row="0" Grid.Column="0" Text="80" FontAttributes="Bold" FontSize="23" HorizontalTextAlignment="Center" />
      <Label Grid.Row="1" Grid.Column="0" Text="Posts" FontSize="17" TextColor="#565660" HorizontalTextAlignment="Center"/>

      <Label Grid.Row="0" Grid.Column="1" Text="110" FontAttributes="Bold" FontSize="23" HorizontalTextAlignment="Center"/>
      <Label Grid.Row="1" Grid.Column="1" Text="Followers" FontSize="17" TextColor="#565660" HorizontalTextAlignment="Center"/>

      <Label Grid.Row="0" Grid.Column="2" Text="152" FontAttributes="Bold" FontSize="23" HorizontalOptions="Center"/>
      <Label Grid.Row="1" Grid.Column="2" Text="Following" FontSize="17" TextColor="#565660" HorizontalOptions="Center"/>
   </Grid>

           
<!-- You must add here what is explained in the next step -->
```

## Step 4: Buttons

![Step 4: Buttons](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Step-4-Buttons.png)Now, add the **Message** and **Follow** buttons using the following code.

```html
<!-- Buttons-->
   <Button Grid.Row="6" Grid.Column="0" Text="Message" HeightRequest="50" FontAttributes="Bold" BorderColor="#1e40ff" BorderWidth="1" TextColor="#1e40ff" BackgroundColor="Transparent" FontSize="18" Margin="20,20,10,20"/>
   <Button Grid.Row="6" Grid.Column="1" Text="Follow" HeightRequest="50" FontAttributes="Bold" BackgroundColor="#1e40ff" TextColor="White" FontSize="18" Margin="10,20,20,20"/>           
           
<!-- You must add here what is explained in the next step -->
```

## Step 5: Album

![Step 5: Album](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Step-5-Album.png)Finally, let’s add the photos from an album to our profile using the **CollectionView**. The images will be automatically listed out in three columns after adding them to the user’s profile.

**Code implementation**

```html
<!-- Album-->
  <CollectionView Grid.Row="7" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Never" Margin="10,0"
                  ItemsSource="{Binding albums}"
                  HeightRequest="280"
                  VerticalScrollBarVisibility="Never">
                  <CollectionView.ItemsLayout>
                     <GridItemsLayout Orientation="Vertical" Span="3" />
                  </CollectionView.ItemsLayout>
                  <CollectionView.ItemTemplate> 
                      <DataTemplate>
                         <StackLayout Padding="0,0,5,10">
                             <Frame Padding="0" HeightRequest="135" VerticalOptions="FillAndExpand" HorizontalOptions="Start" HasShadow="False" IsClippedToBounds="True" CornerRadius="13" >
                               <Image Source="{Binding Picture}" Aspect="AspectFill" />
                             </Frame>
                         </StackLayout>
                      </DataTemplate>
                  </CollectionView.ItemTemplate>
   </CollectionView>
```

And our UI is done!

![Replicating Social Profile UI in Xamarin.Forms](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Replicating-Daily-UI-in-Xamarin.Forms_-1.png)<figcaption>Replicating Social Profile UI in Xamarin.Forms</figcaption>

## Reference

To see the complete code structure of this project, refer to [Social Profile UI in Xamarin.Forms demo on GitHub](https://github.com/SyncfusionExamples/designing-social-profile-ui-in-xamarin "Link to Replicating Social Profile UI App in Xamarin.Forms demo on GitHub").

## Conclusion

Thanks for reading! In this blog post, we have seen how to replicate a Social profile UI in Xamarin.Forms. You can use these steps as a starting point to build your UI.

Syncfusion’s [Xamarin](https://www.syncfusion.com/xamarin-ui-controls "Link to Xamarin.Forms UI controls") suite offers over 150 UI controls, from basic editors to powerful, advanced controls like [DataGrid](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid "Link to Xamarin.Forms DataGrid"), [Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts "Link to Xamarin.Forms Charts"), [ListView](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview "Link to Xamarin.Forms ListView"), and [Rich Text Editor](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rich-text-editor "Link to Xamarin.Forms Rich Text Editor"). Try them out and leave your feedback in the comments section below!

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Replicating a Facebook-Like UI in Xamarin](https://dev.to/syncfusion/replicating-a-facebook-like-ui-in-xamarin-10be "Link to Replicating a Facebook-Like UI in Xamarin blog")
- [Protecting Sensitive Data in the Background in Xamarin.Forms](https://dev.to/karthickramasamy08/protecting-sensitive-data-in-the-background-in-xamarin-forms-42dd-temp-slug-7777674 "Link to Protecting Sensitive Data in the Background in Xamarin.Forms blog")
- [Create a Wizard View in Xamarin.Forms: A Novice’s Guide](https://dev.to/karthickramasamy08/create-a-wizard-view-in-xamarin-forms-a-novice-s-guide-4286-temp-slug-9690565 "Link to Create a Wizard View in Xamarin.Forms: A Novice’s Guide blog")
- [Creating a Floating Label Layout in Xamarin.Forms DataForm](https://dev.to/syncfusion/creating-a-floating-label-layout-in-xamarin-forms-dataform-5224 "Link to Creating a Floating Label Layout in Xamarin.Forms DataForm blog")