Skip to content

fix(core-android): Tabs selected item color gets applied to wrong Tabs or not applied at all#9040

Merged
rigor789 merged 3 commits into
NativeScript:masterfrom
CatchABus:tabs-selected
Dec 28, 2020
Merged

fix(core-android): Tabs selected item color gets applied to wrong Tabs or not applied at all#9040
rigor789 merged 3 commits into
NativeScript:masterfrom
CatchABus:tabs-selected

Conversation

@CatchABus
Copy link
Copy Markdown
Contributor

@CatchABus CatchABus commented Nov 15, 2020 •
edited
Loading

PR Checklist

What is the current behavior?

There are couple of issues regarding Tabs navigation UX for some time now.

  1. TabStrip selected color is not applied to the right tabstrip item if one changes tabs using swipe.
  2. TabStrip selected color is not applied to any tabstrip items after tab change, if swipe is disabled.
  3. Property isAnimationEnabled is not working for Tabs with swipeEnabled set to false.

What is the new behavior?

This PR ensures colors are properly changed in all cases and animation to be configurable in all cases.
In terms of performance, this method won't try to update colors when not needed.
Additionally, it prevents the pointless calls of setCurrentItem every time selectedIndexProperty changes.

Until now, the following performance issue had been occuring:
setCurrentItem calls a native method which by its turn calls setPrimaryItem method.
setPrimaryItem is overridden inside Tabs UI component and changes selectedIndex property.
Upon change, selectedIndex property will call setCurrentItem again (called using setNative symbol)

Luckily, since setCurrentItem tried to set the same index there was no recursion but still executed tasks that shouldn't.

I'm positive this is a very good solution to get rid of some TabStrip UX bugs.
People are desperate with Tab components and that may give a small relief for Android platform at least.

There are lots of Tabs examples in UI app where this can be tested, but I also made sure to add selected/unselected colors to swipe-disabled-page and tabs-position-page examples.

Hope you consider this as a good alternative.

Fixes/Closes #8543 #8551 #8552 #8712

@cla-bot cla-bot Bot added the cla: yes label Nov 15, 2020
@CatchABus CatchABus changed the title fix(core-android): Tabs selectedItemColor gets applied to wrong Tabs or not applied at all fix(core-android): Tabs selected item color gets applied to wrong Tabs or not applied at all Nov 15, 2020
@NathanWalker NathanWalker added the ready for test TSC needs to test this and confirm against live production apps and automated test suites label Nov 16, 2020
rigor789
rigor789 reviewed Dec 20, 2020
View reviewed changes
Copy link
Copy Markdown
Member

@rigor789 rigor789 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if intentional but packages/core/platforms/android/widgets-release.aar has been removed, I believe it just needs to be rebuilt with the native changes.

Comment thread packages/core/ui/tabs/index.android.ts
// }
this._viewPager.setCurrentItem(value, this.animationEnabled);
if (this._viewPager.getCurrentItem() != value) {
this._viewPager.setCurrentItem(value);
Copy link
Copy Markdown
Member

@rigor789 rigor789 Dec 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this pass the animationEnabled boolean?

Copy link
Copy Markdown
Contributor Author

@CatchABus CatchABus Dec 20, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rigor789 This is handled in ui-mobile-base android class:
https://github.com/DimitrisRK/NativeScript/blob/tabs-selected/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/TabViewPager.java#L58

Note: This java code is not an addition of mine. animationEnabled check had always been inside overridden method but it had an extra swipeEnabled check which was breaking proper functionality for all cases, so I removed 1 of 2 conditions.

@rigor789 rigor789 added this to the 7.1 milestone Dec 20, 2020
@CatchABus
Copy link
Copy Markdown
Contributor Author

CatchABus commented Dec 21, 2020

Not sure if intentional but packages/core/platforms/android/widgets-release.aar has been removed, I believe it just needs to be rebuilt with the native changes.

Sorry, just noticed first comment. It's not removed, just looks like this because it's modified (few lines were left unused, so they got removed).
I modified and rebuilt it as expected.

@rigor789 rigor789 merged commit b47ce0a into NativeScript:master Dec 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rigor789 rigor789 rigor789 approved these changes

Assignees

No one assigned

Labels

cla: yes ready for test TSC needs to test this and confirm against live production apps and automated test suites

Projects

None yet

Milestone

7.1

Development

Successfully merging this pull request may close these issues.

Tab label is not changing its color when swipe isdisabled

3 participants

@CatchABus @rigor789 @NathanWalker