Redesign Brave Wallet main layout introducing latest material 2 components #19650

simoarpe · 2023-08-11T09:16:45Z

Resolves brave/brave-browser#32197

demo.mov

Remove logic for old Android versions below Nougat (< API level 24).
Switch from old ViewPager to new and more performant ViewPager2 class.
Switch from deprecated FragmentStatePagerAdapter to new FragmentStateAdapter.
Rename Market section to Explore section per Figma design.
Implement BottomNavigationViewIndicator to display sections: Portfolio, NFTs, Activity, Accounts, Explore.
⚠️ Note: NFTs section will be removed from the bottom navigation view and it will be merged into the portfolio section in a follow up PR (Main umbrella Issue: ☂️ Main umbrella issue for Wallet 2.0 sections redesign brave-browser#32196)

UI Changes

Bottom Navigation View

Remove tab layout in favor of bottom navigation view with gradient indicator that animates when tapped.

navigator-indicator.mov

App Bar Layout

Add app bar layout and rewrite layout to scroll correctly.

toolbar.mov

Tweak FAB behavior

FAB "follows" bottom navigation view

fab.mov

Banner layout

Improved layout with bottom margin and thin separator.

Submitter Checklist:

I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
There is a ticket for my issue
Used Github auto-closing keywords in the PR description above
Wrote a good PR/commit description
Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
Checked the PR locally:
- npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
- npm run lint, npm run presubmit wiki, npm run gn_check, npm run tslint
Ran git rebase master (if needed)

Reviewer Checklist:

A security review is not needed, or a link to one is included in the PR description
New files have MPL-2.0 license header
Adequate test coverage exists to prevent regressions
Major classes, functions and non-trivial code blocks are well-commented
Changes in component dependencies are properly reflected in gn
Code follows the style guide
Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

Open Brave Wallet.
Observe the new bottom navigation view is displayed instead of the old tabs on top.
Tap on its sections.
Observe the pages switch accordingly.
Navigate back to Portfolio section and scroll down
Observe the bottom navigation view disappears.
Observe the FAB button animation
Observe the toolbar can disappear
Scroll up
Observe the bottom navigation view is shown again
Observe the FAB "follows" the bottom navigation view
Observe the toolbar reappears.

Removes logic for old Android versions below Nougat (< API level 24).

Replaces tab layout in favor of bottom navigation view in Brave Wallet activity layout.

Shadows are so messed up on Android that even Google itself stopped using native support and decided to add them manually to solve the problem. We are adopting the same approach used for the Chromium bottom bar. Link: https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/android/toolbar/java/res/layout/bottom_control_container.xml;l=1?q=bottom_control_container.xml

Improves layout by introducing a frame layout that will render the shadow in the correct position.

Improves performance and stability by switching to new ViewPager2 based on modern RecyclerView implementation.

SergeyZhukovsky

++

Pavneet-Sing · 2023-08-14T12:34:56Z

android/java/res/layout/activity_brave_wallet.xml

+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:orientation="vertical"
+            app:layout_behavior="@string/appbar_scrolling_view_behavior">
+
+            <include layout="@layout/wallet_backup_banner" />
+
+            <androidx.viewpager2.widget.ViewPager2
+                android:id="@+id/navigation_view_pager"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent" />
+        </LinearLayout>
+
+        <LinearLayout
+            android:id="@+id/bottom_view_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
-            app:tabIndicator="@drawable/tab_gradient_separator"
-            app:tabIndicatorHeight="@dimen/brave_wallet_tab_indicator_height"
-            app:tabIndicatorColor="@null"
-            android:background="@color/wallet_toolbar_bg_color"
-            app:tabTextAppearance="@style/BraveWalletTabsTextAppearance"
-            app:tabGravity="fill"
-            app:tabSelectedTextColor="@color/tab_color"
-            app:tabTextColor="@color/wallet_text_color" />
-        <include layout="@layout/wallet_backup_banner"/>
-        <org.chromium.chrome.browser.custom_layout.NonSwipeableViewPager
-            android:id="@+id/navigation_view_pager"
+            android:layout_gravity="bottom"
+            android:orientation="vertical"
+            app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior">
+
+            <ImageView
+                android:id="@+id/bottom_container_top_shadow"
+                android:layout_width="match_parent"
+                android:layout_height="@dimen/toolbar_shadow_height"
+                android:scaleType="fitXY"
+                android:scaleY="-1"
+                android:src="@drawable/modern_toolbar_shadow"
+                tools:ignore="ContentDescription" />
+
+            <org.chromium.chrome.browser.custom_layout.BottomNavigationViewWithIndicator
+                android:id="@+id/wallet_bottom_navigation"
+                android:layout_width="match_parent"
+                android:layout_height="?actionBarSize"
+                android:background="@color/wallet_toolbar_bg_color"
+                app:itemHorizontalTranslationEnabled="false"
+                app:itemIconTint="@color/wallet_bottom_navigation_color"
+                app:labelVisibilityMode="labeled"
+                app:menu="@menu/wallet_bottom_navigation_items" />
+        </LinearLayout>
+
+        <LinearLayout
+            android:id="@+id/fab_layout"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="top"
+            android:orientation="vertical"
+            app:layout_anchor="@id/bottom_view_container"
+            app:layout_anchorGravity="top|end">
+
+            <ImageView
+                android:id="@+id/pending_tx_notification"
+                android:layout_width="48dp"
+                android:layout_height="48dp"
+                android:layout_marginEnd="16dp"
+                android:layout_marginBottom="16dp"
+                android:background="@drawable/ic_pending_tx_notification_bg"
+                android:contentDescription="@null"
+                android:elevation="10dp"
+                android:scaleType="fitCenter"
+                android:src="@drawable/ic_pending_tx_notification_icon" />
+
+            <ImageView
+                android:id="@+id/buy_send_swap_button"
+                android:layout_width="56dp"
+                android:layout_height="56dp"
+                android:layout_marginEnd="16dp"
+                android:layout_marginBottom="16dp"
+                android:background="@drawable/ic_swap_bg"
+                android:contentDescription="@null"
+                android:elevation="10dp"
+                android:scaleType="center"
+                android:src="@drawable/ic_swap_icon" />
+        </LinearLayout>


nit: can be inside one constraint layout

Yes, I should try harder to make this a constraint layout.
I'm going to tackle this task in the PR solving issue brave/brave-browser#32256

Feel free to keep it as it is if it takes more of your time, just a nit.

Pavneet-Sing · 2023-08-15T06:33:57Z

android/java/org/chromium/chrome/browser/crypto_wallet/adapters/CryptoFragmentPageAdapter.java

+    public CryptoFragmentPageAdapter(FragmentActivity fm) {
+        super(fm);
+        Resources resources = fm.getResources();


nit: fm should be activity, no longer a FragmentManager

Pavneet-Sing · 2023-08-15T06:35:26Z

android/java/org/chromium/chrome/browser/crypto_wallet/fragments/PortfolioFragment.java

            if (hasPendingTx())
-                ((BraveWalletActivity) activity).setPendingTxNotificationVisibility(View.VISIBLE);
+                ((BraveWalletActivity) activity).showPendingTxNotification(true);
            else
-                ((BraveWalletActivity) activity).setPendingTxNotificationVisibility(View.GONE);
+                ((BraveWalletActivity) activity).showPendingTxNotification(false);


Replace with ((BraveWalletActivity) activity).showPendingTxNotification(hasPendingTx());

mkarolin

strings++

simoarpe added 19 commits August 9, 2023 14:16

Remove old if statements referring to unsupported Android versions

fbde7c4

Removes logic for old Android versions below Nougat (< API level 24).

Add missing headers

06e1b5e

Remove unused resources

bc6c496

Implement custom bottom navigation view with a gradient indicator

6e828e6

Switch tab layout in favor of bottom navigation view

49790b9

Replaces tab layout in favor of bottom navigation view in Brave Wallet activity layout.

Improve main layout

71e4319

Improves layout by introducing a frame layout that will render the shadow in the correct position.

Apply code formatting

db6a68c

Switch custom layout to new ViewPager2

e1e5c4c

Improves performance and stability by switching to new ViewPager2 based on modern RecyclerView implementation.

Remove unused imports

1a85986

Add missing Javadoc

5eee0be

Introduce coordinator layout and tweak scrolling behavior

73dbbbe

Reflect layout transitions on FAB position

357e7bc

Add bottom margin to fragment portfolio to better support FAB

d5f0090

Improve backup banner layout

61fbb3d

Improve FAB behavior

ad99592

Format layouts

08efff8

Add new icons to bottom navigation view component

60396aa

Rename Market section to Explore

c8f357f

simoarpe added CI/skip-macos-x64 Do not run CI builds for macOS x64 CI/skip-ios Do not run CI builds for iOS CI/skip-windows-x86 CI/skip-windows-x64 Do not run CI builds for Windows x64 unused-CI/skip-linux-x64 Do not run CI builds for Linux x64 labels Aug 11, 2023

simoarpe requested a review from a team as a code owner August 11, 2023 09:16

simoarpe self-assigned this Aug 11, 2023

github-actions bot added the feature/web3/wallet label Aug 11, 2023

simoarpe requested a review from Pavneet-Sing August 11, 2023 12:39

simoarpe requested a review from SergeyZhukovsky August 11, 2023 12:39

SergeyZhukovsky approved these changes Aug 11, 2023

View reviewed changes

Pavneet-Sing approved these changes Aug 15, 2023

View reviewed changes

Address review feedback

e57db19

mkarolin approved these changes Aug 15, 2023

View reviewed changes

simoarpe merged commit 2662c68 into master Aug 15, 2023

simoarpe deleted the simone/nft-section-tab branch August 15, 2023 13:24

github-actions bot added this to the 1.59.x - Nightly milestone Aug 15, 2023

srirambv mentioned this pull request Sep 28, 2023

Redesign Brave Wallet main layout introducing latest material 2 components brave/brave-browser#32197

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign Brave Wallet main layout introducing latest material 2 components #19650

Redesign Brave Wallet main layout introducing latest material 2 components #19650

simoarpe commented Aug 11, 2023 •

edited

Loading

SergeyZhukovsky left a comment

Pavneet-Sing Aug 14, 2023

simoarpe Aug 15, 2023

Pavneet-Sing Aug 15, 2023

Pavneet-Sing Aug 15, 2023

simoarpe Aug 15, 2023

Pavneet-Sing Aug 15, 2023

simoarpe Aug 15, 2023

mkarolin left a comment

Redesign Brave Wallet main layout introducing latest material 2 components #19650

Redesign Brave Wallet main layout introducing latest material 2 components #19650

Conversation

simoarpe commented Aug 11, 2023 • edited Loading

Resolves brave/brave-browser#32197

UI Changes

Bottom Navigation View

App Bar Layout

Tweak FAB behavior

Banner layout

Submitter Checklist:

Reviewer Checklist:

After-merge Checklist:

Test Plan:

SergeyZhukovsky left a comment

Choose a reason for hiding this comment

Pavneet-Sing Aug 14, 2023

Choose a reason for hiding this comment

simoarpe Aug 15, 2023

Choose a reason for hiding this comment

Pavneet-Sing Aug 15, 2023

Choose a reason for hiding this comment

Pavneet-Sing Aug 15, 2023

Choose a reason for hiding this comment

simoarpe Aug 15, 2023

Choose a reason for hiding this comment

Pavneet-Sing Aug 15, 2023

Choose a reason for hiding this comment

simoarpe Aug 15, 2023

Choose a reason for hiding this comment

mkarolin left a comment

Choose a reason for hiding this comment

simoarpe commented Aug 11, 2023 •

edited

Loading