https://github.com/turekbot/letter-avatar

A Material-Design-like avatar that displays the first letter of a user's name. Similar to those shown at inbox.google.com
https://github.com/turekbot/letter-avatar

Last synced: about 1 year ago
JSON representation

A Material-Design-like avatar that displays the first letter of a user's name. Similar to those shown at inbox.google.com

• Host: GitHub
• URL: https://github.com/turekbot/letter-avatar
• Owner: TurekBot
• Created: 2018-03-01T21:13:51.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-19T23:48:24.000Z (about 8 years ago)
• Last Synced: 2025-04-09T19:54:55.704Z (about 1 year ago)
• Language: CSS
• Size: 19.5 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# LetterAvatar

A Material-Design-like avatar that displays the first letter of a user's name. Similar to those shown at inbox.google.com

![Prime Example](https://i.imgur.com/OsmmaMe.png)

## It's SceneBuilder compatible!

1. Clone this repository and run `mvn clean install` in the root of the project.

2. Add to SceneBuilder

    1. ![Add to SceneBuilder Animation](https://i.imgur.com/7DHuDJQ.gif)

## Sample Usage

```java            

// The argument will determine the background color; this will always be the same color for the same input.

// This assumes you want the avatar's letter to be the first letter of the user's name.

LetterAvatar la = new LetterAvatar(user.getName());

// If you want to be explicit about which letter to use, use this constructor.

LetterAvatar la = new LetterAvatar("B", "some unique-to-the-user value");

```

---

## Change Avatar Character

I designed LetterAvatar to have one character, but if you felt like it, maybe you could put two.

    letterAvatar.setAvatarCharacter("Z");

    

## Change Size

`LetterAvatar` changes its size based on the font size, so all you have to do is make the font a little bigger and the background circle will automatically grow.

    letterAvatar.setFont(Font.font(32));

    

## Change Background Color Pallete

`LetterAvatar` uses the [Material Design Color Palletes].

By default I assume you want to use *all* of them and so the only thing left to do is to decide **how dark**—I call this the color number for lack of a better phrase.

### Darkness

    leterAvatar.setColorNumber("100");

    

    ![the gammut](https://i.imgur.com/GRLyJYo.png)

You can pick



50

100

200

300

400

500

600

700

800

900

A100

A200

A400

A700



*A100, A200, A400, and A700 are not available for brown, grey and blue-grey.

#### Font Color

If you find yourself hating the fact that at a certain darkness some colors require a white font fill and others don't,

 1. [Blame](https://gist.github.com/maxd/63691840fc372f22f470#file-modena-css-L112) [JavaFX](https://gist.github.com/maxd/63691840fc372f22f470#file-modena-css-L204) :smile:

 2. In your stylesheet, override the -fx-text-fill using something like this

    

    .letter-avatar {

        -fx-text-fill: white;

    }

    

### Hues

The hues are looked up from a stylesheet that `LetterAvatar` holds inside it. Theoretically, if you were to maintain the pattern, at runtime you could add and take away hues from `letterAvatar.getHues()`. This would be your stratgey if you wanted to use accent colors (because brown, grey and blue-grey don't have accent colors).

    

[Material Design Color Palletes]: https://material.io/guidelines/style/color.html#color-color-palette