Skip to content
Snippets Groups Projects

New UI for main screens

This is the bulk of the UI designs outlined in #709 (closed). It is missing some key parts which I'll document below, but here is the things it does support:

  • Five tabs on the main screen with bottom navigation
    • Overview, aka "What's New?"
    • Categories
    • Swap (just an entry point to the existing swap activity)
    • My Apps (Updateable and Installed - have another branch with just "Updateable" as per the newer mockups)
    • Settings
  • Integrated with the new App Details screen recently merged into master
  • Searchable list of apps (viewable by either going to a category or via the main search button)

Each of these has screenshots below.

Code

The diff is huge, but I've rebased it so that if you review the first X commits then we can create a MR with those and it should build and work. I didn't think it was neccesary to send through 10 MRs for this though, so feel free to review as a whole, or review individual commits and request we merge bit by bit.

Missing features (in future MRs)

General UI stuff

  • Ensure accessible everywhere. I've gone through and made most places accessible. The only outsanding issues are now:
    • BottomNavigationView doesn't read out the title of items when selected. I created this issue in AOSP to address it. If that doesn't get addressed, then this repo contains the code in a way that would likely be easier to fork and patch.
    • TTS reader combines the app name and summary when reading app lists. It should pause inbetween reading both as if it is a different sentence.
    • Touching the background of the recycler view in the categories screen reads out all category names. Not sure if that is a good or bad thing.
    • Likely other problems too. It would be ideal to get some feedback from visually impaired users to find out whether we've done an alright job or not.
  • Ensure API 10 supported
    • Ensured no crashes due to API incompatibility.
    • There are some minor layout quirks, mainly around the absence of padding where there should be padding, and other minor things like that. This should all be resolved only once we have decided that the UI is final, because it requires copy-pasta-ing code from one layout to another.
  • Paddings/font-sizes/etc should be measured out more accurately as per the mockups in #709 (closed).
  • All inline styles should be moved to theme, so that people can contribute new themes relatively easily.
  • Drop shadow on the inline download buttons (on My Apps or the other app list screens)
    • Done in pserwylo/new-ui--inline-download-improvements branch.
  • Download button should probably be filled with white, because the other buttons with blue borders are.
    • Done in pserwylo/new-ui--inline-download-improvements branch.
  • Text under app in overview screen should be "Just added" not "Recently updated"
  • "Recently Updated" and "Just added" on overview tab should be grey not black.

General UI stuff (pending further design discussions)

Requires feedback from @crwinfrey and other interested parties before deciding what to do:

  • When there are no apps to update, My Apps could look nicer.
  • The "Installed" section should not just be empty if the repo hasn't been updated. The user will indeed have installed apps on their phone, just not any provided by a current repository in their F-Droid client)
  • When there are no apps to show in the overview, should show some sort of feedback.

The following are subject to feedback (of one form or another) from the latest round of user testing by @crwinfrey. They probably need to be revised/reconfirmed before implementing:

  • Overview page hasn't implemented the "Show four different apps in the prime position and let the user choose a different one via the dots under the app description" part of the UI.
  • Category icon should change to that proposed by Carrie (the happy/sad masks)
  • Number of updateable apps shown on the bottom navigation bar (in a red circle to the top right of the "My Apps" icon)

Categories screen

Shouldn't just choose the first X apps in alphabetical order each time.

  • Maybe the most recent or something?
  • We discussed maybe rating based on the quality of the metadata, to encourage people to get their metadata up to scratch, and to showcase apps which make the client look feature rich.
  • Otherwise a random selection would be fine, where the random selection could be seeded based on, e.g. the current day, or it could pick new apps each time the user navigates to that screen.

Misc

The following things are no longer accessible due to the loss of the menu in the main screen:

  • About dialog
    • Should this go in the settings screen now?
  • Update repos
    • In the mean time, I've added a functional pull-to-refresh which we can decide whether to keep or not later.
  • Bluetooth F-Droid to another phone

When no apps are available, show something on the main page.

Known bugs

Feature Image artwork sometimes renders blank after returning from elsewhere

Screenshots

Five tabs on the main screen with bottom navigation

main.whats-new main.categories.v2 main.swap main.my-apps.01 main.my-apps.02 main.settings

Integrated with the new App Details screen recently merged into master

app-details

Searchable list of apps (viewable by going to a category right now, but in the future also via the main search button)

app-list.category app-list.category.search app-list.search

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • added 8 commits

    • 824456d7 - Categories: Show list of all categories in the main view.
    • b539ff3a - App list: Show a list of apps matching a particular category.
    • b8b833e5 - App List: Category "chip" and free text searching of apps
    • 53c76b62 - Settings: Added preference fragment to the last tab in the main view.
    • a3ab3ed0 - Launch AppDetails2 instead of AppDetails in most places.
    • 909aa0c2 - Added funky artwork to feature image when not present
    • d97db151 - Until feature images are properly supported, use abstract art instead.
    • ce65c9aa - Tweak some button styles with those added in !419 (merged).

    Compare with previous version

  • While this is very much ready for CR and hopefully merging once the CR is completed and any feedback incorporated, I will continue adding to this and rebasing until:

    • There are comments that indicate someone is looking at it
    • Someone assigns themselves to it

    That way I can clean up some of the minor UI tweaks in the mean time without having to put them in a separate MR.

  • added 7 commits

    • 002dfbc4 - App List: Category "chip" and free text searching of apps
    • 796aa30a - Settings: Added preference fragment to the last tab in the main view.
    • 909bf8be - Launch AppDetails2 instead of AppDetails in most places.
    • 145867e0 - Added funky artwork to feature image when not present
    • ef39679a - Until feature images are properly supported, use abstract art instead.
    • ba07a7c3 - Tweak some button styles with those added in !419 (merged).
    • fd951934 - Added search floating action button to Overview and Categories screen.

    Compare with previous version

  • added 1 commit

    • ccd5e6d1 - Added search floating action button to Overview and Categories screen.

    Compare with previous version

  • added 14 commits

    • 5a27dfe8 - Enable vector drawables to be used throughout F-Droid
    • 00c956eb - Introduce new main activity, currently mostly empty.
    • 0afc9280 - Swap: Added splash screen to "Nearby" tab on main screen.
    • dfe82d5e - Whats New: Added list of recently updated apps to the main view.
    • 35d75654 - My Apps: Added the list of updateable/installed apps to the main view.
    • 102710ee - Categories: Show list of all categories in the main view.
    • 26e42e59 - App list: Show a list of apps matching a particular category.
    • 6f475c7d - App List: Category "chip" and free text searching of apps
    • ce735973 - Settings: Added preference fragment to the last tab in the main view.
    • 41d983ea - Launch AppDetails2 instead of AppDetails in most places.
    • abfeae06 - Added funky artwork to feature image when not present
    • f55cda4b - Until feature images are properly supported, use abstract art instead.
    • df1b252f - Tweak some button styles with those added in !419 (merged).
    • bb2a96f0 - Added search floating action button to Overview and Categories screen.

    Compare with previous version

  • added 1 commit

    • 6eeaf824 - Add swipe-down-to-refresh-repos on main overview screen.

    Compare with previous version

  • added 2 commits

    • 824409ec - Show search button on keyboard when searching.
    • 4576ad6e - Add swipe-down-to-refresh-repos on main overview screen.

    Compare with previous version

  • added 2 commits

    • a4f46ef1 - Show search button on keyboard when searching.
    • 10c907a0 - Add swipe-down-to-refresh-repos on main overview screen.

    Compare with previous version

  • added 11 commits

    • 10f4ca71 - Categories: Show list of all categories in the main view.
    • 0cbc27dd - App list: Show a list of apps matching a particular category.
    • d13f0086 - App List: Category "chip" and free text searching of apps
    • f1f76177 - Settings: Added preference fragment to the last tab in the main view.
    • 15fdb439 - Launch AppDetails2 instead of AppDetails in most places.
    • 2ea12c49 - Added funky artwork to feature image when not present
    • 799d1b9d - Until feature images are properly supported, use abstract art instead.
    • 49401d42 - Tweak some button styles with those added in !419 (merged).
    • 20148b50 - Added search floating action button to Overview and Categories screen.
    • 9e7dff44 - Show search button on keyboard when searching.
    • a72a7fc8 - Add swipe-down-to-refresh-repos on main overview screen.

    Compare with previous version

  • added 12 commits

    • ead73c98 - My Apps: Added the list of updateable/installed apps to the main view.
    • cdfa2fa9 - Categories: Show list of all categories in the main view.
    • 164ab13b - App list: Show a list of apps matching a particular category.
    • 3fe11f9f - App List: Category "chip" and free text searching of apps
    • 0217bba7 - Settings: Added preference fragment to the last tab in the main view.
    • 376e911b - Launch AppDetails2 instead of AppDetails in most places.
    • 46178f6c - Added funky artwork to feature image when not present
    • f693313d - Until feature images are properly supported, use abstract art instead.
    • 20ea8f55 - Tweak some button styles with those added in !419 (merged).
    • a8d4ec88 - Added search floating action button to Overview and Categories screen.
    • 62969b34 - Show search button on keyboard when searching.
    • d81f08a6 - Add swipe-down-to-refresh-repos on main overview screen.

    Compare with previous version

  • username-removed-25042 marked the task Drop shadow on the "Update All" button in "My Apps" as completed

    marked the task Drop shadow on the "Update All" button in "My Apps" as completed

  • username-removed-25042 marked the task Drop shadow on the "Update All" button in "My Apps" as incomplete

    marked the task Drop shadow on the "Update All" button in "My Apps" as incomplete

  • added 1 commit

    • 5a355deb - Reference MainActivity instead of FDroid where appropriate.

    Compare with previous version

  • added 11 commits

    • cc35d65f - Added funky artwork to feature image when not present
    • efdf36f0 - Until feature images are properly supported, use abstract art instead.
    • bd735da9 - Tweak some button styles with those added in !419 (merged).
    • aec598da - Added search floating action button to Overview and Categories screen.
    • 737dcfae - Show search button on keyboard when searching.
    • 67d81eea - Add swipe-down-to-refresh-repos on main overview screen.
    • 01ee999c - Reference MainActivity instead of FDroid where appropriate.
    • a019ea48 - Update repository on first run of F-Droid.
    • 62e6d668 - Added drawables for various states of downloading an app.
    • 17c853b1 - Initial work to support inline Download+Install button in app lists
    • 9d4edaf8 - TO BE AMENDED: Allow apps to be installed after download is completed.

    Compare with previous version

  • mentioned in issue #709 (closed)

  • added 15 commits

    • 0d6511d2 - App List: Category "chip" and free text searching of apps
    • 9b202cad - Settings: Added preference fragment to the last tab in the main view.
    • d1b9b281 - Launch AppDetails2 instead of AppDetails in most places.
    • aee4a75a - Added funky artwork to feature image when not present
    • 6b62593a - Animate feature image colour changing
    • fb9b19b8 - Until feature images are properly supported, use abstract art instead.
    • f777ad21 - Tweak some button styles with those added in !419 (merged).
    • 56045665 - Added search floating action button to Overview and Categories screen.
    • 0e5cf02d - Show search button on keyboard when searching.
    • 6c2908e4 - Add swipe-down-to-refresh-repos on main overview screen.
    • 829061e1 - Reference MainActivity instead of FDroid where appropriate.
    • fd33fd56 - Update repository on first run of F-Droid.
    • 2ff6d5e1 - Added drawables for various states of downloading an app.
    • 1850c3a8 - Initial work to support inline Download+Install button in app lists
    • 884b9471 - TO BE AMENDED: Allow apps to be installed after download is completed.

    Compare with previous version

  • added 34 commits

    • 7997024a - 1 commit from branch fdroid:master
    • ea87e6af - Added query for 'top X apps in category' and associated test
    • 3386d3c9 - Be more explicit about searching categories with free form text.
    • 60dc5ad5 - Make category searching case insensitive. Only works for ASCII :(
    • 36d9845d - Added preference to manage repositories
    • 34da87d0 - Change theme to not have an action bar.
    • 8097c4c6 - Toolbar instead of ActionBar in ManageReposActivity. Remove need for Fragment in manage repos.
    • f467cdf4 - Toolbar instead of ActionBar in RepoDetailsActivity.
    • 47b171cb - Make autoDownloadUpdatesUpdateService part of the public API of UpdateService.
    • f98ee7bd - Don't include apps which can be updated in the 'installed' list
    • b2110dc5 - Bumped support lib versions. Added dependencies for new UI.
    • c3cd29f4 - Enable vector drawables to be used throughout F-Droid
    • 39baad9b - Introduce new main activity, currently mostly empty.
    • 0c5e39e8 - Swap: Added splash screen to "Nearby" tab on main screen.
    • 67f1211d - Whats New: Added list of recently updated apps to the main view.
    • f032a83c - My Apps: Added the list of updateable/installed apps to the main view.
    • a1d68531 - Categories: Show list of all categories in the main view.
    • 8589954d - App list: Show a list of apps matching a particular category.
    • e4222bbd - App List: Category "chip" and free text searching of apps
    • 4167dc5b - Settings: Added preference fragment to the last tab in the main view.
    • 0c438abb - Launch AppDetails2 instead of AppDetails in most places.
    • a15b4b9e - Added funky artwork to feature image when not present
    • 3ed81627 - Animate feature image colour changing
    • 5048d0f2 - Until feature images are properly supported, use abstract art instead.
    • a7da3608 - Tweak some button styles with those added in !419 (merged).
    • ab81ab09 - Added search floating action button to Overview and Categories screen.
    • cd1f1094 - Show search button on keyboard when searching.
    • 08c85c03 - Add swipe-down-to-refresh-repos on main overview screen.
    • e7457716 - Reference MainActivity instead of FDroid where appropriate.
    • 4c64f8e3 - Update repository on first run of F-Droid.
    • 8f151d62 - Added drawables for various states of downloading an app.
    • c0daa2c9 - Initial work to support inline Download+Install button in app lists
    • 691f232a - More concise management of the main recycler view.
    • b12a5d4b - TO BE AMENDED: Allow apps to be installed after download is completed.

    Compare with previous version

  • added 31 commits

    • 730a3cc8 - Notify when new categories are available, old ones are no longer available.
    • 2e3789b4 - Added preference to manage repositories
    • f40b1f12 - Change theme to not have an action bar.
    • aaab61e5 - Toolbar instead of ActionBar in ManageReposActivity. Remove need for Fragment in manage repos.
    • 709a08e4 - Toolbar instead of ActionBar in RepoDetailsActivity.
    • 03e04056 - Make autoDownloadUpdatesUpdateService part of the public API of UpdateService.
    • d4becab2 - Don't include apps which can be updated in the 'installed' list
    • d2e50e44 - Bumped support lib versions. Added dependencies for new UI.
    • 11590f7e - Enable vector drawables to be used throughout F-Droid
    • 6591f433 - Introduce new main activity, currently mostly empty.
    • 9671cae5 - Swap: Added splash screen to "Nearby" tab on main screen.
    • 1337199e - Whats New: Added list of recently updated apps to the main view.
    • 93b70cc5 - My Apps: Added the list of updateable/installed apps to the main view.
    • dbdbf7db - Categories: Show list of all categories in the main view.
    • 4a44f93f - App list: Show a list of apps matching a particular category.
    • 693b62f3 - App List: Category "chip" and free text searching of apps
    • 48e44c1b - Settings: Added preference fragment to the last tab in the main view.
    • 139e2063 - Launch AppDetails2 instead of AppDetails in most places.
    • 29c8a2f7 - Added funky artwork to feature image when not present
    • 8bd2df54 - Animate feature image colour changing
    • 57dce267 - Until feature images are properly supported, use abstract art instead.
    • 61e76db3 - Tweak some button styles with those added in !419 (merged).
    • d1801a9a - Added search floating action button to Overview and Categories screen.
    • 5af97d88 - Show search button on keyboard when searching.
    • 7edf0eec - Add swipe-down-to-refresh-repos on main overview screen.
    • 74cf8bfc - Reference MainActivity instead of FDroid where appropriate.
    • 239127d9 - Update repository on first run of F-Droid.
    • 93c7c915 - Added drawables for various states of downloading an app.
    • 11b133cd - Initial work to support inline Download+Install button in app lists
    • 012e0ee2 - More concise management of the main recycler view.
    • d09d1a56 - TO BE AMENDED: Allow apps to be installed after download is completed.

    Compare with previous version

  • username-removed-25042 marked the task Categories view doesn't update after a repo update completes as completed

    marked the task Categories view doesn't update after a repo update completes as completed

  • added 19 commits

    • ddfdb37d - My Apps: Added the list of updateable/installed apps to the main view.
    • 3d639c74 - Categories: Show list of all categories in the main view.
    • d7cf13bf - App list: Show a list of apps matching a particular category.
    • a94f8ebc - App List: Category "chip" and free text searching of apps
    • a790d43f - Settings: Added preference fragment to the last tab in the main view.
    • 9810c744 - Launch AppDetails2 instead of AppDetails in most places.
    • 81222c0c - Added funky artwork to feature image when not present
    • fc2c1fe7 - Animate feature image colour changing
    • 6ef7bd9b - Until feature images are properly supported, use abstract art instead.
    • 37aaacee - Tweak some button styles with those added in !419 (merged).
    • 480bef09 - Added search floating action button to Overview and Categories screen.
    • 41af0141 - Show search button on keyboard when searching.
    • feef9ac1 - Add swipe-down-to-refresh-repos on main overview screen.
    • 24a92f22 - Reference MainActivity instead of FDroid where appropriate.
    • 6e12cebd - Update repository on first run of F-Droid.
    • 37143bb1 - Added drawables for various states of downloading an app.
    • f3cbd1de - Initial work to support inline Download+Install button in app lists
    • 77e15b2a - More concise management of the main recycler view.
    • bbcc4fcd - TO BE AMENDED: Allow apps to be installed after download is completed.

    Compare with previous version

  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
Please register or sign in to reply
Loading