feat(android)(9_3_X): use material theme by default

[jquick-axway]

JIRA:

• https://jira.appcelerator.org/browse/TIMOB-27714
• https://jira.appcelerator.org/browse/TIMOB-28084
• https://jira.appcelerator.org/browse/TIMOB-28087

Summary:

• TIMOB-27714 Changed default theme from Theme.AppCompat to Theme.MaterialComponents.Bridge.
  • The material bridge uses the same dark theme as AppCompat and adds the new material styles.
  • Material theme allows apps to use material widgets. Without it, these widgets will throw an exception.
• TIMOB-28084 Fixed bug where modal/translucent windows ignore "tiapp.xml" setting <navbar-hidden/>.
• TIMOB-28087 Added new themes which derive from <application/> assigned theme.
  • Theme.Titanium.NoTitleBar
  • Theme.Titanium.Fullscreen
  • Theme.Titanium.Translucent.NoTitleBar
  • Theme.Titanium.Translucent.Fullscreen
• Note that Theme.Titanium.Translucent already exists and works in the same manner.
• Deprecated Theme.AppCompat.* themes since material widgets require a material theme.
  • Should use above Theme.Titanium.* themes instead.

---

Default Material Theme Test:
This verifies TIMOB-27714 and TIMOB-28084.

1. Create a project with the below "app.js" code.
2. In "tiapp.xml", set the below properties to false.
3. Build and run for Android.
4. Verify that you see a status bar and a "Parent Window" title bar.
5. Tap on "Show Translucent Window" button.
6. Verify that you see a status bar and a "Translucent Window" title bar.
7. Open file: ./build/android/app/src/main/AndroidManifest.xml
8. Verify android:theme is set to "@style/Theme.MaterialComponents.Bridge".
9. Change "tiapp.xml" property <navbar-hidden/> to true.
10. Build and run for Android.
11. Verify that you see a status bar but no title bar.
12. Tap on "Show Translucent Window" button.
13. Verify you see a status bar and NO title bar in translucent window. (Verifies TIMOB-28084.)
14. Open file: ./build/android/app/src/main/AndroidManifest.xml
15. Verify android:theme is set to "@style/Theme.MaterialComponents.NoActionBar.Bridge".
16. Change "tiapp.xml" property <fullscreen/> to true.
17. Build and run for Android.
18. Verify that you do NOT see a status bar or title bar.
19. Tap on "Show Translucent Window" button.
20. Verify you do NOT see a status bar or title bar.
21. Open file: ./build/android/app/src/main/AndroidManifest.xml
22. Verify android:theme is set to "@style/Theme.MaterialComponents.Fullscreen.Bridge".

app.js

var parentWindow = Ti.UI.createWindow({
	title: "Parent Window",
	backgroundColor: "white",
});
var openButton = Ti.UI.createButton({
	title: "Show Translucent Window",
	bottom: "15dp",
});
openButton.addEventListener("click", function() {
	var childWindow = Ti.UI.createWindow({
		title: "Translucent Window",
		backgroundColor: "black",
		opacity: 0.5,
	});
	childWindow.add(Ti.UI.createLabel({
		text: "This is the translucent window.",
		color: "white",
	}));
	childWindow.open();
});
parentWindow.add(openButton);
parentWindow.open();

tiapp.xml

<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
	<fullscreen>false</fullscreen>
	<navbar-hidden>false</navbar-hidden>
	<statusbar-hidden>false</statusbar-hidden>
</ti:app>

---

Titanium Theme Test:
This verifies TIMOB-28087.

1. Create a Classic app project with below files.
2. Build and run on Android.
3. Verify top/bottom bars are red, background is white, and button is NOT all caps.
4. Tap on "No Theme" button.
5. Verify child window theme matches parent and close button is NOT all caps.
6. Tap on "Theme.Titanium.NoTitleBar" button.
7. Verify child window theme matches parent, title bar is NOT shown, and close button is NOT all caps.
8. Tap on "Theme.Titanium.Fullscreen" button.
9. Verify child window theme matches parent, status bar and title bar are NOT shown, and close button is NOT all caps.
10. Tap on "Theme.Titanium.Translucent" button.
11. Verify child window theme matches parent, background is semi-transparent, title bar is shown, and close button is NOT all caps.
12. Tap on "Theme.Titanium.Translucent.NoTitleBar" button.
13. Verify child window theme matches parent, background is semi-transparent, title bar is NOT shown, status bar is shown, and close button is NOT all caps.
14. Tap on "Theme.Titanium.Translucent.Fullscreen" button.
15. Verify child window theme matches parent, background is semi-transparent, status bar and title bar are NOT shown, and close button is NOT all caps.
16. Tap on "Theme.AppCompat" button.
17. Verify child window shows a dark theme and close button is all caps.

tiapp.xml

<?xml version="1.0" encoding="UTF-8"?>
<ti:app>
	<android>
		<manifest>
			<application android:theme="@style/MyTheme"/>
		</manifest>
	</android>
</ti:app>

./platform/android/res/values/my_theme.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources>
	<style name="MyTheme" parent="@style/Theme.MaterialComponents.Light.Bridge">
		<item name="colorPrimary">#c91326</item>
		<item name="colorAccent">#000000</item>
		<item name="android:textColorPrimary">#000000</item>
		<item name="android:statusBarColor">#c91326</item>
		<item name="android:navigationBarColor">#c91326</item>
		<item name="buttonStyle">@style/MyButtonStyle</item>
	</style>
	<style name="MyButtonStyle" parent="@style/Widget.AppCompat.Button">
		<item name="android:textAllCaps">false</item>
	</style>
</resources>

app.js

function createOpenWindowButtonForTheme(themeName) {
	var openButton = Ti.UI.createButton({
		title: themeName ? themeName : "No Theme",
		top: "10dp",
	});
	openButton.addEventListener("click", function() {
		var windowSettings = { title: "Child Window" };
		if (themeName) {
			windowSettings.theme = themeName;
			if (themeName.toLowerCase().indexOf('translucent') >= 0) {
				windowSettings.backgroundColor = "black";
				windowSettings.opacity = 0.5;
			}
		}
		var childWindow = Ti.UI.createWindow(windowSettings);
		childWindow.add(Ti.UI.createLabel({
			text: "Window Theme:\n" + openButton.title,
			textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
			color: "#c91326",
			font: { fontSize: 20, fontWeight: "bold" },
		}));
		var closeButton = Ti.UI.createButton({
			title: "Close",
			bottom: "20dp",
			right: "20dp",
		});
		closeButton.addEventListener("click", function() {
			childWindow.close();
		});
		childWindow.add(closeButton);
		childWindow.open();
	});
	return openButton;
}

var parentWindow = Ti.UI.createWindow({
	title: "Parent Window",
	layout: "vertical",
	extendSafeArea: false,
});
var scrollView = Ti.UI.createScrollView({
	layout: "vertical",
	scrollType: "vertical",
	width: Ti.UI.FILL,
	height: Ti.UI.FILL,
});
scrollView.add(createOpenWindowButtonForTheme(null));
scrollView.add(createOpenWindowButtonForTheme("Theme.Titanium.NoTitleBar"));
scrollView.add(createOpenWindowButtonForTheme("Theme.Titanium.Fullscreen"));
scrollView.add(createOpenWindowButtonForTheme("Theme.Titanium.Translucent"));
scrollView.add(createOpenWindowButtonForTheme("Theme.Titanium.Translucent.NoTitleBar"));
scrollView.add(createOpenWindowButtonForTheme("Theme.Titanium.Translucent.Fullscreen"));
scrollView.add(createOpenWindowButtonForTheme("Theme.AppCompat"));
parentWindow.add(scrollView);
parentWindow.open();

[build]

	Warnings
⚠️	tests/Resources/ti.ui.window.test.js#L61 - tests/Resources/ti.ui.window.test.js line 61 – Unexpected skipped mocha test. (mocha/no-skipped-tests)

	Messages
📖	✅ All tests are passing Nice one! All 4 tests are passing.
📖	✊ The commits in this PR match our conventions! Feel free to Rebase and Merge this PR when ready.

Generated by 🚫 dangerJS against b93d2a6

[hansemannn]

Can this cause breaking changes? I'm asking because we do a lot of theme-based styling of tint colors etc, where we override single AppCompat Widget instances (like Sliders and Tabs). I love this change, but just want to be sure we don't mess up during upgrade ✌️

[sgtcoolguy]

Generally looks good to me, but my understanding of the Android themes is minimal, so definitely @garymathews should take a look at those xml changes.

[jquick-axway]

@hansemannn, it's not a breaking-change since we're still using the older widgets. When we do switch over to the material based widgets such as MaterialButton, MaterialToolbar, MaterialAlertDialogBuilder, MaterialCardView, etc. then that would be a breaking-change because they require MaterialComponents derived themes which defines new styles... which yes you would likely need to customize on your end. We're thinking about switching over to the material based widgets in Titanium 10.0 which would be a breaking-change.

Would this be a huge pain in Titanium 10? Maybe... but I also know devs want to use the new material widget features. We'll figure something out.

For Titanium 9.3.0, this is backward compatible. And Google's material themes which end with .Bridge use the same color scheme as the old AppCompat themes because they derive from them.
https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md
https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/theme/res/values

If you want to use @m1ga tab badges feature in PR #11659, then I recommend that you change your custom app theme's parent from Theme.AppCompat.Light to Theme.MaterialComponents.Light.Bridge. It won't be a breaking-change in your app. It uses the same color scheme and defines the additional styles the badging feature needs.

[garymathews]

CR: PASS

Although, we will need to also update https://docs.appcelerator.com/platform/latest/#!/guide/Android_Themes

[ssjsamir]

FR Passed, tested using the two examples shown in description.

Test Environment

MacOS Big Sur: 11.0 Beta 7
Xcode: 12.0
Java Version: 1.8.0_242
Android NDK: 21.3.6528147
Node.js: 12.18.1
""NPM":"5.0.0","CLI":"8.1.1""
Pixel XL (10.0)