Introducing the Xamarin.Forms Avatar View Component

We are happy to introduce the Xamarin.Forms Avatar View component. This component is available with our Essential Studio for Xamarin.Forms 2019 Vol. 3 (beta) release.

Nowadays, almost all mobile apps need a user interface like a circle image that displays initials and an avatar image (like contact lists, images in tokens, and chat user displays). We at Syncfusion understand the requirement for this simple, but essential control and now deliver the feature-rich Xamarin.Forms Avatar View control. In this blog post, we will summarize the key features of the Xamarin.Forms Avatar View.

Show single or double initials

Are you looking for a letter avatar? Xamarin.Forms Avatar View is powered by a built-in parse engine. So, the Avatar control can generate initials based on the text you provide. The following code example illustrates the display of initials.

<avatar:SfAvatarView ContentType="Initials" 
                     AvatarName="Selva Ganapathy Kathiresan" 
                     InitialsType="DoubleCharacter"/>

Xamarin.Forms Avatar View shows initials
Xamarin.Forms Avatar View shows initials

Load custom images

Our Xamarin.Forms Avatar View can load custom images through the image source. The following code example illustrates loading a custom image.

<avatar:SfAvatarView ContentType="Custom" 
                     ImageSource="image.png"/>

Xamarin.Forms Avatar View loaded with custom image
Xamarin.Forms Avatar View loaded with custom image

Use 30 predefined vector avatar images

Xamarin.Forms Avatar View is loaded with 30 predefined vector images. You can use one of them when your app doesn’t have a user’s actual image. The following code example helps you show a vector avatar.

<avatar:SfAvatarView ContentType="AvatarCharacter" 
                     AvatarCharacter="Avatar10"/>

Xamarin.Forms Avatar View Vector Images
Xamarin.Forms Avatar View’s 30 predefined vector avatar images

Group view

A group view is one of the most common UIs you come across in any chat application. Almost all chat applications support group chat, which will require a common group picture to represent the group. An interesting part of Xamarin.Forms Avatar View is that it will automatically turn into a group view when you assign a group source to it. The following code example illustrates how to populate a group view.

<avatar:SfAvatarView ContentType="Group"
                     GroupSource="{Binding PeopleCollection}"
                     ImageSourceMemberPath="Image"
                     InitialsMemberPath="Name"/>

Xamarin.Forms Avatar View showing Group
Xamarin.Forms Avatar View showing a group

Visual style

Xamarin.Forms Avatar View comes with a predefined style as per design guidelines. It will take care of all the sizing specifications based on the style factor. The following code example shows how to apply visual styles.

<avatar:SfAvatarView AvatarShape="Circle"
                     AvatarSize="Medium"/>

 

Xamarin.Forms Avatar View's Visual Style
Xamarin.Forms Avatar View’s Visual Style

Set gradient

The highly customizable Xamarin.Forms Avatar View control allows you to customize its background with gradient colors. The Xamarin.Forms Gradient view is integrated with the control. So, you can directly apply a linear gradient or radial gradient look to the control. The following code example will help you to set a gradient background.

<avatar:SfAvatarView ContentType="Custom" 
                           ImageSource="image.png">
     <avatar:SfAvatarView.BackgroundGradient>
            <gradient:SfLinearGradientBrush>                
                <gradient:SfLinearGradientBrush.GradientStops>
                    <gradient:SfGradientStop Color="#2d265b" Offset="0.0" />
                    <gradient:SfGradientStop Color="#b8495c" Offset="1.0" />
                </gradient:SfLinearGradientBrush.GradientStops>                
            </gradient:SfLinearGradientBrush>  
     </avatar:SfAvatarView.BackgroundGradient>
</avatar:SfAvatarView>

Xamarin.Forms Avatar View with gradients
Xamarin.Forms Avatar View with gradients

Add badge view to show status

Xamarin.Forms Avatar View is compatible with the Xamarin.Forms Badge View control. So, you can show a status by adding it into the Xamarin.Forms Badge View. The following code shows how to import a badge view.

<badge:SfBadgeView>
   <badge:SfBadgeView.Content>
      <avatar:SfAvatarView ContentType="Custom" 
                           ImageSource="image.png"/>
   </badge:SfBadgeView.Content>
   <badge:SfBadgeView.BadgeSettings>
       <badge:BadgeSetting BadgePosition="BottomRight" 
                           BadgeType="Success"
                           BadgeIcon="Available"/>
   </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

Xamarin.Forms Avatar View with Badge View
Xamarin.Forms Avatar View with Badge View

Customize beyond the limit

The Xamarin.Forms Avatar View control is quite customizable. You can customize aspects like its corner radius, background, and border color and thickness. The following code example shows how to customize the width and height, and the border corners, thickness, and color.

 <avatar:SfAvatarView ContentType="Custom" 
                      ImageSource="image.png"
                      WidthRequest="100"
                      HeightRequest="75"
                      BorderColor="LightBlue"
                      BorderWidth="5"
                      CornerRadius="50,0,50,0"/>


Xamarin.Forms Avatar View with custom shape
Xamarin.Forms Avatar View with custom shape

Conclusion

In this blog post, we have gone through the Syncfusion Xamarin.Forms Avatar View control. You can download the beta version of the 2019 Volume 3 release to evaluate this new control.

If you have any questions or require clarification about these controls, please let us know in the comments below. You can also contact us through our support forumDirect-Trac, or Feedback Portal. We are happy to assist you!

Tags:

Share this post:

Related Posts

Leave a comment