vanilla-music / vanilla

Vanilla Music Player for Android
GNU General Public License v3.0
1.18k stars 295 forks source link

Create adaptive Icon for android 8 #660

Open adrian-bl opened 7 years ago

adrian-bl commented 7 years ago

Documentation is at: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive.html

Kaned1as commented 6 years ago

... why?

adrian-bl commented 6 years ago

Is there any launcher actually using them?

Kaned1as commented 6 years ago

No

adrian-bl commented 6 years ago

Reopening this: My Phone just got an Upgrade to 8.1 which increases my motivation for an adoptive icon:

image

@andiandi13 as you created the current icon: Would be glad to get some feedback/ideas on how such an icon would look like. I'm also not that much fixed on our current 'loudspeaker'-theme - so using something completely different as an icon would be fine.

adrian-bl commented 6 years ago

Closing as dupe of #660

andiandi13 commented 6 years ago

@adrian-bl Sorry I never seen your message.

But I think you juste created an icon force the next update or is it a test ?

adrian-bl commented 6 years ago

I tried some things, but then settled on keeping the old icon: The only change i did was to give it a dark (blue) background (instead of androids default white background)

andiandi13 commented 6 years ago

Why is your launcher keeping the full icon inside the circle ? Oreo do that ?

I'm still on KitKat and I tried an Oreo launcher, it's quite nice if it's like this imo :

 https://image.noelshack.com/fichiers/2018/25/7/1529860881-screenshot-2018-06-24-19-16-18-540x960.png

adrian-bl commented 6 years ago

Oreo do that ?

Yes: Applications compiled with newer SDK (26) versions will (forcefully) be opted-in to adaptive icons while running on Android >= 8.0 : The default of my launcher is to create a round adaptive icon.

Also see: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

andiandi13 commented 6 years ago

It wasn't exactly my question. I meant what is your icon not "zoomed" but full.

Look at my screenshot, its so much better like this.

adrian-bl commented 6 years ago

Oh: you are running an (old) nightly build, right?

That was my first attempt in commit 1b2776319456fc0a9e1d5f0b05c1190912fd822e - i didn't really like it and went back to the original icon.

The latest version looks like this:

image

andiandi13 commented 6 years ago

No I'm running the last play store version actually.

I'll make some attempts when I'll have some spare time.

But tell me, can't we directly make a new round icon ? Players like Musicolet are quite nice like this.

adrian-bl commented 6 years ago

Oh? Shamecube for me then: looks like i compiled 1.61 for the play store at the wrong commit id then :-) The 1.61 tag (which should have been used) does not include the adaptive icon.

But tell me, can't we directly make a new round icon ?

The problem is that adaptive icons are not always round: A launcher may choose to display the icon as a square :-/ (Only the inner 72x72dp of the foreground layer are guaranteed to be displayed, the background layer can have different shapes)

andiandi13 commented 6 years ago

No I don't think you made a mistake, as I said, I'm on kit Kat, its just an Oreo launcher that behaves like that.

The problem is that adaptive icons are not always round: A launcher may choose to display the icon as a square :-/

Hmm I see so we must create a squared icon (with round corners or no, whatever...) ?

adrian-bl commented 6 years ago

Hmm I see so we must create a squared icon (with round corners or no, whatever...) ?

We just need to create a logo which fits in the 72x72dp foreground layer (See link to developers.android.com above).

The launcher can then choose to render the 108x108dp background layer in any shape it likes.

andiandi13 commented 6 years ago

OK I see, the link is very clear.

So if I create an svg icon, is a 72x72 mask with the fullscreen icon sufficient ? If yes do I have to set a background color behind the icon to fill the corners ?

adrian-bl commented 6 years ago

So if I create an svg icon, is a 72x72 mask with the fullscreen icon sufficient

The background color could be transparent: We could then set the background layer to a solid color (android automatically stacks both layers - and the foreground layer is free to use transparency)

Btw: here is another nice article about adaptive icons with more examples and details: https://medium.com/google-design/designing-adaptive-icons-515af294c783

andiandi13 commented 6 years ago

Alright ill check that. But if we make a transparent background, can it be a solid color also in firmwares <8.0 with a custom shape ?

adrian-bl commented 6 years ago

Yes: launchers without adaptive icon support will use a completely different drawable (icon.png)

andiandi13 commented 6 years ago

OK thank you

andiandi13 commented 6 years ago

@adrian-bl I juste saw a logo proposal for Vanilla on a website : https://steemit.com/utopian-io/@lowlevel/logo-design-proposal-for-vanilla-music-app?sort=new

Its pretty good and unique imo what do you think ? (I'm not really thrilled about the gradient color though)

adrian-bl commented 6 years ago

It is unique, but i'm not a big fan of it :-/ (I agree that the non-gradient version looks much better however).

andiandi13 commented 6 years ago

Ok. I tried to think of an unique icon but tbh it's quite hard to stand out from what you see everywhere.

I'll continue to draw some draft though