Android-app: Update app icon and support the round icon of Android 7.1
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 :)
nachtjasmin
All 112 comments
What are the specifications an icon should meet for Android? I believe any number of icon pack developers for GNU/Linux wouldn't mind making an icon as long as they're provided with the exact specifications.
I've been waiting a long time to see a Material Design app icon.
lokesh-krishna
on 4 Dec 2016
I think this is the right documentation for it: https://material.google.com/style/icons.html#icons-system-icons
nachtjasmin
on 4 Dec 2016
Thank you so much!
I'll contact an icon pack developer to see what can be done :)
lokesh-krishna
on 4 Dec 2016
Also, maybe icon shortcuts.
tcitworld
on 5 Dec 2016
@tcitworld I don't think that's something an icon designer should be doing. A separate issue maybe?
lokesh-krishna
on 5 Dec 2016
varlesh
on 10 Dec 2016
I really like the general aspect, but could the wallaby be just a little less large ? A thousand thanks for your work.
tcitworld
on 10 Dec 2016
you mean large "W"?
Soryy my English very bad ;)
varlesh
on 10 Dec 2016
Apologies. I had found the kangaroo itself a bit large at first on your picture, but in fact it's because of the way it's stylized on our own logo with the "w" :
tcitworld
on 10 Dec 2016
Suits me well on second look. :)
tcitworld
on 10 Dec 2016
And what do you guys think about the plain "w" (with a long shadow) on a black background?
nachtjasmin
on 10 Dec 2016
Ok. I use #2780e3 color for circle background - it's your main color on site.
varlesh
on 10 Dec 2016
Black not good for material... IMHO
varlesh
on 10 Dec 2016
I get your point. However, I'm unsure if #2780e3 or #00bcd4 should be used, the latter is used on the web interface of wallabag. Which color do you prefer @tcitworld @nicosomb @j0k3r?
nachtjasmin
on 10 Dec 2016
Maybe merge colors...
varlesh
on 10 Dec 2016
Also for better looking we can add shadow effect for kangoo :)
For example:
varlesh
on 10 Dec 2016
it's emphasize kangoo symbol
varlesh
on 10 Dec 2016
The contrast is too low in my opinion. BTW: That's not the original "w" from the wallabag logo source files or am I wrong?
nachtjasmin
on 10 Dec 2016
Yes, it's not original "w" and others dots too - because i redraw all elements with pixel align.
See grid doesn't match with objects.
varlesh
on 10 Dec 2016
Ah I see. Is there a possibility for multiple logos? One with pixel-perfect design and one without it? On most devices today you won't recognize single pixels, on these the original icon could be used :)
nachtjasmin
on 10 Dec 2016
For compare (your icon i'm reduce to 100px, original 200px - my 96px)
varlesh
on 10 Dec 2016
Pixel align need for clarity
varlesh
on 10 Dec 2016
Ah I see. Is there a possibility for multiple logos? One with pixel-perfect design and one without it? On most devices today you won't recognize single pixels, on these the original icon could be used :)
I'm not have idea how better use original icon with material style...
varlesh
on 10 Dec 2016
Then use your pixel-perfect icon 👍
nachtjasmin
on 10 Dec 2016
i'm not want change your main style and logo... your logo very good and stylized.
But I create for android app only (on material, how i can)
varlesh
on 10 Dec 2016
It's not my logo 😉
nachtjasmin
on 10 Dec 2016
Oh, sorry :)
Ok, guys i show some variants for android logo. If you like - please choose colors and tell me sizes for DPI's i'm adapt icons
varlesh
on 10 Dec 2016
I love the very first icon, before the color merging. I feel like the contrast on that is just right, the kangaroo being subtle enough that it is the “W” that catches the eye but there nevertheless.
If somebody can please mention the required DPI then can we proceed with that one itself?
And @varlesh Thank you so, so, so, so much! I'm so grateful!
Also, I think a black W on a white circle with a drop shadow for the W would look pretty classy, using the W from the logo source if that's the direction we want to go in. It would be a bit generic though. I still think the first icon is too gorgeous.
lokesh-krishna
on 10 Dec 2016
Sorry about bumping this but isn't this issue something that can be followed up on? Is there anything in particular stalling the discussion?
lokesh-krishna
on 19 Dec 2016
I think finding somebody that follows this issue up as a pull request is stalling this issue.
Strubbl
on 19 Dec 2016
Well, @varlesh said he would provide icons at the requested DPIs and even modify it to meet any changes we suggested. I guess he could file a PR once we told him that or one of you could use the resources and file a PR.
What's important is to first confirm which icon we're going ahead with, right?
lokesh-krishna
on 20 Dec 2016
varlesh
on 20 Dec 2016
I love the second one. Can we have a vote to pick between the two?
lokesh-krishna
on 20 Dec 2016
Yup, please vote here : https://framadate.org/cEbbJS6XahoD8wrw
tcitworld
on 20 Dec 2016
Until when will voting be open? Asking so that we can act upon the choice promptly as without a set time we'll be waiting indefinitely, won't we?
lokesh-krishna
on 20 Dec 2016
@varlesh спасибо за работу :-)
Can you also make it in 72 and 144 sizes?
di72nn
on 20 Dec 2016
I find it already clear that the second icon seems to win. :-)
tcitworld
on 20 Dec 2016
@tcitworld Could you also look at #157 before merging this icon? Setting the primary color as #2780e3 with a complementary status bar color would make the app more consistent, wouldn't it? I think the teal used for the toggles too could be colored with the new primary for greater consistency.
lokesh-krishna
on 20 Dec 2016
Yeah, it should be done at the same time.
tcitworld
on 20 Dec 2016
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
on 20 Dec 2016
You can modify color what you want:
sed -i 's/#82b4ef/YOUR_COLOR/g' *.svg
sed -i 's/#2780e3/YOUR_COLOR/g' *.svg
@varlesh Once again, thank you so much for everything.
I was talking about the color scheme that the app would need though, not the icon. The icon is perfect :)
@di72nn Can't a SVG be scaled to any size we desire?
lokesh-krishna
on 20 Dec 2016
@Strubbl @di72nn Could one of you take a look at #392 so that this icon can finally make its way to the app?
lokesh-krishna
on 28 Dec 2016
I do not get what the PR #392 is for. And i like the black&white icon. Sorry, i am out
Strubbl
on 28 Dec 2016
Well, @tcitworld agreed that the color scheme would have to be updated to reflect the new icon and this should also be done at the same time so that the icon and the app aren't incongruous.
That's what #392 is about. What I did was edit the theme using the Theme Editor on Android Studio and make a pull request and it turns out that this file is what reflects the change. Is it not the right way to update the color scheme of the app?
lokesh-krishna
on 28 Dec 2016
Thanks @Lokesh-Krishna for clarifying
Strubbl
on 28 Dec 2016
@Lokesh-Krishna
Can't a SVG be scaled to any size we desire?
I don't know whether scaling affects pixel alignment. There's probably a reason why it's not just uploaded in 512 only.
di72nn
on 28 Dec 2016
@di72nn You're absolutely right. Turns out that using a single size results in blurring because of the pixel alignment.
@varlesh Could you please provide the icons at 72px and 144px as well?
lokesh-krishna
on 29 Dec 2016
varlesh
on 29 Dec 2016
So we have everything we need now? How would one go about making a pull request for this?
lokesh-krishna
on 29 Dec 2016
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.
di72nn
on 29 Dec 2016
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
on 30 Dec 2016
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?
lokesh-krishna
on 19 Feb 2017
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.
di72nn
on 20 Feb 2017
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
on 20 Feb 2017
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?
lokesh-krishna
on 1 Mar 2017
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.
di72nn
on 2 Mar 2017
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.
tcitworld
on 2 Mar 2017
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.
lokesh-krishna
on 2 Mar 2017
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?
Strubbl
on 2 Mar 2017
@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".
nachtjasmin
on 2 Mar 2017
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.
lokesh-krishna
on 3 Mar 2017
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.
di72nn
on 3 Mar 2017
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.
lokesh-krishna
on 13 Mar 2017
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?
di72nn
on 30 Mar 2017
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
on 30 Mar 2017
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?
lokesh-krishna
on 23 Apr 2017
Can we wait to hear from him before tweaking this icon?
I'm fine with waiting.
Thanks for putting efforts into it.
di72nn
on 23 Apr 2017
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
themichaelcook
on 26 Jun 2017
I think here should do. The "W" mockups look really good!
lokesh-krishna
on 27 Jun 2017
https://adapticon.tooo.io/#/bg=http://i.imgur.com/ViltHR6.png/fg=http://i.imgur.com/1JkVaVE.png
themichaelcook
on 27 Jun 2017
Love it!
@di72nn @tcitworld What do you think?
lokesh-krishna
on 27 Jun 2017
Really nice. Thanks for your work. :+1:
tcitworld
on 27 Jun 2017
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).
lokesh-krishna
on 27 Jun 2017
Nice icon. Thank you.
I like the square one too.
di72nn
on 27 Jun 2017
Here's what the family of variations would look like. The smallest one being the notification icon, if that is needed.
themichaelcook
on 27 Jun 2017
Is it just me or that curved line (that divides lower and upper parts) has problems with aliasing?
di72nn
on 27 Jun 2017
Ya, curved single pixel lines can do that. I'll see what I can do by adjusting the width slight amounts.
themichaelcook
on 27 Jun 2017
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.
themichaelcook
on 27 Jun 2017
If someone could please give an authoritative go-ahead, the design could be finalised and we could start working on switching to this icon.
lokesh-krishna
on 29 Jun 2017
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
Strubbl
on 29 Jun 2017
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.
themichaelcook
on 30 Jun 2017
@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
on 30 Jun 2017
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?
Strubbl
on 30 Jun 2017
@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.
di72nn
on 30 Jun 2017
@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...
lokesh-krishna
on 1 Jul 2017
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
Strubbl
on 1 Jul 2017
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.
lokesh-krishna
on 1 Jul 2017
I'll update the icon when we get SVG's.
di72nn
on 1 Jul 2017
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?
lokesh-krishna
on 1 Jul 2017
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.
di72nn
on 1 Jul 2017
@themichaelcook can you please provide the logo as SVG file?
Strubbl
on 4 Jul 2017
Hey! Sorry about the long wait, not sure why my notifications aren't working.
themichaelcook
on 31 Jul 2017
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.
themichaelcook
on 31 Jul 2017
Thanks a lot, I have a small preference for option two.
Is there a way to tip you for the work you've done ?
tcitworld
on 31 Jul 2017
Sure, I'm set up for Paypal at [email protected] <3
themichaelcook
on 31 Jul 2017
There's also this article for implementing Adaptive Icons
https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e
themichaelcook
on 31 Jul 2017
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.
di72nn
on 6 Aug 2017
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.
themichaelcook
on 10 Aug 2017
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?
lokesh-krishna
on 16 Aug 2017
@themichaelcook first of all, I'd like to thank you for your contribution.
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.
Well, IMO, none of this is really important for a project like the wallabag app (versioning can be done with git; and there's no one to use everything else). What important is that the project don't get stuck with an icon we can't edit when needed (again, see the current one). Figma can suddenly disappear, change license agreement, or make PNG export a paid feature (let alone the fact that people may not want to create "a free account" to work with it).
So I see Figma as an unwanted and mostly unneeded dependency.
I may be too cautious about it, but somebody should be.
Sorry, I don't have time to compare icons and suggest anything at the moment.
di72nn
on 16 Aug 2017
@nicosomb @tcitworld @Strubbl Opinions?
lokesh-krishna
on 16 Aug 2017
I wasn't aware of the importance of compatibility with those tools for this project, but it makes sense. I'm trying to think if I know of any android icon designers that work in GIMP/Inkscape that could recreate the icon for you. Basically everyone is working in Sketch or Illustrator, both will also not export a Material Design icon that could be imported into another tool because of the advanced effects needed. I'll let you know if I come up with any designer to recommend.
I'm away next week but If we haven't found anyone to help by the time I get back I'll install Inkscape and see if I can recreate the icon in there.
Did the flat versions of the icons I sent import ok?
themichaelcook
on 16 Aug 2017
@di72nn The flat icons import without any issues in Inkscape and I was also able to generate PNGs which had no artifacts. Could you or anybody else confirm the same? I am willing to update the PR with these icons if everyone is okay with it.
lokesh-krishna
on 6 Sep 2017
Sorry for the delayed reply.
I tried the flat icon yesterday, but had some issues with aliasing (at least in medium resolution icon): either I'm doing something wrong or the pixel alignment is a big deal. I'll give it another try later.
di72nn
on 11 Sep 2017
Sorry about bumping this but any updates @di72nn?
lokesh-krishna
on 27 Sep 2017
Sorry, I don't particularly like the flat icon and I don't have much time these days.
di72nn
on 8 Oct 2017
@tcitworld @Strubbl @nicosomb Could you please share your opinion on this matter?
I think the flat icons don't look as good as the other one but they are available in an open and editable format. I too now appreciate the importance of that and the long shadow variant does look significantly better than the present icon and is definitely an upgrade.
I personally feel like going ahead with the long shadow variant would be a good choice. What do y'all think?
Here are the variants for reference:
- Flat
- Flat Long Shadow (My choice)
- Flat Single Color
lokesh-krishna
on 19 Oct 2017
I'm not very fan of the shadow on the second one, I prefer the 1st one.
nicosomb
on 19 Oct 2017
I'm for the second one as well.
tcitworld
on 19 Oct 2017
@nicosomb The shadow is something that's recommended by the Material Design guidelines.
If y'all can give the go ahead then I would like to submit a PR.
lokesh-krishna
on 19 Oct 2017
OK for the 2nd one so.
nicosomb
on 19 Oct 2017
Related issues
infinitejones
·
6Comments
BNolet
·
7Comments
msebald
·
8Comments
tcitworld
·
7Comments
ngosang
·
9Comments
Most helpful comment
Here's what the family of variations would look like. The smallest one being the notification icon, if that is needed.