[TIMOB-28576] Android: ProgressIndicator dialog does not use material "colorPrimary"

GitHub Issue	n/a
Type	Bug
Priority	Low
Status	Closed
Resolution	Fixed
Resolution Date	2021-11-05T23:55:11.000+0000
Affected Version/s	Release 10.0.0
Fix Version/s	Release 10.2.0
Components	Android
Labels	ProgressIndicator, android, progress, theme
Reporter	Joshua Quick
Assignee	Joshua Quick
Created	2021-11-05T04:54:01.000+0000
Updated	2021-11-05T23:55:14.000+0000

Description

*Summary:* As of Titanium 10.0.0, all UI was changed to use the material theme/widgets. The [Ti.UI.Android.ProgressIndicator](https://titaniumsdk.com/api/titanium/ui/android/progressindicator.html) dialog still wrongly uses a dark green color from the Holo Dark theme when it should use colorPrimary according to Google's material theme guidelines. https://material.io/components/progress-indicators/android#using-progress-indicators *Note:* This is not an issue with the [Ti.UI.ProgressBar](https://titaniumsdk.com/api/titanium/ui/progressbar.html) view. *Steps to reproduce:*

Build and run the below code on Android.

Tap on the "Show Determinate Progress" button.

Notice the progress bar is green instead of blue.

Tap on the "Show Indeterminate Progress" button.

Notice the progress circle is green instead of blue.

const window = Ti.UI.createWindow({ layout: "vertical" });
const button1 = Ti.UI.createButton({
	title: "Show Determinant Progress",
	top: 40,
});
button1.addEventListener("click", () => {
	const dialog = Ti.UI.Android.createProgressIndicator({
		message: "Loading...",
		value: 0,
		min: 0,
		max: 100,
		location: Ti.UI.Android.PROGRESS_INDICATOR_DIALOG,
		type: Ti.UI.Android.PROGRESS_INDICATOR_DETERMINANT,
	});
	dialog.show();
	const timerId = setInterval(() => {
		if (dialog.value < dialog.max) {
			dialog.value++;
		} else {
			dialog.hide();
			clearInterval(timerId);
		}
	}, 50);
});
window.add(button1);
const button2 = Ti.UI.createButton({
	title: "Show Indeterminant Progress",
	top: 40,
});
button2.addEventListener("click", () => {
	const dialog = Ti.UI.Android.createProgressIndicator({
		message: "Loading...",
		location: Ti.UI.Android.PROGRESS_INDICATOR_DIALOG,
		type: Ti.UI.Android.PROGRESS_INDICATOR_INDETERMINANT,
	});
	dialog.show();
	setTimeout(() => {
		dialog.hide();
	}, 2000);
});
window.add(button2);
window.open();

*Result:* Progress bar wrongly uses the color green from the Holo Dark's theme. !Determinate-Bad.png|thumbnail! !Indeterminate-Bad.png|thumbnail! *Expected Result:* Progress bar should use theme's "colorPrimary" instead. !Determinate-Good.png|thumbnail! !Indeterminate-Good.png|thumbnail! *Work-Around:* Set the following color styles in your custom theme to change the dialog's progress bar color.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="MyTheme" parent="@style/Theme.Titanium.DayNight">
		<item name="android:indeterminateTint">?attr/colorPrimary</item>
		<item name="android:progressTint">?attr/colorPrimary</item>
	</style>
</resources>

Attachments

File	Date	Size
Determinate-Bad.png	2021-11-05T04:52:53.000+0000	432322
Determinate-Good.png	2021-11-05T04:52:53.000+0000	432372
Indeterminate-Bad.png	2021-11-05T04:52:53.000+0000	429130
Indeterminate-Good.png	2021-11-05T04:52:51.000+0000	429379

Comments

Joshua Quick 2021-11-05

PR (master): https://github.com/appcelerator/titanium_mobile/pull/13167

JSON Source