Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/TangoAgency/avatar-view

Avatar ImageView with user's name first letter Drawable placeholder
https://github.com/TangoAgency/avatar-view

android android-data-binding android-library android-ui android-view

Last synced: about 1 month ago
JSON representation

Avatar ImageView with user's name first letter Drawable placeholder

Awesome Lists containing this project

README

        

# Avatar View
[![Download](https://api.bintray.com/packages/tangoagency/maven/avatar-view/images/download.svg) ](https://bintray.com/tangoagency/maven/avatar-view/_latestVersion)
[![Build Status](https://travis-ci.org/TangoAgency/avatar-view.svg?branch=master)](https://travis-ci.org/TangoAgency/avatar-view)
[![Android Arsenal Avatar View](https://img.shields.io/badge/Android%20Arsenal-avatar--view-green.svg?style=true)](https://android-arsenal.com/details/1/4427)

Avatar View library was implemented based on Matt Precious's [Don’t Fear the Canvas][Matt Precious's Lecture] lecture. I decided
to create this library in order to achieve an ImageView which can smoothly display user's profile image or his username/name initial
letter (in the case when the image was not provided).

Please take a look at the examples below:

| Simple library presentation | [ExampleActivity][ExampleActivityNoBindings] & [BindingsExample][ExampleOnBindings]
|:-:|:-:|
| ![FirstExample] | ![SecondExample] |

## Usage

This library can be used in two ways: using [standard Android methods][StandardMethodsPart] and using [Android Data Binding][DataBindingPart].

###Standard:

#### Step 1

Add gradle dependency:
```groovy
dependencies {
compile 'agency.tango.android:avatar-view:{latest_release}'

//if you want to use Picasso for loading images
compile 'agency.tango.android:avatar-view-picasso:{latest_release}'

//if you want to use Glide for loading images
compile 'agency.tango.android:avatar-view-glide:{latest_release}'
}
```

#### Step 2

Add to your xml layout file:

```xml

```

#### Step 3

Add to your activity:
```java
AvatarView avatarView;
IImageLoader imageLoader;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

avatarView = (AvatarView) findViewById(R.id.avatar_view_example);

imageLoader = new PicassoLoader();
imageLoader.loadImage(avatarView, "http:/example.com/user/someUserAvatar.png", "User Name");
}
```
If you want to use a different library than ```Picasso``` for loading images you have to create a loader which
extends [ImageLoaderBase][ImageLoaderBase] class. Basically, you have to override one method. Take a look how I have done
it in [PicassoLoader][PicassoLoader] available in the avatar-view-picasso module.

```ImageLoaderBase``` has two constructors: one with no parameters and second one where you can pass
```String``` placeholder in order to change the default "-". You can also set it directly in
```AvatarPlaceholder``` constructor. More info about ```AvatarPlaceholder``` [here][AvatarPlaceholderInfo].

###Data Binding:

#### Step 1

Add gradle dependency:
```groovy
dependencies {
compile 'agency.tango.android:avatar-view:{latest_release}'
compile 'agency.tango.android:avatar-view-bindings:{latest_release}'

//if you want to use Picasso for loading images
compile 'agency.tango.android:avatar-view-picasso:{latest_release}'

//if you want to use Glide for loading images
compile 'agency.tango.android:avatar-view-glide:{latest_release}'
}
```

#### Step 2

I will show how to edit your xml file based on ```User``` class. Let's see:

```xml

```

#### Step 3

Add to your activity:

```java
private ExampleActivityBinding binding;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

binding = DataBindingUtil.setContentView(this, R.layout.example_activity, new ExampleDataComponent());
binding.setUser(new User("User Name", "http:/example.com/user/someUserAvatar.png"));
}

private static class ExampleDataComponent implements DataBindingComponent {
public AvatarViewBindings getAvatarViewBindings() {
return new AvatarViewBindings(new PicassoLoader());
}
}
```
Take a look at [AvatarViewBindings][AvatarViewBindings] class where ```BindingsAdapter``` is configured
(```bind:avatarUrl``` and ```bind:name``` for usage in XML). In order to correctly use ```AvatarViewBindings```
you have to create class extending ```DataBindingComponent``` and pass it as a third parameter in
```DataBindingUtil.setContentView()``` method. This is obligatory because ```AvatarViewBindings``` takes an
[IImageLoader][IImageLoader] parameter in it's constructor. You can find more information about
this topic in Deep dive
into Android Data Binding
talk.

I have explained [PicassoLoader][PicassoLoader] issue in [step 3][Step3A] in Standard Method part.

####AvatarPlaceholder

[AvatarPlaceholder][AvatarPlaceholder] is a ```Drawable``` which is set as a ```AvatarView``` background when the image
hasn't been loaded yet. It is a letter on a one-color background (just like in ex. Google, Youtube avatars).
Default placeholder ```String``` (displayed when the username is ```null``` or empty) is "-". TextSizePercentage value
sets how big part of the view is taken by the text. Default textSizePercentage is ```33```. You can change
those values by passing another ones in ```AvatarPlaceholder``` constructor or not directly by using IImageLoader
class methods/constructors.

####Additional information

- Avatar background color is calculated using ```hashCode()``` method called on a given name ```String```.
- Default border width is ```2dp``` and default border color is ```white```.
- Placeholder letters are currently always white (in future user will be able to choose a different color).
- It is recommended to set your default placeholder ```String``` as short as possible (the best would be one letter).

## Getting Help

To report a specific problem or feature request, [open a new issue on Github](https://github.com/TangoAgency/avatar-view/issues/new).

## Company

[![Facebook](https://github.com/TangoAgency/avatar-view/blob/master/images/facebook.png)](https://www.facebook.com/TangoDigitalAgency)     [![Twitter](https://github.com/TangoAgency/avatar-view/blob/master/images/twitter.png)](https://twitter.com/Tango_Agency)     [![LinkedIn](https://github.com/TangoAgency/avatar-view/blob/master/images/linkedin.png)](https://www.linkedin.com/company/tango-digital-agency)

[Here](https://github.com/TangoAgency/) you can see open source work developed by Tango Agency.

Whether you're searching for a new partner or trusted team for creating your new great product we are always ready to start work with you.

You can contact us via [email protected].
Thanks in advance.

[Matt Precious's Lecture]:
[FirstExample]:
[SecondExample]:
[PicassoLoader]:
[ImageLoaderBase]:
[User]:
[AvatarViewBindings]:
[ExampleActivityNoBindings]:
[ExampleOnBindings]:
[Step3A]:
[DataBindingPart]:
[StandardMethodsPart]:
[DataBindingPresentation]:
[IImageLoader]:
[AvatarPlaceholder]:
[AvatarPlaceholderInfo]: