GUI update

[cmmata]

This will be the base issue for all UI updates to redesign RunnerUp to match Material Design principles.

@gerhardol suggestions in jonasoreland#295: Material Design with App Bar (Action bar), side navigation and a floating + (one click click start) should be enough. The current tabs should be removed. The main tasks like Basic workout, Interval, feed, settings should be separate items in the side nav bar. Each individual History item should be one scrollable part, no separate tab (possibly bottom tab to jump).

RunnerUp will then look the same as most other "competitors". This is maybe not better in itself, but it is a standard interface that users are familiar with. Other tweaks to the structure should be done after the structure is changed. (Should you be allowed to check history etc while recording)

Steps:

• Decide what minimal version that should be supported in the new UI (older versions still have the old UI). Various workarounds are needed for devices older than Android 5.0
• Make all Androids Activities AppCompat. I have started this on a private branch, this is done on top of unmerged jonasoreland#524.
• Add App Bar and side nav bar. The app bar is in this step really just using space.
• Add current main activities to the side nav bar.
• Split the current "top" activity to separate activities so they can be added separately. (Use a fragment based UI.) (Remove tab interface for History).
• Targetting Android 5.0 and later

[gerhardol]

Any progress?

[cmmata]

Sorry, last week I was on vacation and today I just came back to work. I'm planning to share some design screenshots this week.

[eknoes]

Any updates?

[12people]

I made some mockups that bring the UI up-to-date to the material design guidelines: https://www.figma.com/file/SlPQaT56OztqaLmFZAeM0y/RunnerUp . They're only visual/layout changes and don't add, move, or remove any functionality—that should make it easier to implement and easier to adapt to for current users.

Not every screen is there yet.

Feel free to duplicate the mockup and work on it:

As for a side navbar—please don't add one. There are only 4 navigation options and Google's guidelines recommend bottom navigation for "Three to five top-level destinations of similar importance".

[12people]

I also added "V2" and "V3" screens to show how I think the UI might evolve—each version is more complex to implement than the one before, animations are posted as comments.