Profile images are an essential part of any modern-day app. Stream recently announced the open-source AvatarView for Android library so you can easily create and customize your own stylish profile images.
•Published: Feb 23, 2022
Introducing the AvatarView Library
AvatarView supports loading profile images with fractional style, borders, indicators, and initials for Android. It also provides internal image loaders to load profile images with your loading strategies.
To show you how useful the API is, this post will show you how to use AvatarView so that you can implement your own stylish profile images in your next Android project.
Before getting started, import the AvatarView into your project. Add the dependency below to your app level build.gradle file:
Note: To see the latest version of the SDK, check out the GitHub releases page.
AvatarView in XML Layout
You can implement your own stylish profile images by adding
io.getstream.avatarview.AvatarView in your XML layout file as shown in the following example:
You can also customize the AvatarView by setting custom attributes in your XML file. AvatarView allows you to customize the border, initials, shape, indicator, and RTL support with the custom attributes.
To learn more about attributes, you can check out the AvatarView Attributes documentation.
Loading Single Style Images
You can easily load a profile image to your AvatarView with the loadImage(data) function:
You can pass the following parameters to load an image:
Loading Fractional Style Images
A fractional style profile image combines multiple profile images into one cohesive image, and is one of the most widely-used styles to represent group and channel profiles. AvatarView supports loading fractional style profile images using multiple URLs as seen in the example below:
You can load up to four images by default. But, if you would like to limit the number of sections regardless of the parameters, you can control it with the avatarViewMaxSectionSize attribute in your XML layout:
AvatarView supports fully customizable attributes for the border, shape, indicator, and initials, so you have complete control over the look and feel of our profile images. Let’s see how to customize the components of AvatarView.
You can customize the color and thickness of the border with the attributes below:
- avatarViewBorderColor: determines the color of the border
- avatarViewBorderWidth: determines the thickness of the border
You can use the attributes above in your XML layout as in the following example:
Color Array for Borders
If you want to make your profile image more colorful, you can do so with the avatarViewIndicatorBorderColorArray attribute, which applies a color array to your border.
First, declare your color array in your colors.xml file:
Next, set the color array on your AvatarView:
By default, AvatarView supports circle and rectangle shapes to customize your profile images.
You can set the shape to a circle by setting the avatarViewShape attribute to circle as seen in the code below:
Note: The default setting of the avatarViewShape is already circle, so you don’t need to set it explicitly if you want to make it into a circular shape.
You can set the shape to a rectangle by setting the avatarViewShape attribute to round_rect. Also, you can change the radius of the border with the avatarViewBorderRadius attribute:
AvatarView supports indicators, which are used to indicate a user's online status in messaging applications or to add custom badges. You can enable indicators by passing true to the avatarViewIndicatorEnabled attribute:
You can also customize the indicator with your own drawable resources:
Displaying a Placeholder
Placeholders are an important feature in UX. AvatarView supports the following types of placeholders: loading and error.
You can display a placeholder with your drawable resource while your image is loading like in the following example:
You can also display a placeholder with your drawable resource when the image request fails as seen in the following example:
Initials are another popular way to represent a user’s information. AvatarView supports the initials style and you can fully customize every attribute:
If you want to load the initials when your image request fails, you can do so with custom listeners and the avatarInitials property as seen in the following example:
Customizing Image Loaders With AvatarCoil
AvatarCoil supports customization of internal Coil image loaders. By customizing the
AvatarCoil, you can generalize all AvatarView image loading requests.
You can set an
ImageLoader to generalize loading requests with the
AvatarCoil as in the following example:
AvatarView provides a default factory – called
AvatarImageLoaderFactory – to load images with your own
You can also customize bitmap factories to operate image bitmaps before loading on AvatarView. For more information, check out the Custom AvatarBitmapFactory.
AvatarView supports an integrating solution with Stream Chat SDK for Android.
To get started, first add the dependency below:
Note: You can check out the most recent version on GitHub.
Next, you should set the
StreamAvatarBitmapFactory on the
AvatarCoil with the following:
We recommend placing the code above your Application class to initialize it at once.
Note: The channel image will be loaded first. However, if the channel image does not exist, the fractional style of the members will be loaded.
In this article, you saw how to implement stylish profile images with AvatarView that stand out and match your app's look and feel.
Remember: AvatarView is an open-source repository, so anyone can contribute to improving the code, documentation, or submit feature requests.
As always, happy coding!