[Suggestion] Various icons modifications

[andiandi13]

Hi.

First of all I think that it would be nicer and more relevant to change the Previous/Next icon (control bar) with only one "triangle" instead of two. The two triangles with a bar is mostly used when the button can fast forward/backward AND skip to next/previous song. Here, its only used to skip and could be confusing at first use.

https://image.noelshack.com/fichiers/2017/18/1493688948-nextpreviousnewicon.png

Then, in most of material designed music apps the play button is bigger than the rest. I thought about reducing others icon and it looks like that :

https://image.noelshack.com/fichiers/2017/18/1493689112-beforeafter.png

That is all for now...

@adrian-bl : What do you think ?

[Kaned1as]

This was supposed to be part of material design icon set modernization (that never happened). Looks good, many people were waiting for it.

[samcompz]

great.

[adrian-bl]

LGTM!

[andiandi13]

@adrian-bl Fine :) Can I have all the control bar SVG files, so that I can resize them, please.

Nb : I'll post the entire SVG pack here once I'm done

[adrian-bl]

They are in the orig/ folder.

[adrian-bl]

And you can regenerate the pngs via ./generate-pngs.sh (requires inkscape)

[andiandi13]

Ok, thank you

[andiandi13]

Ok so I finished the icons, the svgz are here And the PNG's there

@adrian-bl I'm not too familiar with coding though, so for the PNG's I used a .bat script which uses Inkscape :

@ echo off set INKSCAPE_EXE="C:\Program Files\Inkscape\inkscape.exe"

echo set /p svgFile="Filename (without extension) ? "

IF NOT EXIST %svgFile%.svgz ( echo The file %svgFile%.svgz does not exist pause exit )

echo -------------------------------------- echo Generating mdpi (32x32)... %INKSCAPE_EXE% -f %svgFile%.svgz -e %svgFile%_mdpi.png -h 48 -w 48 echo Generating hdpi (48x48)... %INKSCAPE_EXE% -f %svgFile%.svgz -e %svgFile%_hdpi.png -h 72 -w 72 echo Generating xhdpi (64x64)... %INKSCAPE_EXE% -f %svgFile%.svgz -e %svgFile%_xhdpi.png -h 96 -w 96 echo Generating xxhdpi (96x96)... %INKSCAPE_EXE% -f %svgFile%.svgz -e %svgFile%xxhdpi.png -h 144 -w 144 echo -------------------------------------- echo Finished echo -------------------------------------- pause

I don't really know if its the same result, but I compiled the apk and its 100% normal.

[andiandi13]

Update :

@adrian-bl Is it possible to increase control bar height, so that it'll be more centered and less stuck to the bottom ? I mean :

I will permit me to add a circle to the play/pause icon, for a much more material design style (I would like to know your opinion on the result, it looks great to me) :

[adrian-bl]

Changing the height should not be an issue (the existing code will auto adjust)

But i am not sure about the circle: why does it make things look more 'material' ;-)

[Kaned1as]

Adrian, are you familiar with Material Design? Google proposed it for all > Android 5.0 apps.

Similar circular feedback can be found also in recent Chromium Aria UI and Qt QML Material-style widgets.

[adrian-bl]

A static circle isnt feedback.

I'm actually worried that it will clash with the ripple effect (= thing you see while pressing buttons in material apps)

[andiandi13]

Actually I was inspired first and foremost by the music player of Google (for Google is the creator of material design), and by other players that followed the trend of the circle button (Black player, Voltage, Pi, Phonograph, Stellio etc..)

                                        GOOGLE PLAY MUSIC

However, in my opinion you should never use the material design that Google provide (with all its effects, floating action button etc..) since it will make Vanilla consuming more RAM uselessly. Believe me, before choosing Vanilla as my main player, I compared the RAM consumption of hundreds of players from the play store, and Vanilla has the best features-consumption ratio !

Most of material design players have a terrible RAM consumption, even with poors features...

Anyway, all that to say that we should only work on icons and layout to me.

So do we keep the normal play/pause button ?

And also, do you think we should use those open source icons that we see in almost every material design music app (for shuffle and repeat at least), Google use them too. ?

                                          Result =

Sorry for this massive post :)

[adrian-bl]

So do we keep the normal play/pause button ?

We can give the circle version a try: having it displayed in the default accent color on Android 5 might actually look nice.

And also, do you think we should use those open source icons that we see in almost every material design music app (for shuffle and repeat at least), Google use them too.

Not sure: Do you think they look better than what we have now? I kind of dislike them as they look 'cold' to me.

[andiandi13]

OK so if I make a circle around play and pause svg, it should be fill with a certain color only or is there a particular svg filter to apply ?

I don't think there are better, they look a little bit too "angular" to me. I'll make the old one thinner and try others style to see what we can do.

[adrian-bl]

it should be fill with a certain color only or is there a particular svg filter to apply ?

I can apply a filter in code (we already do this to highlight the other two icons on Android >= 5 in custom colors). So the circle just needs to have an unique color (the grey would be ok)

I'll make the old one thinner and try others style to see what we can do.

Sounds good!

[andiandi13]

I gave a first try for the play/pause buttons, but I can't see the result since eveything is white (because of the code I guess), here are the svg :

Play button : download Pause button : download

So are you going to change some lines, or I have to do something in particular in the svg ?

PS : It appears on the notification panel though

[adrian-bl]

That's because we handle icons as '1 bit' in the playback view:

The icon is loaded and every non-transparent pixel is replaced by a color, depending on the theme and android version (so we do not end up with 3000 variants of every icon).

This now fails badly with the play icon - we probably have to think about some other approach to style the color at runtime :-/ (i excluded the play/pause icons from the update for now until we have a solution)

[adrian-bl]

Hmm.. one solution might be to just have the code draw the circle - this would also make it simpler to use the 'primary color' on Android >= 5.x

[adrian-bl]

Also note that i'll be on a business trip for ~2 weeks, so dont expect any reply for me in the next few days

[andiandi13]

Hmm.. one solution might be to just have the code draw the circle - this would also make it simpler to use the 'primary color' on Android >= 5.x

Yes like the playback cover, it seems to be a good idea.

Also note that i'll be on a business trip for ~2 weeks, so dont expect any reply for me in the next few days

Ok fine :)

[andiandi13]

- Several new modifications:

1. The "repeat once" number to a more simple thing :

2. The parent folder icon :

3. Shuffle and Repeat icons :

The Shuffle icon isn't too rounded nor squared and the Repeat icon remains simple but less rounded than before.

The result would look like that (with a higher margin and the circle button as well)

So what do you think ?

- Questions:

1. Do you keep the holo icons on purpose for Android < 5.0 ? Isn't it better to put material icons for any firmware ?

2. It's a little bit off topic but the library screen of vanilla is often too crowed, so :

-> Is there a possibility, on one hand, to get rid of the separation lines (especially on Holo firmwares !) like that :

-> And on the other hand, to scale down the album/artist text (which is the same size as the title despite that its less important and overloads the screen particularly with long tags) :

It looks more "modern" and clearer to me. I choose a random text size, but in any case it'll also permit to have a less cut-off text with long album names !

[adrian-bl]

Thanks a lot for your work: I like the new icons - feel free to upload them!

About the questions:

1: Yes, we keep the holo icons on purpose as we do not try to 'emulate' material design on 4.x devices - I feel that we should use the native icons if possible.

2: This 'crowded' design is only visible on Android 4.x and has been like this since 'forever'. But maybe it would be a good idea to use the same dimensions on 4.x as we do on 5.x (which is feels less 'cramped')

[andiandi13]

Its a pleasure to improve Vanilla :)

Ok, so all the icons are in the zip (I've also updated a little bit next/previous icons) : Google Drive I look forward to see the result in the next Nightly.

I think we're almost done, you've just to :

• Increase the control bar height
• Make a grey circle around the play/pause buttons
• Use the same dimensions as 5.x (It worth a try)

[adrian-bl]

Ok, finally got some time to work on this: I updated all icons from the last zip excluding the widget versions. These are also used in the Notification and having different sizes there looked not so nice IMO.

I also added code to draw the circle (commit: 57992bad25b6ade8a86323c9f3ee924d23c13cb5) behind the play/pause button.

I did some experiments:

These samples use the accent color:

And these are using material grey:

I went with the grey version for now as i didn't like the accent color in the white theme.

And this is Android 4.x:

What color did you intent to use for holo? It's probably too dark right now (i used #f222)

And oh: yes: the play button needs some adjustment to look centered.

[adrian-bl]

Also made a version with slightly higher buttons (48 -> 52)

[andiandi13]

Thanks for your work.

Here are some new Play / Pause icons, centered and smaller, the old ones are really invasive imo : Google Drive

For the colors: I also prefer the grey icon much more, whether in Material design or in Holo design and its indeed too dark in Holo. After some experiments I would suggest the #4A4A4A grey for holo

Also, I think that you should move all icons a bit more upper and increase the circle size.

To sum up all this, it would look like that :

However, I don't know if you have a limit in the margin since the control bar has a limit (64px in your image for example) and I would prefer an higher margin in Holo but would it affect the material margin ?

So what do you think.

[adrian-bl]

Thanks for the updated icons: But the play/pause button were slightly smaller than the next/prev buttons. Was this intentional? I adjusted them for now to be the same height.

I also added some padding to the buttons and things are now looking like this:

[ToNIX-]

@adrian-bl That last screenshot looks amazing. Everything​ is aligned and centered.

Personally, I'd make the play/pause icon slightly bigger that the others.

[adrian-bl]

And this is Holo with the same spacing as Material:

[andiandi13]

It was intentional but ultimately I prefer yours. Is it perfectly centered though ?

Also, I partially agree with @ToNIX : The Play icon should be bigger BUT only if the circle also is bigger as well as the control bar. If that's impossible (especially because of the control bar) it'd looks too crowded and I'd prefer your result.

I was thinking of something like that, tell me if its possible and what do you think.

Nb : The spacing in Holo looks amazing, thanks.

[adrian-bl]

Is it perfectly centered though ?

It should be (unless inkscape fooled me - but it looks OK IMO)

BUT only if the circle also is bigger as well as the control bar.

We can increase the size of the control bar - but right now it has the same height as a library row. Making it bigger looks kind of ugly in my opinion (I did some experiments and it just feels odd if you see the library rows at the same time).

But we could also increase the size of the circle: It uses 80% (https://github.com/vanilla-music/vanilla/blob/db02f119638fee2b7db12066ddc5f8d5295c30df/src/ch/blinkenlights/android/vanilla/VanillaImageButton.java#L78) of the available space right now.

[andiandi13]

We can increase the size of the control bar - but right now it has the same height as a library row. Making it bigger looks kind of ugly in my opinion (I did some experiments and it just feels odd if you see the library rows at the same time).

But we could also increase the size of the circle: It uses 80% of the available space right now.

I really think that more than 80% would overload the control bar too much. Let's keep it at 80%.

I'd suggest a play/pause icon slightly bigger though, but not as big as the one in the after pic of my gif (mid way).

Can you try it ?

[adrian-bl]

Yepp, i'll play around with the size this evening

[adrian-bl]

How about this?

[andiandi13]

It looks perfect. Can you please send me an apk to try it.

[adrian-bl]

You can try the latest nightly build: http://android.eqmx.net/android/vanilla/VanillaMusic-nightly.apk

(Note that this will install as a different application, called 'Vanilla Nightly')

[andiandi13]

Yeah I know I often try the new features in the nightly, I didn't know that the icon were already updated though.

Well, in KK its also cool ! :

http://i.imgur.com/W2mS8dH.png

[andiandi13]

Also I wonder, is it svgz for widget previews ? (those : http://i.imgur.com/A7SyAP6.png)

nb : btw the nighlty icon is a little bit pixelated, I make a new svg with the 006666 color Google Drive

[adrian-bl]

Also I wonder, is it svgz for widget previews ?

No, they are just plain screenshots. I'll updated them when i have time (also have to update the screenshots for the play store)

nb : btw the nighlty icon is a little bit pixelated, I make a new svg with the 006666 color Google Drive

Thanks, but we create this dynamically during the nightly build using imagemagick. I don't mind if the nightly icon doesn't look that nice as it's only used for debug builds ;-)

[adrian-bl]

Ok, updated the widget previews in commit 124a24e9b1d09cbef5313d6152cc5d319757e670

@andiandi13 Thanks again for all your work - would you like to have your name added to the 'About' page? (And if yes, which name?)

[andiandi13]

@andiandi13 Thanks again for all your work - would you like to have your name added to the 'About' page? (And if yes, which name?)

You're welcome it was a pleasure :p And yes why not, my name is Yacine Krouri.

[Kaned1as]

Amount of anime-loving people in Vanilla contributors starts steadily grows :)

[adrian-bl]

@andiandi13 great: i added you in commit 64d0325a7d3529ce97d1c9701c011f640e630fca and tagged release 1.0.53, so it should soon show up on f-droid (and i'll probably start the rollout in the play-store next week)

@Adonai I wonder how/why Vanilla Music attracts this 'demographic' - maybe because all streaming services suck for OSTs.

[refi64]

Streaming services suck in general for anything coming out of Japan... I mean, Spotify only has like 4 Sawano OSTs...

[andiandi13]

Ok cool !

[adrian-bl]

Closing this as 1.0.53 has hit f-droid and the play store (beta).

Thanks again for all your hard work!