Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28434] Android: Toolbar "items" do not update when changing dark/light theme

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2021-05-24T15:00:44.000+0000
Affected Version/sRelease 10.0.0
Fix Version/sRelease 10.0.1
ComponentsAndroid
Labelsandroid, material-theme, toolbar
ReporterJoshua Quick
AssigneeJoshua Quick
Created2021-05-01T03:04:12.000+0000
Updated2021-05-24T15:00:44.000+0000

Description

*Summary:* Child views added to Ti.UI.Toolbar via its "items" property will not update themselves when changing the dark/light theme on Android. *Steps to reproduce:*

Build and run the below code on Android 10 or higher.

Tap on the "Home" button after app launches. _(Do NOT back out.)_

Go to the Android system Settings -> Display screen.

Toggle the dark/light theme switch.

Resume the app.

Notice app UI changed colors *except* for the button text color in toolbar.

Back out of the app and then relaunch it.

Notice the button text color in the toolbar uses the correct color.

function createButton(name) {
	const button = Ti.UI.createButton({
		title: name,
		style: Ti.UI.BUTTON_STYLE_OPTION_NEUTRAL,
	});
	button.addEventListener("click", function() {
		alert(name + " was clicked on.");
	});
	return button;
}

const window = Ti.UI.createWindow();
const toolbar = Ti.UI.createToolbar({
	items: [
		createButton("Button 1"),
		createButton("Button 2"),
		createButton("Button 3")
	],
	elevation: 2,
	top: 0,
	width: Ti.UI.FILL,
});
window.add(toolbar);
window.open();
*Result:* Notice the toolbar button text colors did not change when switching themes. !Toolbar-Light.png|thumbnail! !Toolbar-Dark-Bad.png|thumbnail! *Expected Result:* The button text color should be light blue when using the dark theme. !Toolbar-Dark-Good.png|thumbnail! *Notes:*

This is only an issue when changing theme dynamically. Backing out of the app/window and then relaunching it will show the correct colors.

This doesn't appear to be an issue in Alloy when adding child views to toolbar via XML. I've tested for this in our kitchensink-v2 app and it works fine.

*Work-Around:* Add child views to Ti.UI.Toolbar via its add() method instead of the "items" property. However, adding views like this on iOS will have layout issues making this an Android-only solution.
const toolbar = Ti.UI.createToolbar({
	elevation: 2,
	top: 0,
	width: Ti.UI.FILL,
});
toolbar.add(createButton("Button 1"));
toolbar.add(createButton("Button 2"));
toolbar.add(createButton("Button 3"));

Attachments

FileDateSize
Toolbar-Dark-Bad.png2021-05-01T02:59:46.000+0000409639
Toolbar-Dark-Good.png2021-05-01T02:59:46.000+0000410051
Toolbar-Light.png2021-05-01T02:59:46.000+0000412896

Comments

  1. Joshua Quick 2021-05-03

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/12765
  2. Christopher Williams 2021-05-24

    merged to master and 10_0_X branch for 10.0.1 target

JSON Source