chore(android): improve TabGroup material color and ripple handling

[jquick-axway]

JIRA:
https://jira.appcelerator.org/browse/TIMOB-28301

Summary:

• Modified default unselected tint colors to use 60% opacity based on Google's docs: here
• Now uses activeTintColor as ripple color if defined.
  • Will default to colorPrimary if not defined, which is what it was defaulting to before.
• No longer overrides default drawable/ripple behaviors unless a color property is defined in TabGroup/Tab:
  • Allows top tab style to show selection animation where underline moves to selected tab.
  • Allows bottom tab style to show centered ripple animation.
• Updated docs to indicate the following properties only apply to the bottom tab style.
  • Ti.UI.TabGroup.tabsBackgroundSelectedColor
  • Ti.UI.Tab.backgroundFocusedColor

---

TabGroup Default Theme Test:

1. Create a Classic Titanium project from template. (Comes with tab icons needed by below code.)
2. Use below code as app.js and build and run on Android.
3. Verify selected tab shows blue icon with blue text.
4. Verify unselected tabs show gray icon with gray text. (Used to be black.)
5. Verify tapping on a tap shows a blue ripple effect.
6. Uncomment the below line of code and rebuild.
   // style: OS_ANDROID ? Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION : null,
7. Repeat steps 3-5 for bottom tab style.

function createTab(title, icon, activeColor) {
	const window = Ti.UI.createWindow({ title: title });
	window.add(Ti.UI.createLabel({ text: title + " View" }));
	const tab = Ti.UI.createTab({
		title: title,
		icon: icon,
		window: window,
	});
	return tab;
}
const tabGroup = Ti.UI.createTabGroup({
	tabs: [
		createTab("Tab 1", "/assets/images/tab1.png"),
		createTab("Tab 2", "/assets/images/tab2.png"),
		createTab("Tab 3", "/assets/images/tab1.png"),
	],
	shiftMode: false,
//	style: OS_ANDROID ? Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION : null,
});
tabGroup.open();

---

TabGroup Shared Custom Colors Test:

1. Create a Class Titanium project from template. (Comes with tab icons needed by below code.)
2. Use below code as app.js and build and run on Android.
3. Verify "top" tabs are green as shown in below screenshot.
4. Verify tapping on tabs show a green ripple and a green underline under selected tab.
5. Uncomment the below line of code and rebuild.
   // style: OS_ANDROID ? Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION : null,
6. Verify "bottom" tabs are green as shown in below screenshot.
7. Verify tapping on tabs show a green ripple and selected tab shows light green color. (Bottom tab feature only.)

function createTab(title, icon) {
	const window = Ti.UI.createWindow({ title: title });
	window.add(Ti.UI.createLabel({ text: title + " View" }));
	const tab = Ti.UI.createTab({
		title: title,
		icon: icon,
		window: window,
	});
	return tab;
}
const tabGroup = Ti.UI.createTabGroup({
	tabs: [
		createTab("Tab 1", "/assets/images/tab1.png"),
		createTab("Tab 2", "/assets/images/tab2.png"),
		createTab("Tab 3", "/assets/images/tab1.png")
	],
	activeTintColor: "#88AA88",
	activeTitleColor: "#88AA88",
	tintColor: "gray",
	titleColor: "gray",
	tabsBackgroundColor: "#DDFFDD",
	tabsBackgroundSelectedColor: "#EEFFEE",
	shiftMode: false,
//	style: OS_ANDROID ? Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION : null,
});
tabGroup.open();

---

TabGroup Custom Tab Colors Test:

1. Create a Class Titanium project from template. (Comes with tab icons needed by below code.)
2. Use below code as app.js and build and run on Android.
3. Verify tapping on "Tab 1" makes its icon red and shows a red tap ripple effect.
4. Verify tapping on "Tab 2" makes its icon green and shows a green tap ripple effect.
5. Verify tapping on "Tab 3" makes its icon blue and shows a blue tap ripple effect.
6. Uncomment the below line of code and rebuild.
   // style: OS_ANDROID ? Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION : null,
7. Repeat steps 3-5 for the bottom tab style.

function createTab(title, icon, activeColor) {
	const window = Ti.UI.createWindow({ title: title });
	window.add(Ti.UI.createLabel({ text: title + " View" }));
	const tab = Ti.UI.createTab({
		title: title,
		icon: icon,
		activeTintColor: activeColor,
		activeTitleColor: activeColor,
		window: window,
	});
	return tab;
}
const tabGroup = Ti.UI.createTabGroup({
	tabs: [
		createTab("Tab 1", "/assets/images/tab1.png", "#FF4444"),
		createTab("Tab 2", "/assets/images/tab2.png", "#44FF44"),
		createTab("Tab 3", "/assets/images/tab1.png", "#4444FF"),
	],
	shiftMode: false,
//	style: OS_ANDROID ? Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION : null,
});
tabGroup.open();

[build]

	Fails
🚫	Tests have failed, see below for more information.
🚫	Test suite crashed on iOS simulator. Please see the crash log for more details.

	Messages
📖	✊ The commits in this PR match our conventions! Feel free to Rebase and Merge this PR when ready.
📖	❌ 5 tests have failed There are 5 tests failing and 513 skipped out of 8246 total tests.

Tests:

Classname	Name	Time	Error
android.emulator.Titanium.UI.NavigationWindow	basic open/close navigation (5.0.2)	10.025	Error: Timeout of 10000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (app.js)
android.emulator.Titanium.UI.Window	window_navigation (5.0.2)	30.043	Error: Timeout of 30000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (app.js)
android.emulator.Titanium.UI.View	"after all" hook for "rgba fallback" (5.0.2)	21.571	Error: Timeout of 10000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (app.js)
android.emulator.Titanium.UI.View	"after each" hook for "getOrCreateView() should always return a View" (5.0.2)	11.538	Error: Timeout of 10000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (app.js)
ios.macos.Titanium.Filesystem.File	.remoteBackup assigning Boolean value doesn't throw (10.15.5)	2.75	Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (app.js) run@file:///ti.main.js:8744:22 processImmediateQueue@file:///ti.main.js:8807:18 drainQueues@file:///ti.main.js:8784:52

Generated by 🚫 dangerJS against ec4a2be

[garymathews]

CR: PASS

[lokeshchdhry]

FR Passed.

[build]

The backport to 10_0_X failed:

The process 'git' failed with exit code 128

Check the run for full details
To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Check out the target branch
git checkout 10_0_X
# Make sure it's up to date
git pull
# Check out your branch
git checkout -b backport-12679-to-10_0_X
# Apply the commits from the PR
curl -s https://github.com/appcelerator/titanium_mobile/commit/9481df6a3fc8584aff4a6932fb1cfdf6ada56057.patch | git am -3 --ignore-whitespace
curl -s https://github.com/appcelerator/titanium_mobile/commit/524d5fb233d938625ae4c31e86ac632aeed37335.patch | git am -3 --ignore-whitespace
# Push it to GitHub
git push --set-upstream origin backport-12679-to-10_0_X

Then, create a pull request where the base branch is 10_0_X and the compare/head branch is backport-12679-to-10_0_X.