search

jellyfin-archive / jellyfin-android-original

Android Client for Jellyfin
https://jellyfin.org
GNU General Public License v2.0
272 stars 65 forks source link

Adaptive app icons #324

Closed cromefire closed 4 years ago

cromefire commented 4 years ago

Discussion about how to implement adaptive app icons

beauty is in the eye of the beholder

Adaptive

These are used in API level 26+ (Android 8)

The Launcher (usually set by the manufacturer) determines the shape of all apps.

The most commonly used here are square and circle.

There are 3 Versions:

Low (looks good in squares)

Grid ![low grid](https://user-images.githubusercontent.com/26320625/80292309-1bb4ea80-8756-11ea-85bc-64c90f359bfe.png)
All ![low all](https://user-images.githubusercontent.com/26320625/80292320-3ab37c80-8756-11ea-94bc-723dd7c93de1.png)

Medium (middleground)

Grid ![medium grid](https://user-images.githubusercontent.com/26320625/80292337-5d459580-8756-11ea-85c4-da60d71328f0.png)
All ![medium all](https://user-images.githubusercontent.com/26320625/80292342-6c2c4800-8756-11ea-8362-5de596469926.png)

High (looks good in circles)

Grid ![high grid](https://user-images.githubusercontent.com/26320625/80292361-8fef8e00-8756-11ea-8d3f-15a062dac147.png)
All ![high all](https://user-images.githubusercontent.com/26320625/80292369-9e3daa00-8756-11ea-9c9f-0be78b4d62d2.png)

Legacy

Used in API level 21 (Android 7.1) or lower

This is just about the shape, the position will be decided by the above version. The checker board is transparent.

Also I didn't make those up, those are the options provided by android studio: options

There are 5 Versions: none: ![none](https://user-images.githubusercontent.com/26320625/80293007-e4493c80-875b-11ea-9cfd-10d3eec81143.png) _(Yes that big dark square in the background belongs to the icon)_ circle: ![circle](https://user-images.githubusercontent.com/26320625/80293031-2a9e9b80-875c-11ea-81ce-cb4abc852de1.png) square: ![square](https://user-images.githubusercontent.com/26320625/80293039-39854e00-875c-11ea-8ff0-e508ccb38ebb.png) vertical: ![vertical](https://user-images.githubusercontent.com/26320625/80293050-486c0080-875c-11ea-9670-8c71f4c72181.png) horizontal: ![horizontal](https://user-images.githubusercontent.com/26320625/80293056-56218600-875c-11ea-938a-fc64ffc0560c.png)
cromefire commented 4 years ago

Here is something to vote for stuff (in case you just want to vote for something)

These are 2 different votes, vote for what you think is the right thing to do

Adaptive icons:

cromefire commented 4 years ago

Low

cromefire commented 4 years ago

Medium

cromefire commented 4 years ago

High

cromefire commented 4 years ago

And for legacy:

cromefire commented 4 years ago

None

cromefire commented 4 years ago

Circle

cromefire commented 4 years ago

Square

cromefire commented 4 years ago

Vertical

cromefire commented 4 years ago

Horizontal

cromefire commented 4 years ago

End of voting, comments below

=======================

nielsvanvelzen commented 4 years ago

Suggestion for the legacy icon: drop the background and add shadows: image

(Quickly made with https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html)

cromefire commented 4 years ago

I did not include that because of readability issues on certain backgrounds and consistency

cromefire commented 4 years ago

Screenshot_20200426-114342 This would be still visible to a normal user but it would probably not pass accessibility and we can't control the background with a transparent icon. (Yes this is a extreme case, but it's already harder to see on red and blue backgrounds)

nielsvanvelzen commented 4 years ago

I don't see any shadows in your example but I agree it might be hard to see, even with shadows.