Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-28434

Android: Toolbar "items" do not update when changing dark/light theme

    Details

      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:

      1. Build and run the below code on Android 10 or higher.
      2. Tap on the "Home" button after app launches. (Do NOT back out.)
      3. Go to the Android system Settings -> Display screen.
      4. Toggle the dark/light theme switch.
      5. Resume the app.
      6. Notice app UI changed colors except for the button text color in toolbar.
      7. Back out of the app and then relaunch it.
      8. 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.

      Expected Result:
      The button text color should be light blue when using the dark theme.

      Notes:

      1. This is only an issue when changing theme dynamically. Backing out of the app/window and then relaunching it will show the correct colors.
      2. 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

          Activity

            People

            • Assignee:
              jquick Joshua Quick
              Reporter:
              jquick Joshua Quick
              Reviewer:
              Gary Mathews
            • Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                  Git Integration