Refresh the navbar with new icons and animations

[meenbeese]

This PR enhances the navbar icons and transition animations, thus improving navigation, clarity, and content.

Part of #790
Closes #911

Icons:

Now each navbar icon has two variations: outline and filled. The filled one is used when the item is selected, and the outline is used otherwise. This is done via a selector for each of the icons that manages this, so the navbar icon can be set to the selector. The old icons are not deleted and new ones are defined instead to not break other usages of the icons. This approach helps maintain consistency and ensures that the navigation experience is intuitive and visually appealing.

Before	After

Animations:

There are four animations in total, which are the left and right variations of both slide-in and slide-out. These animations are used to create a smooth transition effect when navigating between different fragments in the app. The navOptionsLeftToRight is used when navigating to a fragment with a higher item ID, and navOptionsRightToLeft is used when navigating to a fragment with a lower item ID. This ensures that the transitions feel natural based on the direction of navigation.

Before:

Animations-before.webm

After:

Animations-after.webm

Tested on Pixel 8 API 34 Emulator.

[n8fr8]

I like a lot of this, but why did you replace the Onion connect with a key?

[meenbeese]

I like a lot of this, but why did you replace the Onion connect with a key?

The onion icon was found to be confusing in #911, and the best replacement I found from Google Icons was the key. I thought it signified a "secure connection" as it relates to Tor, but I am open to changing it for sure.

[syphyr]

This is a really nice improvement to the UI,, but I think guardianproject would rather use their tor icon instead of the key.

[syphyr]

Do you think you could add an additional patch that replaces the key with the onion icon? This way, both icons can be reviewed.

[syphyr]

This PR introduces a bug where the Ports do not get updated upon initial start on the MoreFragment. It just says "no ports set" when Orbot is started up. If I go into the settings and update the port, then it shows up in the MoreFragment.

It seems like the bug is caused by removing lateinit.

[n8fr8]

@meenbeese happy to merge this if you address the bug from above and revert to the icon we have for Connect.

Thanks for all the work!

[meenbeese]

@meenbeese happy to merge this if you address the bug from above and revert to the icon we have for Connect.

Thanks for all the work!

Thanks for the feedback. I fixed the bug and reverted back the connect icon.

[syphyr]

@meenbeese happy to merge this if you address the bug from above and revert to the icon we have for Connect.
Thanks for all the work!

Thanks for the feedback. I fixed the bug and reverted back the connect icon.

On the "More" Fragment, it still says "Proxy Ports: Ports Not Set" after connecting to tor with a direct connection. I am also in Power User Mode, if that makes a difference.

[meenbeese]

On the "More" Fragment, it still says "Proxy Ports: Ports Not Set" after connecting to tor with a direct connection. I am also in Power User Mode, if that makes a difference.

I actually don't know why this is still the case. I have reverted all of my changes related to the logic and fragments. Can you please test it on the master branch and see if it happens there as well? It might be a regression unrelated to this PR.

[syphyr]

On the "More" Fragment, it still says "Proxy Ports: Ports Not Set" after connecting to tor with a direct connection. I am also in Power User Mode, if that makes a difference.

I actually don't know why this is still the case. I have reverted all of my changes related to the logic and fragments. Can you please test it on the master branch and see if it happens there as well? It might be a regression unrelated to this PR.

I just tested latest fix (with and without power user mode enabled) and the ports are still not being set after connecting to tor with a direct connection.