Rework the app bar

[grzesiek2010]

Closes #6135

Why is this the best possible solution? Were any other approaches considered?

We agreed that we should start using the Material 3 app bar. We might need to adjust colors later on but for now it should be enough. Before we used different app bars in different places now it's one app bar layout used everywhere so it should look and behave in the same way.

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

We need to test the app bars across the entire app to ensure they are consistent and visually appealing. Nearly every screen, except for map views, includes an app bar. Please also remember to test full-screen dialogs that contain app bars, including:

• Select one with the minimal appearance
• User identity dialog
• Reason for changes dialog
• Offline layers importer dialog, among others

It’s important to test scrolling on each of these screens. If the screen isn’t long enough to scroll, you can:

• Test in landscape mode
• If it’s a form view, add more questions or choices to extend the form
• Increase the font size to make UI elements occupy more space

Do whatever is necessary to ensure the screen is scrollable.

There’s a risk that some of the screens with app bars may not look the same as before. I had to rework their layouts, so it’s possible that I made a mistake somewhere please be careful.

There's one issue that concerns me. I had to remove this line: https://github.com/getodk/collect/pull/6320/files#diff-345fc063e7a817a7c0a68f814d7caf8ddafa8709c69474945fad7ba9f00a33b3L84 to enable the app bar to change color while scrolling. It appears that the line was redundant, which I attempted to verify using this form:
select_one_fieldlist.xlsx.
In general, this relates to scrolling through a list of choices. The list should contain no more than 40 elements and ideally, there should be some other questions below. Please ensure that scrolling through such lists works as it did before.

Do we need any specific form for testing your changes? If so, please attach one.

To test User identity and Reason for changes dialog I used:
audit.xlsx

Does this change require updates to documentation? If so, please file an issue here and include the link below.

No.

Before submitting this PR, please make sure you have:

• added or modified tests for any new or changed behavior
• run ./gradlew connectedAndroidTest (or ./gradlew testLab) and confirmed all checks still pass
• added a comment above any new strings describing it for translators
• added any new strings with date formatting to DateFormatsTest
• verified that any code or assets from external sources are properly credited in comments and/or in the about file.
• verified that any new UI elements use theme colors. UI Components Style guidelines

[grzesiek2010]

@alyblenkin I've reworked the app bar in the main menu so that the behavior is consistent with https://m3.material.io/components/top-app-bar/guidelines#9410573d-05c7-473e-8810-5deea97b9b64
Could you give it a try and let me know if you like it before I start refactoring other screens? The main menu is not very long so you will need to use it in the landscape mode to be able to scroll it and see how the color of the app bar changes.

[alyblenkin]

Could you give it a try and let me know if you like it before I start refactoring other screens?

It will take some getting used to, but I think this will be easier for us to maintain if it's consistent with M3 styling. Part of me is thinking maybe we always display the tonal colour (not just when you scroll), but it's hard to say without seeing it applied throughout the app. It might be easier to make that call once we apply it to another screen, like selecting a new form.

[grzesiek2010]

@alyblenkin ok the list of blank forms is reworked as well so you can test it.

[alyblenkin]

Great, thank you! I'm liking it more today. I think we should go ahead and refactor the other screens.

I noticed it looks a little strange with our grey banner for forms that are ready to send. I think we will want to make the banner background white, so that entire section if fixed when you scroll.

[grzesiek2010]

@alyblenkin now the whole app is reworked. If you want to take another look now it's a good time.

[alyblenkin]

It will still take some getting used to, but it looks good. I think one thing we will want to change is the ready to send page. I think we should remove the grey banner because it looks strange without the app bar elevation. Do you want to do that as part of this work or as a new issue?

[grzesiek2010]

Do you want to do that as part of this work or as a new issue?

Please file a separate issue.

[alyblenkin]

I was chatting with Hélène earlier and she spotted that the status bar doesn't change when you scroll, so we get this zebra stripe happening. Could we make it the same new colour?

[grzesiek2010]

Could we make it the same new colour?

Yes the M3 doc says the easiest way is to enable displaying content edge-to-edge: https://github.com/material-components/material-components-android/blob/master/docs/components/TopAppBar.md#status-bar-and-edge-to-edge
This is something that will be enabled by default in the future either way:

Once you target SDK 35 or higher on a device running Android 15 or higher, your app is displayed edge-to-edge.

@alyblenkin do you think that's what we should do here? cc @seadowg

[seadowg]

@alyblenkin do you think that's what we should do here? cc @seadowg

This is already part of #6146, but I think it's worth seeing if it's a quick change and then incorporating here if so. If not, we can live with the in between stage for now.

[grzesiek2010]

I think it's worth seeing if it's a quick change

It's not big but kind of annoying as we would need to enable it in every activity: https://developer.android.com/develop/ui/views/layout/edge-to-edge#enable-edge-to-edge-display.

It might also require some additional changes https://developer.android.com/develop/ui/views/layout/edge-to-edge#handle-overlaps

I think it would be better to have it in a separate pull request.

[seadowg]

I think it would be better to have it in a separate pull request.

Agreed! It's indeed a really annoying change.

[dbemke]

If I tap the search icon in "Start new form" there is some space between the search field and the progress bar. I think it's not the gap that was in the previous version - it just look like it when the search field is there. Just wanted to check if it's ok?

XRecorder_26082024_080552.mp4

[dbemke]

Is this app bar change expected (no line)?
(screenshot previous vs new)

[grzesiek2010]

If I tap the search icon in "Start new form" there is some space between the search field and the progress bar. I think it's not the gap that was in the previous version - it just look like it when the search field is there. Just wanted to check if it's ok?

I guess it's because the search field does not take the whole space vertically and the empty space below is still a part of the app bar but I will check that.

Is this app bar change expected (no line)?

Yes this is how app bars should look like in M3 https://m3.material.io/components/top-app-bar/guidelines#9410573d-05c7-473e-8810-5deea97b9b64
The only difference is that we don't change the color of the status bar which we have discussed above and it will be fixed in #6359

[dbemke]

I'm not sure also about this one. When I try to scroll down when an audio is being played/recorded, the app bar flashes. I guess it as if the screen was "refreshed" very quickly. Should I file an issue and investigate this a bit more or it's ok?

XRecorder_26082024_125935.mp4

[grzesiek2010]

Should I file an issue and investigate this a bit more or it's ok?

It shouldn't be like that so yes you can file an issue.

[dbemke]

Tested with Success!

Verified on a device with Android 10

Verified Cases:

• issue Fix the gap below the app bar #6135 doesn't occur
• app bar across the app
• empty states
• progress bar after sorting the list of forms
• progress bar and search field
• dark and light mode
• landscape and portrait view
• scrolling in dialogs, settings, bottoms sheets, lists of forms and projects
• scrolling the hierarchy view

[WKobus]

Tested with Success!

Verified on a device with Android 14