Avatar View | Xamarin.Forms | Xamarin Community Toolkit
Welcome back everyone to the Xamarin Show… :)
Today your host Andrei will show you something both simple and useful because this view is used in half of the applications (where it’s needed and not so). I mean
AvatarView from awesome
First of all, we should install XCT on all our Xamarin projects (including platform-specific ones). For this sample, I created only an iOS project, but keep in mind that you have to install it on Android as well!
Now we should refer to XCT from our Xaml file by adding its namespace to the root element.
That’s it. Now we can use the entire power of XCT in this file! But for this article let’s focus on AvatarView.
AvatarView has a few properties that will help you to customize it.
Size property manages the shape (circle’s size)
Source property manages the avatar picture (works like a regular Image)
Text property manages fallback text(e.g. if an image is loading, image failed to load or image does not exist). Usually, we show the user’s initials instead of picture if it’s not available (By default, it shows ‘X’)
Also, there are a few other properties that allow customizing AvatarView such as
CornerRadius (by default the shape is a circle so the avatar view automatically sets CornerRadius equal to half of size, but you can change it),
FontSize (by default it depends on Size and is calculated automatically),
FontFamily and finally
<xct:AvatarView Text=”AM” Source=”https://link-to-image.png” />
Please look at the picture below to see the AvatarView in action.
I’d want to explain in more detail what is
ColorTheme and how it is work.
The ColorTheme is a provider of Text and Background colors. There are 5 pre-defined themes in XCT
Default, Desert, Jungle, Ocean, Vulcano that provides colors from a certain theme depending on Text (e.g. text
AM will have slightly different colors than text
AK ). So you can use a color theme you prefer to make your app look more “alive”.
Also, you can implement your own theme by implementing
Thanks for reading! The sample you can find on my GitHub:
GitHub - AndreiMisiukevich/AvatarViewSample
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…
Thanks for reading!