Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (151).NET Core  (25)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (97)DocIO  (20)Essential JS 2  (71)Essential Studio  (163)File Formats  (20)Flutter  (111)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (480)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (25)Windows Forms  (55)WinUI  (21)WPF  (122)Xamarin  (130)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (51)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (47)Development  (257)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (7)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (227)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (23)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (60)UI  (131)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (11)Web  (215)What's new  (140)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Replicating a Social Profile UI in Xamarin.Forms

Replicating a Social Profile UI in Xamarin.Forms

Howdy! In this blog post, we are going to replicate a social profile UI in Xamarin.Forms obtained from this 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
Social Profile UI in Xamarin.Forms

Designing the profile page

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

Let’s code!

Main layout structure

It’s important to make a good selection of the layout. I have chosen 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:

Code implementation

 <!-- 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

  • Here, we are going to use the Syncfusion 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

<!-- 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  🌐" HorizontalOptions="Center" TextColor="Silver" FontSize="20"/>

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

Step 2: Social networks

Step 2: Social NetworksTo 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.

Code implementation

<!--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 FollowersTo 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

<!-- 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: ButtonsNow, add the Message and Follow buttons using the following code.

<!-- 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: AlbumFinally, 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

<!-- 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
Replicating Social Profile UI in Xamarin.Forms

Reference

To see the complete code structure of this project, refer to Social Profile UI 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 suite offers over 150 UI controls, from basic editors to powerful, advanced controls like DataGrid, Charts, ListView, and Rich Text Editor. Try them out and leave your feedback in the comments section below!

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (1)

Thanks for the information

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top