Update app icon and support the round icon of Android 7.1

[ghost]

Besides the current material icon request in the app (#272 #273), I'd like to see an updated app icon as well. In my opinion a white "w" on a black background should be enough to recognize wallabag. And with Android 7.1 in sight, it would be useful to create an round icon as well :)

[di72nn]

I can do it, but I need details regarding color replacements (talking about the next quote). And/or a brief guide how to check that the colors are fine according to the Material Design guidelines.

2780e3 isn't a recommended Material Design color though and the closest color to that is #2196f3 as the primary color with #0d47a1 for the status bar. Either could replace teal for the toggles.

[lokesh-krishna]

You can find the entire Material Design color palette over here.

If the difference between the Material Design color closest to what color the icon has and the color of the icon itself isn't all that perceptible then we might as well go with the Material Design color for the sake of consistency.

[lokesh-krishna]

Are we planning on going through on this? I don't think we even need to redesign the colour scheme in order to use the new icon because of how many themes there are and how slapping blue on all of them would be awkward.

Can't we simply update icon?

[di72nn]

It's not like we neglect it: there wasn't much activity on the project lately. I'm working on v2 API branch and avoid adding new stuff to master. I think the new icon may go into the next major version along with other new features from #370.

[lokesh-krishna]

Those are so many amazing changes! Looking forward a lot to seeing that PR (and the new icon) getting implemented. I had no idea so much was going on.

[lokesh-krishna]

Just noticed that the new UI and v2 API launched on the beta channel. Also saw that the new website abandons the colours that this icon is based upon. Since this is a SVG, could it be possible to change the colours to a white background, black wallaby and a white “W”? Then maybe the icon can be updated without worrying about any clashes with the UI and join the beta releases.

Edit: Just noticed that the About screen has a bright blue header. Is that related to this icon or is that colour still attached to Wallabag's design?

[di72nn]

The About screen theme is an issue nobody bothers to look into (this screen is generated by a library, so it uses different theming than other activities).

could it be possible to change the colours to a white background, black wallaby and a white “W”?

The shadow of "W" is not visible on the wallaby and the circle outline (or whatever you call this thing on the top) is white on white.

[tcitworld]

Edit: Just noticed that the About screen has a bright blue header. Is that related to this icon or is that colour still attached to Wallabag's design?

It can be easily themed if I recall.

[lokesh-krishna]

The About screen theme is an issue nobody bothers to look into (this screen is generated by a library, so it uses different theming than other activities).

I can't find an issue regarding this in the issue tracker, open or closed.

It can be easily themed if I recall.

Then maybe we should open an issue and add the “easy” label to it to make it more accessible.

The shadow of "W" is not visible on the wallaby and the circle outline (or whatever you call this thing on the top) is white on white.

I still think this is better than the present icon but we could do better. Maybe just use the actual logo, without any square or circle beneath it? Not sure what we would do about round icon support then. @varlesh seems to have taken a break from designing icons so I don't think he will be helping us with this. Nevertheless, this move to the v2 API and all the additional features is a very significant one and the right time for an icon update. What seems to be the best solution to y'all?

Edit: Going ahead with the original suggestions seems like a really good idea now. We take the “W” from the Wallabag icon and put it atop a plain white circle and drop an appropriate shadow. This would be the regular and the round icon.

[Strubbl]

The About screen theme is an issue nobody bothers to look into (this screen is generated by a library, so it uses different theming than other activities).

I can't find an issue regarding this in the issue tracker, open or closed.

In this context, issue does not mean a "github issue". I think @di72nn means that nobody cares how the about screen is themed.

@jlnostr what was your intention of this issue? I cannot see the need to update the icon to be round instead of square. Is it just for fun? Do you have any reference?

[ghost]

@Strubbl With Android 7.1 apps can both provide a round and a "normal" icon. Then, in the Pixel Launcher (and afaik in some third-party launchers as well) there's an option to choose between round or normal icons.

This issue was created to mention this support, I thought it was very fast to implement since I thought "it's just an icon".

[lokesh-krishna]

In this context, issue does not mean a "github issue". I think @di72nn means that nobody cares how the about screen is themed.

The screen really sticks out from the rest of the app and if it is something that can be easily fixed then having an open issue labelled as easy will help in getting it resolved.

As for the icon itself, while round icon support would be nice, I think that the app would definitely benefit from having a more modern (read Material Design compliant) icon. This icon simply appears to be from an earlier era of Android. As for references, the Material Design guidelines mentioned at the start of this thread explain it all.

[di72nn]

if it is something that can be easily fixed then having an open issue labelled as easy will help in getting it resolved.

You may create a new github issue if you want.

I find the look of the currently used icon to be somewhat old, but I see no good alternatives so far. The colorful icon provided here is good, but we don't have a theme with matching colors (I also like the current black and white style). If we make this icon black and white I can't shake off the feeling that I look at a billiard ball with a wallaby silhouette slapped on it.

[lokesh-krishna]

In my opinion a white "w" on a black background should be enough to recognize wallabag

Could someone with some skill in this department make a mockup to see if that is the direction we should head in? This would still not solve the billiard ball appearance problem though.

[di72nn]

Current icon: . The square's style stands out of the material style IMO.

How about we try to use the new wallaby image on a white square without the embossing (or what do you call it) and with rounded corners?

[lokesh-krishna]

And with a Material Design compliant drops shadow too? I think that much is all that needs to be done to update this icon.

[lokesh-krishna]

So, I spoke to another icon designer about this. Michael Cook of Cookicons fame. He has added this to his queue and said that he would get back to me in a month or so.

However, this is what he had to say about adapting the current icon to Material Design.

The current concept you have will be pretty tricky to work with as it relies on small details and organic shapes, two things that typically are not well suited for MD icons.

So I suggested going with the "W" from the icon and that is the direction that he said he would be taking.

Can we wait to hear from him before tweaking this icon?

[di72nn]

Can we wait to hear from him before tweaking this icon?

I'm fine with waiting.

Thanks for putting efforts into it.

[themichaelcook]

Howdy folks. Finally getting to this icon. I go on a trip in about 2 weeks but I'll see what I can come up with before then and get back to it if needed when I return.

Is this a good place to share progress? Anywhere better?

Also, will you be wanting to support Android O's adaptive icons? Personally I think they're the biggest iconographic mistake Google has ever made but oh well.

I'll be working on the icon here: https://www.figma.com/file/BmsMnKMHHHUM9cZLVLUsDV/Wallabag-Product-Icon

[lokesh-krishna]

I think here should do. The "W" mockups look really good!

[themichaelcook]

https://adapticon.tooo.io/#/bg=http://i.imgur.com/ViltHR6.png/fg=http://i.imgur.com/1JkVaVE.png

[lokesh-krishna]

Love it!
@di72nn @tcitworld What do you think?

[tcitworld]

Really nice. Thanks for your work. :+1:

[lokesh-krishna]

Which of these icons will be the default on devices that don't support adaptive or round icons?
I vote for the rounded square (last one).

[di72nn]

Nice icon. Thank you.

I like the square one too.

[themichaelcook]

Here's what the family of variations would look like. The smallest one being the notification icon, if that is needed.

[di72nn]

Is it just me or that curved line (that divides lower and upper parts) has problems with aliasing?

[themichaelcook]

Ya, curved single pixel lines can do that. I'll see what I can do by adjusting the width slight amounts.

[themichaelcook]

Yall good with this approach? Any issues in terms of the concept?

I really liked the idea of incorporating a wallaby in some way but it would likely be a lot more work to do and I've got limited time before I head out on a trip. Also app icons have gotten overly minimal over the years. A full wallaby would probably have worked out super well for an OSX app icon.

[lokesh-krishna]

If someone could please give an authoritative go-ahead, the design could be finalised and we could start working on switching to this icon.

[Strubbl]

If someone could please give an authoritative go-ahead

Such a cool design concept. Please go ahead :) I would love to see that implemented in the app soon.

Minor improvements can always be integrated in further iterations. Let's have a first version and integrate that

[themichaelcook]

Zip attached. Please let me know when the icon is live so that I can showcase it.

If you'd like to include credits, please do something like: Michael Cook, http://cookicons.co

Thanks and best of luck with your app.

Wallabag Product Icon.zip

[Strubbl]

@themichaelcook Please have a look at our app icon for the debug version of our app:

It has a small bug attached to it.

Can you please create one debug icon with the new logo?

Background: The second icon was needed to visually distinguish between two installed versions of the app on the same smartphon. Developers usually have both versions of the app installed: The release version from an app store and besides that a self-built debug/developer version.

@ App developers: Who is pickung up the zip file and include it into this repository? If nobodoy volunteers, i can give it a try by next week.

[Strubbl]

Should the new icons be in the master right now or should they be merged only after the branch add-android-o-support is merged?

[di72nn]

@themichaelcook can you provide SVG's (in case we need some changes in the future)?

@Strubbl I think we can modify the icon for debug by ourselves.

[lokesh-krishna]

@Strubbl Seeing how the original plan was to update the icon when the v2 update went live, I think the icon should be updated as soon as possible.
I am willing to try. Would it be okay to just follow this guide? Also, I don't have Android Studio on my laptop so I would be doing this on GitHub. Would that be a problem?

Also, can we credit Michael Cook in the changelog for the version in which the icon goes live as well, apart from the About screen?
The changelog for Survival Manual did that when he gave them a new icon and that's how I discovered him so...

[Strubbl]

Yes, of course credits for the logo in about screen. I am not aware of a changelog. What changelog do you mean? Do you have a link?

If you want, you can give it a try with the github web. I do not know if that will work. I just have created a branch where you can push your commit against. The name is "update-logo". If you create your pull request against that branch, we can easily merge it to this main repo and verify with android studio if everything is okay. And if not, we can work together on improving until it is ready for the master branch.

I do not know the linked guide. Perhaps that works. Additionally, here are some hints from the offical Android page https://developer.android.com/preview/features/adaptive-icons.html

[lokesh-krishna]

I am not aware of a changelog. What changelog do you mean? Do you have a link?

I was talking about the "What's New" section in the Play Store page of the app. Maybe we could mention the designer and his website along with the fact that we have a new icon in the "What's New" of the version that'll carry the new icon? That's what Survival Manual did and that led me to discovering his work. Others could benefit similarly even if they don't bother checking the About screen.

[di72nn]

I'll update the icon when we get SVG's.

[lokesh-krishna]

I can see how it can be useful to have them to make corrections or improvements if the need arises but do we actually need them to update the icon? We just require PNGs for that and that we already have, right?

[di72nn]

I want to be sure the PNG's can be generated without external help first. Also it might be better to create a debug icon based on an SVG file.

Anyway, the app used current icon for years - it's not like we're in a hurry.

[Strubbl]

@themichaelcook can you please provide the logo as SVG file?

[themichaelcook]

Hey! Sorry about the long wait, not sure why my notifications aren't working.

[themichaelcook]

Here are two options for the debug version. Zips attached below.

In terms of SVG, the intricate nature of Material Design icons means that SVGs are too complicated to import well into design tools (not to mention tricky to make modifications too). What I can offer you is the figma link that will allow you to access, export, and edit the icons with a free account:

https://www.figma.com/file/dX13ypsi2eNNTINmVKIs6x/Wallabag-Product-Icon-shared

As long as the tasks are not within tight deadlines or very tedious, I should be available to make adjustments to the icon as needed.

Wallabag Debug02.zip Wallabag Debug01.zip

[tcitworld]

Thanks a lot, I have a small preference for option two.

Is there a way to tip you for the work you've done ?

[themichaelcook]

Sure, I'm set up for Paypal at themichaelcook@gmail.com <3

[themichaelcook]

There's also this article for implementing Adaptive Icons

https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e

[di72nn]

I tried exporting the icon parts as SVGs, but the results have weird artifacts. I used GIMP, Inkscape and also opened it in firefox. I presume that either source SVGs have weird format, or SVG export is buggy. I'm very skeptical about that figma service.

[themichaelcook]

The complexity of the icon is biggest factor in this situation. I'm using a mask, rounded corners, drop shadows, inner shadows, and multiple kinds of gradients. But it's not just an export issue. Figma does have a way to go in improving their SVG export but in general SVG export/import is a varied mess across all the tools I've tried, everyone does it slightly differently, particularly with the more advanced effects used in Material Design icons.

SVG provides a dream of a cross platform vector format but it is far from a reality for anything other than the most simple designs.

Figma can export complex SVGs with effects that will render properly in browsers but that requires reconstructing the icon in a way that makes it less easy to make future changes too.

I've added to the figma file (and attached here) three new versions of the icon with no layer effects. These should import well into other vector design tools.

Besides Inkskape/GIMP, figma is currently the most accessible, cross platform professional vector design tool. It's a new service and still has a ways to go but it has simultaneous multi user editing, version history, developer inspection mode, and basic prototyping.

Wallabag Product Icons (Flat).zip

Let me know if these new flat icons work better or if there's anything else I can help with.

[lokesh-krishna]

Can someone please give the go ahead on this now? The SVGs couldn't be provided because they weren't used in the first place. And while we do have flat icons with SVGs, the originals are so much more beautiful and I would love to see us go with them.

@di72nn Seeing how the icons were created with Figma and the link lets us generate PNGs without any external help, we should be good, right? Can we please, please merge these icons?