You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR attempts to make the bottom navbar "adaptive" so when on larger screens it puts the navbar on the left side instead. While using my foldable I noticed we could be utilizing the space better.
Before
After
Unfortunately we are not using Jetpack Compose with the bottom navbar, so properly doing adaptive navigation is tricky. Especially since it's a custom view. So I utilized two different techniques to make it work.
First, I used the xml file qualifiers that automatically choose layouts for certain screen sizes. This allowed me to move the navigation view to the right spots.
Second, the BottomNavigationView and the NavigationRailView extend from the same parent. Meaning I was able to just reference the parent class. All the related components have similar inheritance structures.
The downside is main_activity.xml is duplicated in order to make the adaptive part work. But overall surprised it wasn't worse.
Additionally on the login screen I noticed weird spacing on the login button. So I fixed that.
Before
After
Lastly, while testing an actual tablet emulator I noticed that the login screen is actually centered and does not utilize the full screen space in landscape. The experience is pretty poor. So I fixed that too. Sorta.
Month
Savings
To Test:
Login
Test using a phone. Ensure the layout of the Login screen works.
Using a foldable ensure folded and unfolded the layout looks fine.
Using a tablet ensure the login screen layout looks fine.
Adaptive Navigation
馃毈 Smoke test a regular phone device. The navigation should work exactly as it did before.
Using a physical foldable or foldable emulator, test that the apps navigation changes based on whether you are folded vs no folded.
Using a physical tablet or emulator, ensure the navigation is adaptive. Depending on the screen size portrait could be the navigation rail or bottom nav. I would expect landscape to definitely be the navigation rail on the left side.
Smoke Testing
馃毈 Test the app and visit as many screens as you can think of. Make sure the theme looks fine.
Known Issues
Please note I realize that the tablet login screen looks off due to the spacing of the vertical scrolling letters. That screen probably needs additional love. Just want to gather some feedback.
Regression Notes
Potential unintended areas of impact
The existing bottom navbar..
What I did to test those areas of impact (or what existing automated tests I relied on)
Manual testing.
What automated tests I added (or what prevented me from doing so)
N/A
PR Submission Checklist:
I have completed the Regression Notes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.
Additionally also fixed an issue where the app would not poperly
layout in tablet landscape mode. This occurred due to the
portrait limitation on the login activity.
Something to note. I added padding to the navigation rail. It's 0dp for the bottom nav. So no change. This is per the material spec:
Unfortunately there is no guidance around how to handle that. We could deviate from the spec to increase the width. But if a users font is larger, it wouldn't matter too much. I think for now it's fine. But something to think about.
I also improved the logo spacing in landscape.
We can further improve this by laying out the UI slightly different in landscape. But didn't want to make too many edits.
Just a heads up. Had to make a larger theme change due to a lint issue for potential overdraw. For some reason the BottomNavigationView wasn't being properly styled. After investigating the reason was using Theme.MaterialComponents.Light.DarkActionBar.Bridge. I took a look at the material components and see no mention of "bridge". So instead used Theme.MaterialComponents.DayNight. I changed it for the night version too. Just want to clarify the reasoning. I ran tests on a nexus 5, pixel tablet, and my Z Fold 5. Theming appears to be intact. But if you notice something funky, that is likely the culprit.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Jetpack
WordPress
This PR attempts to make the bottom navbar "adaptive" so when on larger screens it puts the navbar on the left side instead. While using my foldable I noticed we could be utilizing the space better.
Unfortunately we are not using Jetpack Compose with the bottom navbar, so properly doing adaptive navigation is tricky. Especially since it's a custom view. So I utilized two different techniques to make it work.
First, I used the xml file qualifiers that automatically choose layouts for certain screen sizes. This allowed me to move the navigation view to the right spots.
Second, the
BottomNavigationViewand theNavigationRailViewextend from the same parent. Meaning I was able to just reference the parent class. All the related components have similar inheritance structures.The downside is
main_activity.xmlis duplicated in order to make the adaptive part work. But overall surprised it wasn't worse.Additionally on the login screen I noticed weird spacing on the login button. So I fixed that.
Lastly, while testing an actual tablet emulator I noticed that the login screen is actually centered and does not utilize the full screen space in landscape. The experience is pretty poor. So I fixed that too. Sorta.
To Test:
Login
Adaptive Navigation
Smoke Testing
Known Issues
Please note I realize that the tablet login screen looks off due to the spacing of the vertical scrolling letters. That screen probably needs additional love. Just want to gather some feedback.Regression Notes
Potential unintended areas of impact
The existing bottom navbar..
What I did to test those areas of impact (or what existing automated tests I relied on)
Manual testing.
What automated tests I added (or what prevented me from doing so)
N/A
PR Submission Checklist:
RELEASE-NOTES.txtif necessary.