fix(android): fixes changing background colors for Tabs after they ar…

…e drawn. (#10756)

Fix color setting in different moments of the components creation. Fixes changing TabGroup and Tab background colors for different states after the creation of the
components.

Fixes TIMOB-26859

android/modules/ui/src/java/ti/modules/titanium/ui/TabGroupProxy.java

@@ -41,6 +41,7 @@
 @Kroll.proxy(creatableInModule = UIModule.class,
 	propertyAccessors = {
 		TiC.PROPERTY_TABS_BACKGROUND_COLOR,
+		TiC.PROPERTY_TABS_BACKGROUND_SELECTED_COLOR,
 		TiC.PROPERTY_SWIPEABLE,
 		TiC.PROPERTY_EXIT_ON_CLOSE,
 		TiC.PROPERTY_SMOOTH_SCROLL_ON_TAB_CLICK

android/modules/ui/src/java/ti/modules/titanium/ui/TabProxy.java

@@ -15,6 +15,8 @@
 import org.appcelerator.titanium.util.TiUIHelper;
 import org.appcelerator.titanium.view.TiUIView;
 
+import ti.modules.titanium.ui.widget.tabgroup.TiUIAbstractTabGroup;
+
 import android.app.Activity;
 // clang-format off
 @Kroll.proxy(creatableInModule = UIModule.class,
@@ -223,6 +225,17 @@ void onSelectionChanged(boolean selected)
 		}
 	}
 
+	@Override
+	public void onPropertyChanged(String name, Object value)
+	{
+		super.onPropertyChanged(name, value);
+		if (name.equals(TiC.PROPERTY_BACKGROUND_COLOR) || name.equals(TiC.PROPERTY_BACKGROUND_FOCUSED_COLOR)) {
+			if (tabGroupProxy != null) {
+				((TiUIAbstractTabGroup) tabGroupProxy.getOrCreateView()).setDrawables();
+			}
+		}
+	}
+
 	@Override
 	public String getApiName()
 	{

android/modules/ui/src/java/ti/modules/titanium/ui/widget/tabgroup/TiUIAbstractTabGroup.java

@@ -82,9 +82,14 @@ public abstract class TiUIAbstractTabGroup extends TiUIView
 	/**
 	 * Changes the controller's background color.
 	 *
-	 * @param drawable the new background drawable.
+	 * @param colorInt the new background color.
 	 */
-	public abstract void setBackgroundDrawable(Drawable drawable);
+	public abstract void setBackgroundColor(int colorInt);
+
+	/**
+	 * Changes the tabs background drawables to the proper color states.
+	 */
+	public abstract void setDrawables();
 
 	// region protected fields
 	protected static final String TAG = "TiUITabLayoutTabGroup";
@@ -347,6 +352,11 @@ public void processProperties(KrollDict d)
 		if (d.containsKey(TiC.PROPERTY_SMOOTH_SCROLL_ON_TAB_CLICK)) {
 			this.smoothScrollOnTabClick = d.getBoolean(TiC.PROPERTY_SMOOTH_SCROLL_ON_TAB_CLICK);
 		}
+		if (d.containsKeyAndNotNull(TiC.PROPERTY_TABS_BACKGROUND_COLOR)) {
+			setBackgroundColor(TiColorHelper.parseColor(d.get(TiC.PROPERTY_TABS_BACKGROUND_COLOR).toString()));
+		} else {
+			setBackgroundColor(this.colorPrimaryInt);
+		}
 		super.processProperties(d);
 	}
 
@@ -357,6 +367,11 @@ public void propertyChanged(String key, Object oldValue, Object newValue, KrollP
 			this.swipeable = TiConvert.toBoolean(newValue);
 		} else if (key.equals(TiC.PROPERTY_SMOOTH_SCROLL_ON_TAB_CLICK)) {
 			this.smoothScrollOnTabClick = TiConvert.toBoolean(newValue);
+		} else if (key.equals(TiC.PROPERTY_TABS_BACKGROUND_COLOR)) {
+			setDrawables();
+			setBackgroundColor(TiColorHelper.parseColor(newValue.toString()));
+		} else if (key.equals(TiC.PROPERTY_TABS_BACKGROUND_SELECTED_COLOR)) {
+			setDrawables();
 		} else {
 			super.propertyChanged(key, oldValue, newValue, proxy);
 		}

android/modules/ui/src/java/ti/modules/titanium/ui/widget/tabgroup/TiUIBottomNavigationTabGroup.java

@@ -6,8 +6,9 @@
  */
 package ti.modules.titanium.ui.widget.tabgroup;
 
-import android.graphics.drawable.Drawable;
+import android.content.res.ColorStateList;
 import android.graphics.Rect;
+import android.graphics.drawable.Drawable;
 import android.support.design.internal.BottomNavigationItemView;
 import android.support.design.internal.BottomNavigationMenuView;
 import android.support.design.widget.BottomNavigationView;
@@ -81,14 +82,6 @@ protected void onLayout(boolean hasChanged, int left, int top, int right, int bo
 		};
 		this.mBottomNavigationView.setFitsSystemWindows(true);
 
-		// Set the colorPrimary as backgroundColor by default if do not have the backgroundColor set.
-		if (proxy.hasPropertyAndNotNull(TiC.PROPERTY_TABS_BACKGROUND_COLOR)) {
-			this.mBottomNavigationView.setBackgroundColor(
-				TiColorHelper.parseColor(proxy.getProperty(TiC.PROPERTY_TABS_BACKGROUND_COLOR).toString()));
-		} else {
-			this.mBottomNavigationView.setBackgroundColor(this.colorPrimaryInt);
-		}
-
 		// Add tab bar and view pager to the root Titanium view.
 		// Note: If getFitsSystemWindows() returns false, then Titanium window's "extendSafeArea" is set true.
 		//       This means the bottom tab bar should overlap/overlay the view pager content.
@@ -166,7 +159,7 @@ public void addTabItemInController(TabProxy tabProxy)
 		// Set the drawables.
 		setDrawables();
 		// Handle shift mode.
-		if (proxy.hasPropertyAndNotNull(TiC.PROPERTY_SHIFT_MODE)) {
+		if (this.proxy.hasPropertyAndNotNull(TiC.PROPERTY_SHIFT_MODE)) {
 			if (!((Boolean) proxy.getProperty(TiC.PROPERTY_SHIFT_MODE))) {
 				disableShiftMode();
 			}
@@ -178,7 +171,7 @@ public void addTabItemInController(TabProxy tabProxy)
 	 * it rebuilds its menu on every addition of a new item in it.
 	 *
 	 */
-	private void setDrawables()
+	public void setDrawables()
 	{
 		try {
 			ArrayList<TabProxy> tabs = ((TabGroupProxy) proxy).getTabList();
@@ -265,15 +258,10 @@ public void selectTabItemInController(int position)
 		((TabGroupProxy) getProxy()).onTabSelected(position);
 	}
 
-	/**
-	 * Set the background drawable for BottomNavigationView.
-	 *
-	 * @param drawable the new background drawable.
-	 */
 	@Override
-	public void setBackgroundDrawable(Drawable drawable)
+	public void setBackgroundColor(int colorInt)
 	{
-		this.mBottomNavigationView.setBackground(drawable);
+		this.mBottomNavigationView.setBackgroundColor(colorInt);
 	}
 
 	/**

android/modules/ui/src/java/ti/modules/titanium/ui/widget/tabgroup/TiUITabLayoutTabGroup.java

@@ -13,6 +13,7 @@
 import android.widget.LinearLayout;
 import android.widget.TextView;
 
+import java.util.ArrayList;
 import java.util.List;
 
 import org.appcelerator.kroll.common.Log;
@@ -47,6 +48,40 @@ public TiUITabLayoutTabGroup(TabGroupProxy proxy, TiBaseActivity activity)
 		super(proxy, activity);
 	}
 
+	private void setDrawablesForTab(int tabIndex)
+	{
+		// Validate index input.
+		ArrayList<TabProxy> tabProxyArrayList = ((TabGroupProxy) this.proxy).getTabList();
+		if (tabIndex < 0 || tabIndex >= tabProxyArrayList.size()) {
+			return;
+		}
+
+		TabProxy tabProxy = tabProxyArrayList.get(tabIndex);
+		if (tabProxy == null) {
+			return;
+		}
+		// Create a background drawable with ripple effect for the state used by TabLayout.Tab.
+		Drawable backgroundDrawable = createBackgroundDrawableForState(tabProxy, android.R.attr.state_selected);
+
+		// Go through the layout to set the background color state drawable manually for each tab.
+		// Currently we support only the default type of TabLayout which has a SlidingTabStrip.
+		try {
+			LinearLayout stripLayout = ((LinearLayout) this.mTabLayout.getChildAt(0));
+			// Get the just added TabView as a LinearLayout in order to set the background.
+			LinearLayout tabLL = ((LinearLayout) stripLayout.getChildAt(tabIndex));
+			tabLL.setBackground(backgroundDrawable);
+			// Set the TextView textColor.
+			for (int i = 0; i < tabLL.getChildCount(); i++) {
+				if (tabLL.getChildAt(i) instanceof TextView) {
+					((TextView) tabLL.getChildAt(i))
+						.setTextColor(textColorStateList(tabProxy, android.R.attr.state_selected));
+				}
+			}
+		} catch (Exception e) {
+			Log.w(TAG, WARNING_LAYOUT_MESSAGE);
+		}
+	}
+
 	/**
 	 * Removes the controller from the UI layout.
 	 * @param disable
@@ -92,14 +127,6 @@ protected void onLayout(boolean hasChanged, int left, int top, int right, int bo
 		};
 		this.mTabLayout.setFitsSystemWindows(true);
 
-		// Set the colorPrimary as backgroundColor by default if do not have the backgroundColor set.
-		if (proxy.hasPropertyAndNotNull(TiC.PROPERTY_TABS_BACKGROUND_COLOR)) {
-			this.mTabLayout.setBackgroundColor(
-				TiColorHelper.parseColor(proxy.getProperty(TiC.PROPERTY_TABS_BACKGROUND_COLOR).toString()));
-		} else {
-			this.mTabLayout.setBackgroundColor(this.colorPrimaryInt);
-		}
-
 		// Set the OnTabSelected listener.
 		this.mTabLayout.addOnTabSelectedListener(this);
 
@@ -157,26 +184,8 @@ public void addTabItemInController(TabProxy tabProxy)
 		// Add the new tab to the TabLayout.
 		this.mTabLayout.addTab(newTab, false);
 
-		// Create a background drawable with ripple effect for the state used by TabLayout.Tab.
-		Drawable backgroundDrawable = createBackgroundDrawableForState(tabProxy, android.R.attr.state_selected);
-
-		// Go through the layout to set the background color state drawable manually for each tab.
-		// Currently we support only the default type of TabLayout which has a SlidingTabStrip.
-		try {
-			LinearLayout stripLayout = ((LinearLayout) this.mTabLayout.getChildAt(0));
-			// Get the just added TabView as a LinearLayout in order to set the background.
-			LinearLayout tabLL = ((LinearLayout) stripLayout.getChildAt(this.mTabLayout.getTabCount() - 1));
-			tabLL.setBackground(backgroundDrawable);
-			// Set the TextView textColor.
-			for (int i = 0; i < tabLL.getChildCount(); i++) {
-				if (tabLL.getChildAt(i) instanceof TextView) {
-					((TextView) tabLL.getChildAt(i))
-						.setTextColor(textColorStateList(tabProxy, android.R.attr.state_selected));
-				}
-			}
-		} catch (Exception e) {
-			Log.w(TAG, WARNING_LAYOUT_MESSAGE);
-		}
+		// Set the drawables for the most recently added Tab.
+		setDrawablesForTab(this.mTabLayout.getTabCount() - 1);
 	}
 
 	/**
@@ -204,15 +213,19 @@ public void selectTabItemInController(int position)
 		this.mTabLayout.addOnTabSelectedListener(this);
 	}
 
-	/**
-	 * Set the background drawable for TabLayout.
-	 *
-	 * @param drawable the new background drawable.
-	 */
 	@Override
-	public void setBackgroundDrawable(Drawable drawable)
+	public void setBackgroundColor(int colorInt)
 	{
-		this.mTabLayout.setBackground(drawable);
+		this.mTabLayout.setBackgroundColor(colorInt);
+	}
+
+	@Override
+	public void setDrawables()
+	{
+		ArrayList<TabProxy> tabProxiesList = ((TabGroupProxy) this.proxy).getTabList();
+		for (TabProxy tabProxy : tabProxiesList) {
+			setDrawablesForTab(tabProxiesList.indexOf(tabProxy));
+		}
 	}
 
 	/**