Avatar View for Android Apps

With Android Data Binding support

Inspired by Matt Precious’s lecture — Don’t Fear the Canvas we have decided to implement Avatar View with Android data binding support. There are many libraries that offer creating rounded avatars, but as far as I know there aren’t any which have built-in placeholder feature. Avatar View is prepared for handling problems with:

  • wrong image URL
  • no network connection
  • very slow network connection

All the problems with image loading are solved by showing a placeholder with colored background with user’s initial username/nick/name letter in the center of the view just like in the Gmail or YouTube app.

We are using MVVM architecture in almost all of the projects at Tango so one of our goals was to have Android Data Binding support. We are aware that not everyone is using this approach, so that’s why we decided to break library into separate modules:

  • avatar-view which has no external dependencies can be easily used in every Android project and architecture. Is responsible for displaying circular image view with border and placeholders.
  • avatar-view-bindings which adds support for Android Data Binding, contains only AvatarViewBindings class.
  • avatar-view-picasso which adds support for Picasso, consists of PicassoLoader class which simplifies loading images and placeholders.

Library has already been released. All code and examples are available on GitHub.

Usage example

Library usage

Standard method

Step 1 — Gradle

Add Gradle dependencies:

Step 2 —Layout XML file

Add to your XML layout file:

Step 3 — Activity or Fragment class

Add to your activity or fragment:

And that’s all! If you want to load images using a different library than Picasso you have to implement a class which extends ImageLoaderBase class. Basically, you have to override one method. Take a look how PicassoLoader is implemented (it is available in the avatar-view-picasso module).

Android Data Binding method

Step 1 — Gradle

Add Gradle dependencies:

Step 2 — Layout XML file

Add to your XML layout file:

Step 3 — Activity or Fragment class

Add to your activity:

Take a look at AvatarViewBindings class where BindingAdapter is defined. By setting in your XML layout file avatarUrl and name attributes you can define the source of user’s image and name. In order to correctly use AvatarViewBindings, you have to create a class extending DataBindingComponent and pass it as the third parameter in DataBindingUtil.setContentView() method. This is obligatory because AvatarViewBindings takes an IImageLoader parameter in the constructor. You can find more information about this topic in Deep dive into Android Data Binding talk.

Conclusion

Avatar View can be used in many cases, i. e. on profile or settings screens, in comments views where you can put avatar next to the user’s comment and many many others. We hope this library will be useful for many developers. We have done our best to make this library as much flexible as we can.

Are you looking for a great mobile development team that gets things done? Ping us at contact@tango.agency or @tango_agency on Twitter.