Material Design

[ir-g]

If Octodroid/GH4A could have Material design implemented, that would be awesome, especially as the overall design style makes the usage of apps cleaner and easier.

[maniac103]

Check the material-theme branch ;)

[ARoiD]

@isaacrg Feedback is appreciated ;)

https://drone.io/github.com/slapperwan/gh4a/files/build/outputs/apk/gh4a-debug.apk

[nesl247]

Is there already a beta community for OctoDroid to test it with? If not, any chance you could set one up: https://support.google.com/googleplay/android-developer/answer/3131213?hl=en

Not a huge fan of installing random APKs, but would like to give feedback.

[maniac103]

@slapperwan Can you set up an alpha or beta build?

[slapperwan]

I'll do it next week once I'm back from outstation.

[ir-g]

@ARoiD Sorry about the delay, just tested the app and it looks great. I am not encountering any immediate problems, and the UI is much easier to use than the previous design. I look forward to seeing the app rolled out on Google Play

[LeoColomb]

@maniac103 Very very (very) good work, visually this is almost perfect, intuitive and well done. ❤️

I haven't the time to make pictures, so just some (untidy) notes:

1. The header would be great if red when looking at closed issues list.
2. The header would be really great if purple for merged pr fragment.
3. Make the details of a commit / an issue / a pr like a sub-header (i.e. no side margins, shadow level up)
4. Add floating buttons instead of current "Holo" buttons at top for:
   • The follow action (and ONLY for user).
   • Share or Open in browser action in issue/commit/...
5. Move self description (the home / about) to the left side bar like G+ app does. -> The home will be news feed.
6. Be careful of vertical alignment for comment number / label / ... in issues list, maybe prefer a horizontal listing for comment number / label / ...
7. Would be so great if actions (not comments) in all feeds are visually different (eg. see how GH does in the home feed for new repo or closed issue)

Extra ideas for the fun of imagination:

1. Add the notif (Implement GitHub Notifications #175) feed in a right side bar like G+ app does
2. Move repo description (with top info (issues/pr) and bottom links) in a right side bar to be more focused on the readme
3. Make the header for issues/pr/commit smaller on scrolling like GPlay does when list applications or like Trello app does on panel edition.

[maniac103]

@LeoColomb Thanks for the kind words and the good suggestions :) Let me answer them one by one:

• I'm not sure about whether item 1 is 'too much' visually and gets distracted when switching pages back and forth (and currently used green is the app branding color, not the state color). It's certainly doable, though.
• Item 2 makes sense, I'll do that.
• I don't understand item 3, can you explain that a little bit more?
• For item 4 (FABs), I'm not sure whether those actions are important enough to warrant a FAB. As per the spec, FABs should represent the 'primary action' of a given screen, and I'm not sure starring and sharing are important enough actions?
• For item 5, please explain more. The G+ app doesn't have a navigation drawer, so I'm not sure what you're referring to - do you mean creating a separate page for the own profile ('My profile'/'My issues'/'My pull requests')? I actually use the list of my own repos and orgs quite often as 'jump start', so that wouldn't really match my personal workflow :-/ I was thinking of making the start page configurable though.
• Do you have any specific (potential) issue in mind for item 6?
• Item 7 makes sense, but warrants its own issue report, as it's both unrelated to the restyling and a little bit more involved.
• Item 8 sounds nice to me as well, but requires Implement GitHub Notifications #175 to be implemented first :)
• I need to think about item 9. I'm not a fan of 'drawerizing' too much, and I'm not sure the readme should be the only item shown in the repo about page. Will think about it.
• Item 10 is about the only 'blocker' type of item I see for the material-theme to be merged back (if there is any). I tried starting to implement this a number of times now, but it's pretty difficult to get right without throwing a lot of time at it, partly because of the structure of the app (mainly the interaction with the view pager and pull-to-refresh). I tried using the implementation found in Lollipop's Dialer app, but that uses new API 21 features (nested scrolling), so this doesn't work on Kitkat or lower. Are you aware of any open source app that does it? ;)

[LeoColomb]

@maniac103 Thanks for your answer!

1. I see. That said, currently when going to or coming back from a closed issue, the transition is more distracted with green/red 😄
   See also https://github.com/jpardogo/PagerSlidingTabStrip

2. Cool!

3. I will illustrate later.

4. Well I'm talking about small ones (not really floating, it's true...), likes this one: (same image twice to get a normal size)

5. You're right, it's GPlay app. See: https://github.com/neokree/MaterialNavigationDrawer

6. Yep! Text aligned on the right but icons not well aligned. See:

7. Right.

8. Yep! 😃

9. Hmm, well, yes and no.

10. Yep! https://github.com/ksoichiro/Android-ObservableScrollView

See other libraries on https://github.com/wasabeef/awesome-android-ui

[LeoColomb]

Also a good point for 5. (and for the future 😉) is to have the perfect interface to switch account/profile (and then #150).

[maniac103]

Ok, you've convinced me to do 1, 2 and 5 :) 10 obviously also is on the todo list (thanks for that project link!), I'm just not sure when I'll find the time to do all of those.
For 6, do you mean the alignment of items with milestone vs. those without? That indeed is a tricky problem, but I think arranging those horizontally will become too wide, and adding yet another line may make the view too tall?

[maniac103]

@LeoColomb I just tried implementing 1, but I'm not sure about it because of the color of the right hand drawer, it didn't really fit the red part. I can probably also color the drawer header to be red, but definitely can't color the highlight color of the radio buttons. Do you have any thoughts on that?

[maniac103]

And for item 5, I'm thinking of moving 'Your actions' as 'My activity' into the navigation drawer next to 'My issues', putting 'About' as 'My profile' under the user avatar and keeping only the news feed, which removes the need for tabs in the start view. Thoughts?

[LeoColomb]

Thoughts?

LGTM

[LeoColomb]

The best you can do with 5. is to make available this "drawer" everywhere (as GPlay does).

[maniac103]

Yes, the drawer needs to be in every activity accessible from it.
I also checked Gitskarios, and while I don't like most layout decisions of it, I like its user profile layout; I think I'll convert the 'header' to something like that.
I think I'll defer all that larger stuff to layer though. My current plan is doing the coloring thing (item 1) and then do a release as the current state of things is already by far better than 3.7.

[LeoColomb]

Hi!
After some time, some other notes.

Bugs

• There is a crash when opening repo page with no account setting up.
• The default theme is set as "dark", but it's not! :)
• There is a "follow" button for organisation but it should not be.

GitHub Style

• You may prefer using directly GitHub icons instead of creating a custom one for each new action: https://github.com/github/octicons/
• You may prefer using a better and GH closer style for MD rendering: https://github.com/sindresorhus/github-markdown-css

Material Style

• Page entrance/transition is currently absolutely not the material one. http://www.google.com/design/spec/patterns/navigational-transitions.html#navigational-transitions-parent-to-child
• A Holo loading bar is still here, appearing when loading something, instead of continuing the spin of the material loading icon.
  http://www.google.com/design/spec/patterns/swipe-to-refresh.html#swipe-to-refresh-swipe-to-refresh
• You may use the material coloring function with the image when visiting a user profile to color the header. http://www.google.com/design/spec/style/imagery.html#imagery-ui-integration

What do you think about this? 😃

[maniac103]

I'll check the bugs; I noticed the dark theme one myself. Why shouldn't one be able to follow organizations though?

I'll also look at the markdown rendering at some point, but I prefer not to use their icons for style consistency reasons. Right now, all icons are either taken from Google's material design icons or derived from that; the Github icons don't look like they match in style.

I know that transitions between activities aren't material like yet (e.g. using circular reveal), but that's simply because I didn't put any work in this due to the lack of time (which unfortunately won't change anytime soon). The same applies to the user profile view, which shouldn't only get palette colors, but a complete redesign.
Why do you think the loading bar is 'Holo'? Holo style was to use a large spinning wheel in the center of the screen. The current behaviour is like that to keep the loading view consistent between first entering the screen and pull-to-refresh. I understand that one could see this one differently, though.

[LeoColomb]

Why shouldn't one be able to follow organizations though?

It's not possible on GitHub.

but a complete redesign.

You're right.

[ocdtrekkie]

Looks like I'll need to fork my own personal copy of this app if this is coming. :/

[maniac103]

Feel free to do so. At least doing that would be more constructive than your comment.

[ocdtrekkie]

Just very painful to see when the Holo styling was the particular reason I recently installed the app. Change for the sake of change at its finest.

[jawshooah]

Or for the sake of keeping up with Google's own style recommendations. If
you prefer the Holo theme, nobody is forcing you to upgrade.

On Fri, Feb 20, 2015, 1:31 PM Jacob Weisz notifications@github.com wrote:

Just very painful to see when the Holo styling was the particular reason I
recently installed the app. Change for the sake of change at its finest.

—
Reply to this email directly or view it on GitHub
#227 (comment).

[ocdtrekkie]

Google's recommendations are the change for the sake of change. Given the huge usability hit, smart developers should ignore them.

[jawshooah]

What usability hit? I'm genuinely interested, as I don't have any gripes with material design.

Besides, if you explain in more detail why this transition would be bad for UX, the maintainers might be more inclined to listen 😉

[ocdtrekkie]

Sure @jawshooah

One of the biggest usability issues is documented here: https://shkspr.mobi/blog/2014/12/do-all-google-employees-have-perfect-eyesight/ under the Compare and Contrast section: Material screens tend to be really hard to read.

But I wanted to give you specific answers, so I went ahead and built the material branch on my computer, and here's what I'm noticing:

About ten percent of my screen has been eaten by a new green bar compared to the old version which adds little to no value to the app. It says the app's name, which I know, and has the menu button that I'll address more next, but is largely just a waste of screen space. A ton of empty space, in an awful puke green. Note the "News Feed" and "Your Actions" text is awful to read, see the above link. (Slight upside, Dark theme, which wasn't default on load, is slightly less awful on colors.)

Options formerly conveniently available at the bottom of my screen, including the menu, have been moved to the top corner, inconveniently far from where I hold the phone. The bottom action bar was one of the smartest things Google ever did, and removing it their worst. It's one of the features of Octodroid that makes it an appealing app right now, and the only justification for removing it is "well, Google said to". If you ever use your phone with one hand, you'll notice that options on the bottom of the screen are vastly more comfortable to get to with your thumb.

The about screen fits about two less repositories on the screen, and the news feed fits about one less activity item. Refresh loses it's clear functional button for a "it's there if you happen to know the app does it" pull to refresh.

On a pull request, all of the various information in the green area is floating in space. It seems to have little to no hierarchical relevance, as without the usual separators of Holo, the information bleeds together. Rather than the "OPEN" flag being a clear denotation of status, it's lack of differentiation from the rest of the green area makes it easy to miss, and actually just really odd looking. Separation between the Description and Events areas of the page is poor, as the headings are gone. The files change list goes from fitting nine filenames on this PR request on the screen down to four, giving a poor overview of the number of files changed.

[nesl247]

The bottom action bar was horrible and a pain to use. I absolutely hate the current design of the application because it is so much harder to use. Remember, a lot of us have larger phones. I rarely rest my hands on my phone where I could easily hit anything on the bottom. The new Material design method of swiping in from the left makes life a LOT easier.

[ocdtrekkie]

@nesl247 The larger the phone, the more key it is to have those options at the bottom. If you're using one hand, the top third of the phone is nearly unreachable!

[nesl247]

Having the options at the bottom requires me to move my hand. Having the options by swiping in from the left requires movement of a finger. There is a huge difference in usability.

[nesl247]

I guess I should clarify that based off the mockups above, the menu options aren't placed in a nice and easy location because they are using the 3 dots dropdown options instead of the swipe in style that most Google apps use.

[ocdtrekkie]

I'm specifically speaking of moving the options from the bottom, where it's
near the natural holding position of the phone, to the far top left corner.
;)

Swiping is a nice added functionality for some, I agree, although it's
often non-ideal for new users who have no way of knowing the behavior
exists in the app, or what swiping will do for them.

-Jake Weisz

On Fri, Feb 20, 2015 at 2:35 PM, Harrison Heck notifications@github.com
wrote:

I guess I should clarify that based off the mockups above, the menu
options aren't placed in a nice and easy location because they are using
the 3 dots dropdown options instead of the swipe in style that most Google
apps use.

—
Reply to this email directly or view it on GitHub
#227 (comment).

[CharString]

I hope this is the right place to vent my noob experience with the 3.8 version I installed from F-Droid on my non-lollipop device. (It really looks "materialistic" to me.)

Maybe I need te get accustomed to the design language, but as a new user, it really didn't occur to me that I can press the issue count on the main repo screen to get to the issues.
At least to me, it could use some more affordance, or perhaps an alternative route to the issues. IMHO logging issues should be the lowest barrier way to contribute to a project.

I'd like to mention that it's already so much better than the official client!

[maniac103]

Thanks :) The presentation of the issues/pulls/etc. table was taken straight from the old version. I haven't yet had a good idea to make the clickability more obvious; if you do, please let me know.

[iNoles]

I would like to see Notification moved to different activity with two tabs such as "Unread" and "All." If any developers watch some repos, she or he would have to scroll down a lot

[LeoColomb]

@iNoles Did you mean #175?

[iNoles]

@LeoColomb close, but I would like it to be in Another Activity with tabs.

[maniac103]

Finally implemented contraction of the app bar on scroll. Closing this one, additional suggestions should be made in separate (not as broad) reports.