Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28577] Android: StatusBar/NavBar icons may be wrongly dark if window "theme" is set and app uses Titanium "Solid" light theme

GitHub Issuen/a
TypeBug
PriorityMedium
StatusIn Review
ResolutionUnresolved
Affected Version/sRelease 10.1.0
Fix Version/sRelease 10.2.0
ComponentsAndroid
Labelsandroid, theme
ReporterJoshua Quick
AssigneeJoshua Quick
Created2021-11-06T03:05:40.000+0000
Updated2021-11-06T03:21:12.000+0000

Description

*Summary:* When setting a Ti.UI.Window "theme" property to a dark theme, the status bar and navigation bar icons may wrongly be dark if app uses the Theme.Titanium.DayNight.Solid or Theme.Titanium.Light.Solid. This means dark icons may appear on a dark background, making them hard to see. Titanium's "Solid" themes are used by default as of Titanium 10.1.0. *Steps to reproduce:*

Set up an Android device to "Light" mode. (Not dark mode.)

Build and run the below code on that device.

Tap on the "Theme.Titanium.Dark" button.

Notice status bar and nav bar icons are wrongly dark on a dark black background.

Navigate back to parent window.

Tap on the "Theme.Titanium.Dark.Solid" button.

Notice status bar and nav bar icons are wrongly dark on a dark gray background.

Navigate back to parent window.

Tap on the "Theme.Titanium.Light" button.

Notice status bar and nav bar icons are wrongly dark on a dark blue background.

const parentWindow = Ti.UI.createWindow({
	title: "Select Child Theme",
	extendSafeArea: false,
});
const tableView = Ti.UI.createTableView({
	data: [
		Ti.UI.createTableViewRow({ title: "Theme.Titanium.Dark" }),
		Ti.UI.createTableViewRow({ title: "Theme.Titanium.Dark.Solid" }),
		Ti.UI.createTableViewRow({ title: "Theme.Titanium.Light" }),
		Ti.UI.createTableViewRow({ title: "Theme.Titanium.Light.Solid" }),
	],
});
tableView.addEventListener("click", (e) => {
	const childWindow = Ti.UI.createWindow({
		title: e.row.title,
		theme: e.row.title,
	});
	const closeButton = Ti.UI.createButton({ title: "Close" });
	closeButton.addEventListener("click", () => {
		childWindow.close();
	});
	childWindow.add(closeButton);
	childWindow.open();
});
parentWindow.add(tableView);
parentWindow.open();
*Cause:* The Ti.UI.Window "theme" property acts like an "overlay" and copies the theme's setting on top of the application's theme settings. The above test case's themes that have this dark icon issue do not set the android:windowLightStatusBar and android:windowLightNavigationBar attributes to false and end up wrongly inheriting the app's theme which sets these attributes to true. The solution is to set this attribute in all Titanium themes to avoid this issue.

Comments

  1. Joshua Quick 2021-11-06

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

JSON Source