Apps-android-commons: Add light theme

[tobias47n9e]

As mentioned by @veyndan in https://github.com/commons-app/apps-android-commons/issues/420 the app would benefit from having a light theme for daytime photo trips.

I think that we should keep the dark theme too, for indoor and night time conditions. A switch close to the top level of the UI would be ideal. An example of such a switch is for example in the Twitter app:

[misaochan]

Agreed, would be nice.

[neslihanturan]

I can work on this:)

[misaochan]

Nice, thanks @neslihanturan ! :)

[neslihanturan]

Currently, it is switching between themes but there is some hardcoded colors which need to be change. To achieve this completely, it is better to remove hardcoded colour codes on xml files. I try to make it convenient with current naming style. Besides, do you have a strict naming strategy to follow?
Additionally, I need to make up some new colours for light theme. Should we discuss them in a separate thread? If not, I can just set some colours for light theme and change later if you don't like. This option would be much faster.
See the attachment, setting activity looks quite okay but contributions screen looks really bad because there is hardcoded colours that need to be changed:)

[misaochan]

I'm good with removing hardcoded colour codes, and certainly, by all means choose your own colours. A screenshot after you are done would be good for feedback, but I'm sure it will be fine. :)

We don't have a strict naming strategy, but others might want to weigh in on whether or not we want to establish one in the near future.

[domdomegg]

Also looks like it would probably be a good idea to tie in with #380, (you can keep working on light theme, just leave the icons for now (or if you could do both in one that would be great)).

[neslihanturan]

Yes, I left the icons, waiting for material icons:) Currently @maskaravivek should be working on this issue, if he is busy I can do it too. The toggle theme is done but there is a small problem: the toggle button on overlay menu appears on the left which looks wrong to me. I am trying to make it on the right side as in Twitter app above. I tried several regular things (and some experimental ones:)) but none of them worked, the button insists to stay on left. Here some screens:

[maskaravivek]

@neslihanturan Yes i am doing the icons. The PR should be up by tomorrow. Great work with the themes (Y)

[misaochan]

@neslihanturan nice work! Have you tried asking on StackOverflow about the toggle? I've found them very useful for cases like this (where you have already tried a few methods that aren't working). You might also want to post snippets of the code that you tried.

[maskaravivek]

Are we sure that we want the theme switch toggle in the main menu. Should it not belong to the Settings page?

[nicolas-raoul]

I see it being used more often than other settings. Use cases:

• People who never switch
• People who switch for stylistic reasons, once and probably never again
• People who switch twice per day (day, night)
• People who switch many times per day, for instance indoor/outdoor

On Wed, Mar 15, 2017 at 4:33 PM, Vivek Maskara [e-mail]
wrote:

Are we sure that we want the theme switch toggle in the main menu. Should
it not belong to the Settings page?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/commons-app/apps-android-commons/issues/428#issuecomment-286663034,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGFBqPThxt8cjtZ9vurfwr0a1Fpc8o_ks5rl5Q-gaJpZM4Mafjy
.

[misaochan]

I would vote for it being in the main menu - like Nicolas says, it would likely be changed more often than other settings.

[neslihanturan]

I didn't ask it to stackoverflow because it would be duplicate (or even quad-licate:)) but none of the answers worked in our app. I will re-try the answers again today (in case I made a mistake ). If it fails, I will ask.
I am waiting for your PR @maskaravivek then I can arrange them for the icons too.
I also think being in the main menu is better (Settings page would be easier though:)).

[domdomegg]

Could you push what you've currently got to Github so maybe we could suggest a solution?

[neslihanturan]

This would be great. Here my commits: https://github.com/neslihanturan/apps-android-commons/commits/addThemeToggle and I included what did I try after these stackoverflow posts:
http://stackoverflow.com/questions/11368260/menu-resource-item-position-title-to-left-of-icon
http://stackoverflow.com/questions/19562344/can-we-have-an-icon-on-right-side-of-text-in-menu-item-in-android
http://stackoverflow.com/questions/26756826/how-to-display-the-icon-of-the-right-side-of-the-text-in-an-menuitem-in-android
http://stackoverflow.com/questions/29076437/android-menuitem-in-actionbar-with-icon-and-text-how-to-align-icon-to-right

[maskaravivek]

@neslihanturan My PR for #380 is up for review as #436.

[neslihanturan]

@maskaravivek Thanks for great job:) I added black icons too for light theme. The app looks quite cool now. Our only problem is still toggle button being on the left side. I am preparing stackoverflow post now, I will pull request when it is solved.
Here is the code: https://github.com/neslihanturan/apps-android-commons/tree/addThemeToggle
And here are screens:

And upload screen has always DarkTheme, otherwise texts are not very readable on semitransparent filtered images. So it looks as:

[domdomegg]

Tiny niggle: could the license selector dropdown arrow in the upload screen be white as well - probably a good idea to do this on main theme as well actually.

EDIT - fixed in https://github.com/neslihanturan/apps-android-commons/pull/2

[domdomegg]

Thoughts about these proposed color changes? (https://github.com/neslihanturan/apps-android-commons/pull/1)

Main background: #ffffff
Action bar: #0c609c
Satus bar: #08436d
Action bar text and icons: #ffffff
Fragment categorisation background: #AA000000 (same as dark)

Screenshots:

[domdomegg]

Actually I think a white background for MediaDetailFragment could look good, will check it out later.

[domdomegg]

Fixed dropdown bug in https://github.com/neslihanturan/apps-android-commons/pull/2

[domdomegg]

Thoughts on white background? I think it looks particularly good for transparent images (especially diagrams - see #102)

[domdomegg]

(Last comment for today, I promise)

That toggle icon has defeated me - don't think it's possible to have it on the right without rewriting the entire menu class. Might be a good time to think about switching to a navigation drawer anyways, would make the app feel more modern (also some discussion on this in: #251, #324, https://github.com/misaochan/apps-android-commons/tree/nav-drawer-hamburger, #420). If doing that getting the baseline grid sorted too would be great - @veyndan also recommended this in #420.

If anyone knows much about design perhaps you could create a few mockups - I was thinking a potential overhaul of fragment_media_detail to be more - material-ly?

[misaochan]

@domdomegg I'm pretty hopeless at design, but the screenshots that you posted look good to me. :)

I agree, if the toggle icon in the Action Bar is proving to be difficult to fix, we should work around it. There are two options, in my opinion: (1) Implement the nav drawer and place it there, or (2) if the nav drawer is proving to be difficult as well, as a last ditch resort just put it in Settings first so we can release the work you guys have already done while we work on that.

[maskaravivek]

I agree with @domdomegg. Lets get this merged soon so that we meet our one week target for starting the publicity with the new designs. :)

[neslihanturan]

It looks like I am at cross time hours with most of you:) Thanks @domdomegg for the fixes. So firstly I choose option 1 and start to work on nav drawer.

[veyndan]

My 2 cents on the hamburger icon is not to do it, based on user studies. It feels extremely unnecessary as there aren't many options to consider in the toolbar anyway. Also, instead of having a switch, could we not instead have a checkbox to toggle between night mode and day mode? IIRC checkboxes in a popup menu are fairly easy to implement.

[domdomegg]

@veyndan The article you linked talks about a hamburger menu on desktop websites, which I agree aren't sensible. However on Android it is well understood I think, although I was able to find no evidence either way in native apps.

It may be worth just moving the toggle into settings temporarily until we can get it resolved to push it out early, as @misaochan suggested.

I'll create another pull req to @neslihanturan's repo with the white background - was that ok with everyone?

[neslihanturan]

I am ok to move it settings temporarily and discuss permanent solution on other thread later. @domdomegg when you fix rhe white background, I can carry the toggle button to settings activity as simple checkbox.

[misaochan]

Sounds good to me. :)

[neslihanturan]

I am asking to make it sure, how should the process run:
1 - When user clicked to check box, the settings activity re-start with new theme.
2- When user clicked to check box, nothing has changed at current activity. When user switch to another activity, it can start with new theme.

[veyndan]

@domdomegg Oops, I must have linked the wrong article. The one that I was thinking of was one written by Luke Wroblewski who is a product director at Google. Here's the article I meant to link.

[veyndan]

@neslihanturan Personally I'd side with 1 as it is more obvious from a user perspective that tapping the checkbox actually did something as with option 2 the user may be confused and think that tapping the checkbox had no effect.

[misaochan]

@neslihanturan I'd go with 1, too.

[domdomegg]

Now #440 is merged, can we close this? If we are going to follow up on navigation drawer we could keep it in #251.

[misaochan]

Sure, sounds good to me.