Avatar
An Avatar is used to show a visual thumbnail representation of individuals, products and entities or certain categories and states in the interface.
Rules For Android
- Use CircularImage
- Size should be defined by
Modifier.size(). - There are predefined dimensions like
headerImageSize(64dp) oravatarImageSize(40dp) inGeorgeTheme.dimensionsor use hardcoded values.
Size
Avatars can be rendered in one of three pre-defined sizes - Small, Medium or Large.
Avatar components in G-App are separated by semantic use cases, the following types are available:
Product
Used in components and elements that represent a product, this can be either a default icon assigned initially, or a custom image provided by the user.
There are also special types for credit cards, for which George shows the vendor logo by default; and for the “edit” view of a product, which prompts the user to upload an image.
Tokens
| Avatar - Product | Token |
|---|---|
| icon | color.fill.primary |
| border | color.fill.quaternary |
| customize-fill | overlay.soft |
Transaction
Used in components that represent an order, a payment or a transaction. This can either be a default icon based on the category, or a merchant logo from our database.
Tokens
| Avatar - Transaction | Token |
|---|---|
| icon | color.fill.tertiary |
| border | color.fill.quaternary |
Person
Used in components that represent another person, like in the address book or in the messaging features of George. This type can either have a custom image (photo), a default user icon, oor the initials of the entity, if it is technically possible to extract & render them.
Tokens
| Avatar - Person | Token |
|---|---|
| icon | color.fill.tertiary |
| border | color.fill.quaternary |
| initials | color.state.info |
| initials-fill | color.state.info.weak |
State
Used in components that represent an alert state, currently used for so called Bank Messages in George. This type can either be used in “info” or “warning” state.
Tokens
| Avatar - State | Token |
|---|---|
| icon-info | color.state.info |
| fill-info | color.state.info.weak |
| icon-warning | color.state.warning |
| fill-warning | color.state.warning.weak |