diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index fc030dd68..46a0fbd2e 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -169,10 +169,12 @@ function initializeNativeClasses() { 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]); } } @@ -742,31 +744,51 @@ export class BottomNavigation extends TabNavigationBase { this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); } - public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { - // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style - const isSelected = (tabStripItem._index === this.selectedIndex); - if (isSelected) { - value = this._selectedItemColor || value; - } else { - value = this._unSelectedItemColor || value; + public _setItemColor(tabStripItem: TabStripItem) { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (!itemColor) { + return; } - if (typeof value === "number") { - tabStripItem.nativeViewProtected.setTextColor(value); - } else { - tabStripItem.nativeViewProtected.setTextColor(value.android); + // set label color + tabStripItem.nativeViewProtected.setTextColor(itemColor.android); + + // set icon color + this._setIconColor(tabStripItem, itemColor); + } + + private _setIconColor(tabStripItem: TabStripItem, color?: Color) { + const tabBarItem = this._bottomNavigationBar.getViewForItemAt(tabStripItem._index); + + const drawableInfo = this.getIconInfo(tabStripItem, color); + const imgView = tabBarItem.getChildAt(0); + imgView.setImageDrawable(drawableInfo.drawable); + if (color) { + imgView.setColorFilter(color.android); } } + public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (itemColor) { + // the itemColor is set through the selectedItemColor and unSelectedItemColor properties + // so it does not respect the css color + return; + } + + const androidColor = value instanceof Color ? value.android : value; + tabStripItem.nativeViewProtected.setTextColor(androidColor); + } + public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { - const index = tabStripItem._index; - const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index); - const imgView = tabBarItem.getChildAt(0); + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (itemColor) { + // the itemColor is set through the selectedItemColor and unSelectedItemColor properties + // so it does not respect the css color + return; + } - const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; - const drawableInfo = this.getIconInfo(tabStripItem, color); - - imgView.setImageDrawable(drawableInfo.drawable); + this._setIconColor(tabStripItem); } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index e7d0a4952..53a5f6b57 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -300,10 +300,12 @@ function initializeNativeClasses() { 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]); } } @@ -834,31 +836,51 @@ export class Tabs extends TabsBase { this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); } - public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { - // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style - const isSelected = (tabStripItem._index === this.selectedIndex); - if (isSelected) { - value = this._selectedItemColor || value; - } else { - value = this._unSelectedItemColor || value; + public _setItemColor(tabStripItem: TabStripItem) { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (!itemColor) { + return; } - if (typeof value === "number") { - tabStripItem.nativeViewProtected.setTextColor(value); - } else { - tabStripItem.nativeViewProtected.setTextColor(value.android); + // set label color + tabStripItem.nativeViewProtected.setTextColor(itemColor.android); + + // set icon color + this._setIconColor(tabStripItem, itemColor); + } + + private _setIconColor(tabStripItem: TabStripItem, color?: Color) { + const tabBarItem = this._tabsBar.getViewForItemAt(tabStripItem._index); + + const drawable = this.getIcon(tabStripItem, color); + const imgView = tabBarItem.getChildAt(0); + imgView.setImageDrawable(drawable); + if (color) { + imgView.setColorFilter(color.android); } } + public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (itemColor) { + // the itemColor is set through the selectedItemColor and unSelectedItemColor properties + // so it does not respect the css color + return; + } + + const androidColor = value instanceof Color ? value.android : value; + tabStripItem.nativeViewProtected.setTextColor(androidColor); + } + public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { - const index = tabStripItem._index; - const tabBarItem = this._tabsBar.getViewForItemAt(index); - const imgView = tabBarItem.getChildAt(0); + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (itemColor) { + // the itemColor is set through the selectedItemColor and unSelectedItemColor properties + // so it does not respect the css color + return; + } - const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; - const drawable = this.getIcon(tabStripItem, color); - - imgView.setImageDrawable(drawable); + this._setIconColor(tabStripItem); } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java index 13760a683..97534cd42 100644 --- a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java +++ b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java @@ -198,6 +198,9 @@ public class BottomNavigationBar extends LinearLayout { } else if (tabItem.iconDrawable != null) { imgView.setImageDrawable(tabItem.iconDrawable); imgView.setVisibility(VISIBLE); + if (tabItem.color != 0) { + imgView.setColorFilter(tabItem.color); + } } else { imgView.setVisibility(GONE); } diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java index 20dfdfd0c..b5bf39ab6 100644 --- a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java +++ b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java @@ -160,7 +160,7 @@ public class TabsBar extends HorizontalScrollView { * {@link TabsBar} you are required to set any * {@link ViewPager.OnPageChangeListener} through this method. This is so * that the layout can update it's scroll position correctly. - * + * * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener) */ public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) { @@ -196,25 +196,25 @@ public class TabsBar extends HorizontalScrollView { TextView textView = (TextView)ll.getChildAt(1); this.setupItem(ll, textView, imgView, tabItem); } - + /** * Gets the TextView for tab item at index */ public TextView getTextViewForItemAt(int index){ LinearLayout ll = this.getViewForItemAt(index); - return (ll != null) ? (TextView)ll.getChildAt(1) : null; + return (ll != null) ? (TextView)ll.getChildAt(1) : null; } - + /** * Gets the LinearLayout container for tab item at index */ public LinearLayout getViewForItemAt(int index){ LinearLayout result = null; - + if(this.mTabStrip.getChildCount() > index){ result = (LinearLayout)this.mTabStrip.getChildAt(index); } - + return result; } @@ -262,16 +262,19 @@ public class TabsBar extends HorizontalScrollView { ll.addView(textView); return ll; } - + private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, TabItemSpec tabItem){ float density = getResources().getDisplayMetrics().density; - + if (tabItem.iconId != 0) { imgView.setImageResource(tabItem.iconId); imgView.setVisibility(VISIBLE); } else if (tabItem.iconDrawable != null) { imgView.setImageDrawable(tabItem.iconDrawable); imgView.setVisibility(VISIBLE); + if (tabItem.color != 0) { + imgView.setColorFilter(tabItem.color); + } } else { imgView.setVisibility(GONE); } @@ -283,14 +286,14 @@ public class TabsBar extends HorizontalScrollView { if (tabItem.typeFace != null) { textView.setTypeface(tabItem.typeFace); } - + if (tabItem.fontSize != 0) { textView.setTextSize(tabItem.fontSize); } - + if (tabItem.color != 0) { textView.setTextColor(tabItem.color); - mTabStrip.setShouldUpdateTabsTextColor(false); + mTabStrip.setShouldUpdateTabsTextColor(false); } } else { textView.setVisibility(GONE); @@ -305,7 +308,7 @@ public class TabsBar extends HorizontalScrollView { } else { ll.setMinimumHeight((int) (SMALL_MIN_HEIGHT * density)); } - + if (mDistributeEvenly) { LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll.getLayoutParams(); lp.width = 0;