fix: android Tabs selected item color incorrectly applied (#9040)

* fix: selected-item-color gets applied to wrong TabStripItems

* chore: Added selection colors to 2 ui examples.

* chore: Removing used for testing.

apps/ui/src/tabs/swipe-disabled-page.ts

@@ -0,0 +1,15 @@
+import { EventData, Page, Tabs } from '@nativescript/core';
+
+export function goToFirst(args: EventData) {
+	console.log('---> goToFirst');
+	const page = <Page>(<any>args.object).page;
+	const tabsNav = <Tabs>page.getViewById('tabs');
+	tabsNav.selectedIndex = 0;
+}
+
+export function goToSecond(args: EventData) {
+	console.log('---> goToSecond');
+	const page = <Page>(<any>args.object).page;
+	const tabsNav = <Tabs>page.getViewById('tabs');
+	tabsNav.selectedIndex = 1;
+}

apps/ui/src/tabs/swipe-disabled-page.xml

@@ -4,7 +4,7 @@
   </ActionBar>
 
   <Tabs id="tabs" swipeEnabled="false" automationText="tabNavigation"  >
-    <TabStrip>
+    <TabStrip selectedItemColor="red" unSelectedItemColor="black">
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>
         <!-- <Image src="res://icon" /> -->

apps/ui/src/tabs/tabs-position-page.xml

@@ -4,7 +4,7 @@
   </ActionBar>
 
   <Tabs id="tabs" tabsPosition="bottom" automationText="tabNavigation"  >
-    <TabStrip>
+    <TabStrip selectedItemColor="blue" unSelectedItemColor="gray">
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>
         <!-- <Image src="res://icon" /> -->

packages/core/ui/tabs/index.android.ts

@@ -141,6 +141,7 @@ function initializeNativeClasses() {
 		public items: Array<TabContentItem>;
 		private mCurTransaction: androidx.fragment.app.FragmentTransaction;
 		private mCurrentPrimaryItem: androidx.fragment.app.Fragment;
+		private mCurrentPosition = -1;
 
 		constructor(public owner: Tabs) {
 			super();
@@ -238,9 +239,27 @@ function initializeNativeClasses() {
 				}
 
 				this.mCurrentPrimaryItem = fragment;
-				this.owner.selectedIndex = position;
+				const previousPosition = this.mCurrentPosition;
+				this.mCurrentPosition = position;
 
 				const tab = this.owner;
+				tab.selectedIndex = position;
+
+				// Update tabstrip items
+				if (position != previousPosition) {
+					const tabStripItems = tab.tabStrip && tab.tabStrip.items;
+
+					if (position >= 0 && tabStripItems && tabStripItems[position]) {
+						tabStripItems[position]._emit(TabStripItem.selectEvent);
+						tab._setItemColor(tabStripItems[position]);
+					}
+
+					if (previousPosition >= 0 && tabStripItems && tabStripItems[previousPosition]) {
+						tabStripItems[previousPosition]._emit(TabStripItem.unselectEvent);
+						tab._setItemColor(tabStripItems[previousPosition]);
+					}
+				}
+
 				const tabItems = tab.items;
 				const newTabItem = tabItems ? tabItems[position] : null;
 
@@ -290,25 +309,6 @@ function initializeNativeClasses() {
 			return global.__native(this);
 		}
 
-		public onSelectedPositionChange(position: number, prevPosition: number): void {
-			const owner = this.owner;
-			if (!owner) {
-				return;
-			}
-
-			const tabStripItems = owner.tabStrip && owner.tabStrip.items;
-
-			if (position >= 0 && tabStripItems && tabStripItems[position]) {
-				tabStripItems[position]._emit(TabStripItem.selectEvent);
-				owner._setItemColor(tabStripItems[position]);
-			}
-
-			if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) {
-				tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent);
-				owner._setItemColor(tabStripItems[prevPosition]);
-			}
-		}
-
 		public onTap(position: number): boolean {
 			const owner = this.owner;
 			if (!owner) {
@@ -952,11 +952,9 @@ export class Tabs extends TabsBase {
 	}
 
 	[selectedIndexProperty.setNative](value: number) {
-		// TODO
+		if (this._viewPager.getCurrentItem() != value) {
-		// if (Trace.isEnabled()) {
+			this._viewPager.setCurrentItem(value);
-		//     Trace.write("TabView this._viewPager.setCurrentItem(" + value + ", " + smoothScroll + ");", traceCategory);
+		}
-		// }
-		this._viewPager.setCurrentItem(value, this.animationEnabled);
 	}
 
 	[itemsProperty.getDefault](): TabContentItem[] {

packages/core/ui/tabs/tabs-common.ts

@@ -12,7 +12,7 @@ export * from '../tab-navigation-base/tab-navigation-base';
 export * from '../tab-navigation-base/tab-strip';
 export * from '../tab-navigation-base/tab-strip-item';
 
-export const traceCategory = 'TabView';
+export const traceCategory = 'Tabs';
 
 @CSSType('Tabs')
 export class TabsBase extends TabNavigationBase implements TabsDefinition {

packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/TabViewPager.java

@@ -56,7 +56,7 @@ public class TabViewPager extends ViewPager {
 
     @Override
     public void setCurrentItem(int item) {
-        boolean smoothScroll = this.animationEnabled && this.swipePageEnabled;
+        boolean smoothScroll = this.animationEnabled;
         super.setCurrentItem(item, smoothScroll);
     }
 }

packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java

@@ -317,10 +317,6 @@ public class TabsBar extends HorizontalScrollView {
         return true;
     }
 
-    public void onSelectedPositionChange(int position, int prevPosition) {
-        // to be overridden in JS
-    }
-
     private void populateTabStrip() {
         final PagerAdapter adapter = mViewPager.getAdapter();
         final OnClickListener tabClickListener = new TabClickListener();
@@ -394,12 +390,6 @@ public class TabsBar extends HorizontalScrollView {
                 return;
             }
 
-            int prevPosition = mTabStrip.getSelectedPosition();
-
-            if (prevPosition != position) {
-                onSelectedPositionChange(position, prevPosition);
-            }
-
             mTabStrip.onTabsViewPagerPageChanged(position, positionOffset);
 
             View selectedTitle = mTabStrip.getChildAt(position);