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

android/app/build.gradle

@@ -85,4 +85,5 @@ dependencies {
 	}
 
 	implementation "androidx.appcompat:appcompat:${project.ext.tiAndroidXAppCompatLibVersion}"
+	implementation "com.google.android.material:material:${project.ext.tiMaterialLibVersion}"
 }

android/app/src/main/AndroidManifest.xml

@@ -7,7 +7,7 @@
 	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
 	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
 	<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
-	<application android:name=".TitaniumTestApplication" android:icon="@drawable/appicon" android:label="TitaniumTest" android:theme="@style/Theme.AppCompat" android:usesCleartextTraffic="true">
+	<application android:name=".TitaniumTestApplication" android:icon="@drawable/appicon" android:label="TitaniumTest" android:theme="@style/Theme.MaterialComponents.Bridge" android:usesCleartextTraffic="true">
 		<activity android:name=".TitaniumTestActivity" android:theme="@style/Theme.Titanium" android:alwaysRetainTaskState="true" android:configChanges="${tiActivityConfigChanges}">
 			<intent-filter>
 				<action android:name="android.intent.action.MAIN"/>

android/cli/commands/_build.js

@@ -1658,6 +1658,14 @@ AndroidBuilder.prototype.initialize = async function initialize() {
 	const loadFromSDCardProp = this.tiapp.properties['ti.android.loadfromsdcard'];
 	this.loadFromSDCard = loadFromSDCardProp && loadFromSDCardProp.value === true;
 
+	// Set default theme to be used in "AndroidManifest.xml" and style resources.
+	this.defaultAppThemeName = 'Theme.MaterialComponents.Bridge';
+	if (this.tiapp.fullscreen || this.tiapp['statusbar-hidden']) {
+		this.defaultAppThemeName = 'Theme.MaterialComponents.Fullscreen.Bridge';
+	} else if (this.tiapp['navbar-hidden']) {
+		this.defaultAppThemeName = 'Theme.MaterialComponents.NoActionBar.Bridge';
+	}
+
 	// Array of gradle/maven compatible library reference names the app project depends on.
 	// Formatted as: "<group.id>:<artifact-id>:<version>"
 	// Example: "com.google.android.gms:play-services-base:11.0.4"
@@ -3409,20 +3417,16 @@ AndroidBuilder.prototype.generateTheme = async function generateTheme() {
 	const xmlFilePath = path.join(valuesDirPath, 'ti_styles.xml');
 	this.logger.info(__('Generating theme file: %s', xmlFilePath.cyan));
 
-	// Set up all "Base.Theme.Titanium.Basic" inherited themed activities to be fullscreen if enabled in "tiapp.xml".
-	let basicParentThemeName = 'Theme.AppCompat';
-	if (this.tiapp.fullscreen || this.tiapp['statusbar-hidden']) {
-		basicParentThemeName += '.Fullscreen';
-	}
-
-	// Set up all "Base.Theme.Titanium.Customizable" inherited themes to use one of the following:
-	// - The custom theme applied to the <application/> element in "AndroidManifest.xml".
-	// - The above fullsceen enabled basic theme if custom theme was not applied.
-	let customizableParentThemeName = basicParentThemeName;
+	// Set up "Base.Theme.Titanium.Customizable" inherited themes to use <application/> defined theme, if provided.
+	// Note: Do not assign it if set to a Titanium theme, which would cause a circular reference.
+	let customizableParentThemeName = this.defaultAppThemeName;
 	if (this.customAndroidManifest) {
-		let appTheme = this.customAndroidManifest.getAppAttribute('android:theme');
-		if (appTheme && appTheme.startsWith('@style/') && (appTheme !== '@style/Theme.Titanium.Translucent')) {
-			customizableParentThemeName = appTheme.replace('@style/', '');
+		const appTheme = this.customAndroidManifest.getAppAttribute('android:theme');
+		if (appTheme) {
+			const appThemeWithoutPrefix = appTheme.replace('@style/', '');
+			if (!appThemeWithoutPrefix.startsWith('Theme.Titanium') && !appThemeWithoutPrefix.startsWith('Base.Theme.Titanium')) {
+				customizableParentThemeName = appTheme;
+			}
 		}
 	}
 
@@ -3431,7 +3435,7 @@ AndroidBuilder.prototype.generateTheme = async function generateTheme() {
 	let xmlLines = [
 		'<?xml version="1.0" encoding="utf-8"?>',
 		'<resources>',
-		`	<style name="Base.Theme.Titanium.Basic" parent="${basicParentThemeName}"/>`,
+		`	<style name="Base.Theme.Titanium.Basic" parent="${this.defaultAppThemeName}"/>`,
 		`	<style name="Base.Theme.Titanium.Customizable" parent="${customizableParentThemeName}"/>`,
 		'',
 		'	<!-- Theme used by "TiRootActivity" derived class which displays the splash screen. -->',
@@ -3558,15 +3562,6 @@ AndroidBuilder.prototype.generateAndroidManifest = async function generateAndroi
 		this.logger.warn(__n(message));
 	}
 
-	// Choose app theme to be used by all activities depending on following "tiapp.xml" settings.
-	let appThemeName = '@style/Theme.AppCompat';
-	if (this.tiapp.fullscreen || this.tiapp['statusbar-hidden'] || this.tiapp['navbar-hidden']) {
-		appThemeName += '.NoTitleBar';
-		if (this.tiapp.fullscreen || this.tiapp['statusbar-hidden']) {
-			appThemeName += '.Fullscreen';
-		}
-	}
-
 	// Generate all XML lines to be added as children within the manifest's <application/> block.
 	const appChildXmlLines = [];
 	if (this.tiapp.android) {
@@ -3637,7 +3632,7 @@ AndroidBuilder.prototype.generateAndroidManifest = async function generateAndroi
 		appChildXmlLines: appChildXmlLines,
 		appIcon: '@drawable/' + this.tiapp.icon.replace(/((\.9)?\.(png|jpg))$/, ''),
 		appLabel: this.tiapp.name,
-		appTheme: appThemeName,
+		appTheme: `@style/${this.defaultAppThemeName}`,
 		classname: this.classname,
 		packageName: this.appid
 	});

android/cli/tests/test-android-manifest.js

@@ -27,8 +27,8 @@ describe('AndroidManifest', () => {
 	it('set/getAppAttribute()', () => {
 		const manifest = new AndroidManifest();
 		manifest.setAppAttribute('android:icon', '@drawable/app_icon');
-		manifest.setAppAttribute('android:theme', '@style/Theme.AppCompat');
+		manifest.setAppAttribute('android:theme', '@style/Theme.MaterialComponents.Bridge');
 		expect(manifest.getAppAttribute('android:icon')).to.equal('@drawable/app_icon');
-		expect(manifest.getAppAttribute('android:theme')).to.equal('@style/Theme.AppCompat');
+		expect(manifest.getAppAttribute('android:theme')).to.equal('@style/Theme.MaterialComponents.Bridge');
 	});
 });

android/modules/ui/res/layout/titanium_ui_drawer_layout.xml

@@ -17,7 +17,7 @@
                android:layout_width="match_parent"
                android:minHeight="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
-               app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
+               app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"/>
 
            <org.appcelerator.titanium.view.TiCompositeLayout
                android:layout_width="match_parent"

android/modules/ui/res/layout/titanium_ui_toolbar.xml

@@ -7,5 +7,5 @@
     android:layout_width="match_parent"
     android:minHeight="?attr/actionBarSize"
     android:background="?attr/colorPrimary"
-    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
+    app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"
     android:fitsSystemWindows="true"/>

android/templates/app/angular-default/template/platform/android/res/values/styles.xml

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="TitaniumAngular" parent="Theme.AppCompat.Light.DarkActionBar">
+    <style name="TitaniumAngular" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
         <item name="colorPrimary">@color/angularBlue</item>
         <item name="colorPrimaryDark">@color/angularDarkBlue</item>
         <item name="colorAccent">@color/angularRed</item>
         <item name="android:windowBackground">@color/windowBackground</item>
         <item name="android:textColor">#444</item>
-	</style>
+    </style>
 </resources>

android/templates/app/webpack-default/template/platform/android/res/values/styles.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
         <!-- Customize your theme here. -->
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

android/titanium/AndroidManifest.xml

@@ -11,11 +11,11 @@
 		<activity
 			android:name="ti.modules.titanium.media.TiCameraActivity"
 			android:configChanges="${tiActivityConfigChanges}"
-			android:theme="@style/Theme.AppCompat.Translucent.NoTitleBar.Fullscreen"/>
+			android:theme="@style/Theme.Titanium.Translucent.Fullscreen"/>
 		<activity
 			android:name="ti.modules.titanium.media.TiVideoActivity"
 			android:configChanges="${tiActivityConfigChanges}"
-			android:theme="@style/Theme.AppCompat.Fullscreen"/>
+			android:theme="@style/Theme.Titanium.Fullscreen"/>
 		<activity android:name="ti.modules.titanium.ui.android.TiPreferencesActivity"/>
 
 		<provider

android/titanium/res/values/values.xml

@@ -1,67 +1,114 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-	<!-- Base theme applied to all Titanium transluent windows and splash activity. -->
-	<!-- Our "_build.js" script will replace it with ".Fullscreen" theme if set in "tiapp.xml" file. -->
-	<style name="Base.Theme.Titanium.Basic" parent="Theme.AppCompat"/>
+	<!-- Base theme applied to Titanium's splash screen activity. -->
+	<!-- Our "_build.js" will replace it with ".NoActionBar" or ".Fullscreen" theme if set in "tiapp.xml" file. -->
+	<style name="Base.Theme.Titanium.Basic" parent="Theme.MaterialComponents.Bridge"/>
 
 	<!-- Base theme applied to all Titanium opaque windows. -->
 	<!-- Our "_build.js" script will replace it if custom theme is applied to application in manifest. -->
 	<style name="Base.Theme.Titanium.Customizable" parent="Theme.AppCompat"/>
 
 	<!-- Base theme to be used by the "TiRootActivity" class. -->
-	<style name="Base.Theme.Titanium.Splash" parent="@style/Base.Theme.Titanium.Basic">
+	<style name="Base.Theme.Titanium.Splash" parent="Base.Theme.Titanium.Basic">
 		<item name="android:windowActionBar">false</item>
 		<item name="android:windowNoTitle">true</item>
 		<item name="windowActionBar">false</item>
 		<item name="windowNoTitle">true</item>
 	</style>
 
-	<style name="Theme.AppCompat.NoTitleBar">
-		<item name="android:windowNoTitle">true</item>
+	<!-- Theme to be replaced by app project and have a "windowBackground" image applied to it. -->
+	<!-- Our Android "_build.js" script will replace this theme via the generateTheme() method. -->
+	<style name="Theme.Titanium" parent="Base.Theme.Titanium.Splash"/>
+
+	<!-- Activity theme used to remove top title bar, but keeps status bar and app theme. -->
+	<style name="Theme.Titanium.NoTitleBar" parent="Base.Theme.Titanium.Customizable">
+		<item name="android:windowActionBar">false</item>
 		<item name="android:windowContentOverlay">@null</item>
+		<item name="android:windowNoTitle">true</item>
+		<item name="windowActionBar">false</item>
+		<item name="windowNoTitle">true</item>
+	</style>
+
+	<!-- Activity theme used to remove top status bar and title bar while preserving app theme. -->
+	<style name="Theme.Titanium.Fullscreen" parent="Theme.Titanium.NoTitleBar">
+		<item name="android:windowFullscreen">true</item>
+	</style>
+
+	<!-- Activity theme applying transparent background while preserving app theme. -->
+	<style name="Theme.Titanium.Translucent" parent="Base.Theme.Titanium.Customizable">
+		<item name="android:colorBackgroundCacheHint">@null</item>
+		<item name="android:windowAnimationStyle">@null</item>
+		<item name="android:windowBackground">@android:color/transparent</item>
+		<item name="android:windowIsTranslucent">true</item>
+	</style>
+
+	<!-- Activity theme applying transparent background and removes title bar, while preserving app theme. -->
+	<style name="Theme.Titanium.Translucent.NoTitleBar" parent="Theme.Titanium.Translucent">
 		<item name="android:windowActionBar">false</item>
-		<!-- AppCompat Compatibility -->
+		<item name="android:windowContentOverlay">@null</item>
+		<item name="android:windowNoTitle">true</item>
 		<item name="windowActionBar">false</item>
 		<item name="windowNoTitle">true</item>
 	</style>
 
-	<style name="Theme.AppCompat.NoTitleBar.Fullscreen">
+	<!-- Activity theme with transparent background, removes status bar and title bar while preserving app theme. -->
+	<style name="Theme.Titanium.Translucent.Fullscreen" parent="Theme.Titanium.Translucent.NoTitleBar">
 		<item name="android:windowFullscreen">true</item>
 	</style>
 
-	<style name="Theme.AppCompat.Fullscreen" parent="@style/Theme.AppCompat.NoTitleBar.Fullscreen"/>
+	<!-- Inherits Google's "Theme.MaterialComponents.Bridge" and removes top status and title bar. -->
+	<style name="Theme.MaterialComponents.Fullscreen.Bridge" parent="Theme.MaterialComponents.Bridge">
+		<item name="android:windowActionBar">false</item>
+		<item name="android:windowContentOverlay">@null</item>
+		<item name="android:windowFullscreen">true</item>
+		<item name="android:windowNoTitle">true</item>
+		<item name="windowActionBar">false</item>
+		<item name="windowNoTitle">true</item>
+	</style>
 
-	<!-- Theme to be replaced by app project and have a "windowBackground" image applied to it. -->
-	<!-- Our Android "_build.js" script will replace this theme via the generateTheme() method. -->
-	<style name="Theme.Titanium" parent="@style/Base.Theme.Titanium.Splash"/>
+	<!-- Google's dark AppCompat activity theme without a top title bar. -->
+	<!-- DEPRECATED: Should use MaterialComponents theme instead in order to use material widgets. -->
+	<style name="Theme.AppCompat.NoTitleBar" parent="Theme.AppCompat">
+		<item name="android:windowActionBar">false</item>
+		<item name="android:windowContentOverlay">@null</item>
+		<item name="android:windowNoTitle">true</item>
+		<item name="windowActionBar">false</item>
+		<item name="windowNoTitle">true</item>
+	</style>
 
-	<!-- Theme to be used by Titanium's translucent windows and modal windows. -->
-	<style name="Theme.Titanium.Translucent" parent="@style/Base.Theme.Titanium.Customizable">
-		<item name="android:windowBackground">@android:color/transparent</item>
-		<item name="android:colorBackgroundCacheHint">@null</item>
-		<item name="android:windowIsTranslucent">true</item>
-		<item name="android:windowAnimationStyle">@android:style/Animation</item>
+	<!-- Google's dark AppCompat activity theme without a top status bar and title bar. -->
+	<!-- DEPRECATED: Should use MaterialComponents theme instead in order to use material widgets. -->
+	<style name="Theme.AppCompat.NoTitleBar.Fullscreen" parent="Theme.AppCompat.NoTitleBar">
+		<item name="android:windowFullscreen">true</item>
 	</style>
 
-	<style name="Theme.AppCompat.Translucent" parent="@style/Base.Theme.Titanium.Basic">
+	<!-- Google's dark AppCompat activity theme without a top status bar and title bar. -->
+	<!-- DEPRECATED: Should use MaterialComponents theme instead in order to use material widgets. -->
+	<style name="Theme.AppCompat.Fullscreen" parent="Theme.AppCompat.NoTitleBar.Fullscreen"/>
+
+	<!-- Google's dark AppCompat activity theme with a transparent background. -->
+	<!-- DEPRECATED: Should use MaterialComponents theme instead in order to use material widgets. -->
+	<style name="Theme.AppCompat.Translucent" parent="Theme.AppCompat">
 		<item name="android:windowBackground">@android:color/transparent</item>
 		<item name="android:colorBackgroundCacheHint">@null</item>
 		<item name="android:windowIsTranslucent">true</item>
 		<item name="android:actionBarStyle">@style/Base.Widget.AppCompat.ActionBar.Solid</item>
-		<!-- AppCompat Compatibility -->
 		<item name="actionBarStyle">@style/Base.Widget.AppCompat.ActionBar.Solid</item>
 	</style>
-	
-	<style name="Theme.AppCompat.Translucent.NoTitleBar">
-		<item name="android:windowNoTitle">true</item>
-		<item name="android:windowContentOverlay">@null</item>
+
+	<!-- Google's dark AppCompat activity theme with a transparent background without a title bar. -->
+	<!-- DEPRECATED: Should use MaterialComponents theme instead in order to use material widgets. -->
+	<style name="Theme.AppCompat.Translucent.NoTitleBar" parent="Theme.AppCompat.Translucent">
 		<item name="android:windowActionBar">false</item>
-		<!-- AppCompat Compatibility -->
+		<item name="android:windowContentOverlay">@null</item>
+		<item name="android:windowNoTitle">true</item>
 		<item name="windowActionBar">false</item>
 		<item name="windowNoTitle">true</item>
 	</style>
-
-	<style name="Theme.AppCompat.Translucent.NoTitleBar.Fullscreen">
+
+	<!-- Google's dark AppCompat activity theme with a transparent background without a status bar and title bar. -->
+	<!-- DEPRECATED: Should use MaterialComponents theme instead in order to use material widgets. -->
+	<style name="Theme.AppCompat.Translucent.NoTitleBar.Fullscreen" parent="Theme.AppCompat.Translucent.NoTitleBar">
 		<item name="android:windowFullscreen">true</item>
 	</style>
 </resources>

android/titanium/src/java/org/appcelerator/titanium/TiBaseActivity.java

@@ -774,9 +774,10 @@ private void setCustomActionBar()
 				String message
 					= "You cannot use a Toolbar as an ActionBar if the current theme has an ActionBar.\n"
 					+ "You must set 'windowActionBar' to false in your theme or use one of the following themes:\n"
-					+ "- Theme.Titanium\n"
-					+ "- Theme.AppCompat.Translucent.NoTitleBar\n"
-					+ "- Theme.AppCompat.NoTitleBar";
+					+ "- Theme.Titanium.NoTitleBar\n"
+					+ "- Theme.Titanium.Fullscreen\n"
+					+ "- Theme.Titanium.Translucent.NoTitleBar\n"
+					+ "- Theme.Titanium.Translucent.Fullscreen";
 				Log.e(TAG, message);
 				TiApplication.terminateActivityStack();
 				finish();

apidoc/Titanium/UI/TextArea.yml

@@ -299,15 +299,15 @@ properties:
     platforms: [android]
     since: 4.1.0
     description: |
-        Hint text color in Android is determined by the theme of the application. By default, the
-        theme is `Theme.AppCompat` which is a Dark theme. When you create the background to be white,
+        Hint text color in Android is determined by the theme of the application.
+        By default, a Titanium app uses a Dark theme. When you create the background to be white,
         the hint text color would also be white, hence not visible to the user. To change this, you can
-        edit the tiapp.xml file with another theme. Example as follows:
+        edit the "tiapp.xml" file with another theme. Example as follows:
 
         ``` xml
         <android xmlns:android="http://schemas.android.com/apk/res/android">
             <manifest>
-                <application android:theme="@style/Theme.AppCompat.Light"/>
+                <application android:theme="@style/Theme.MaterialComponents.Light.Bridge"/>
             </manifest>
         </android>
         ```

apidoc/Titanium/UI/TextField.yml

@@ -310,15 +310,15 @@ properties:
         used that defines the `android:textColorHint` attribute.
 
         **Android Note**:
-        The hint text color in Android is determined by the theme of the application. By default, the
-        theme is 'Theme.AppCompat' which is a Dark theme. When you create the background to be white,
+        The hint text color in Android is determined by the theme of the application.
+        By default, a Titanium app uses a Dark theme. When you create the background to be white,
         the hint text color would also be white, hence not visible to the user. To change this, you can
         edit the tiapp.xml file with another theme. Example as follows:
 
         ``` xml
         <android xmlns:android="http://schemas.android.com/apk/res/android">
             <manifest>
-                <application android:theme="@style/Theme.AppCompat.Light"/>
+                <application android:theme="@style/Theme.MaterialComponents.Light.Bridge"/>
             </manifest>
         </android>
         ```

apidoc/Titanium/UI/Toolbar.yml

@@ -23,8 +23,8 @@ description: |
     On Android a toolbar can also be used as an ActionBar for [activities](Titanium.Android.Activity). This allows a toolbar to
     inherit [ActionBar's](Titanium.Android.ActionBar) methods, properties and events as well as provide a better customization of this
     design element. For example you can provide your own images to be used as navigation button icon, overflow menu icon and logo.
-    In order to do that, an application must be using Theme.AppCompat.NoTitleBar.
-    It can be set in the tiapp.xml file of the application.
+    In order to do that, an application must use a theme without a title bar. For Titanium 9.3.0 and higher,
+    set the theme to `Theme.Titanium.NoTitleBar`. For older Titanium versions, set the theme to `Theme.AppCompat.NoTitleBar`.
 
     See also: