[TIMOB-17809] Android Theme is not used by widget when widget opens a new window

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Invalid
Resolution Date	2020-08-18T01:03:15.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	n/a
Labels	android, defect
Reporter	Adam
Assignee	Unknown
Created	2014-09-26T19:38:51.000+0000
Updated	2020-08-18T01:03:15.000+0000

Description

App is using a custom theme that defines the following:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
  <style name="MyTheme"  parent="@style/Theme.AppCompat.Light">

    <!-- Hides the title and action bar at the top -->
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
  </style>
</resources>

Subsequently, we have an in-house alloy widget that acts as a menu bar. It opens a separate window which should also have the title and action bar hidden based on the above theme. However, this is not the case. When the window opens, the action bar is present. We tried using:

function hideActionbar() {
  $.win.activity.actionBar.hide();
}

after the window opens, however this is not a great user experience. For a split second, the action bar is visible and the UI elements shift after it has hidden.

Comments

Shuo Liang 2014-09-28

HI, Can you please try to use a Titanium predefined themes.

   <android xmlns:android="http://schemas.android.com/apk/res/android">
       <manifest>
           <application android:theme="@style/Theme.Titanium"/>
       </manifest>
   </android>

Regards, Shuo

Adam 2014-09-28

Unfortunately, switching the theme to the Titanium one has no effect.
Shuo Liang 2014-09-28

Hi, Did this only happen the window is opened by widget, the normal window works well?
Adam 2014-09-28

Yes. All other windows are fine. When the widget opens a new window, the new window shows the activity bar when it shouldn't. The widget opens a new window on a click event. It's a dead simple setup.
Shuo Liang 2014-09-28

Can you please provide a simple test case about the widget that present your problem, that will be real helpful.

Adam 2014-09-28

I simply don't have the time at the moment to create a blank project. However, here is some stuff I have pulled out of our existing code base. It should be enough to piece together something for you to work with and reproduce this issue. It's very straightforward. Just make a widget that opens a window and you should be able to reproduce it. 1. Create alloy project with android theme as stated above. 2. Create a widget with the following:

   <!-- widget.xml -->
   <Alloy>
     <View id="menu" onTouchstart="doTouch" onTouchend="_toggle" >
       <ImageView id="menuIcon" />
     </View>
   </Alloy>

Widget.tss

   "#menu": {
     width: Ti.UI.SIZE,
     height: Ti.UI.SIZE
   },
   "#menuIcon": {
     image: "/images/com.mywidget.dotMenu/menu-options-wide-white.png"
   }

   // widget.js
   var args = arguments[0] || {},
       _this = this,
       rowsArr = [],
       menuView = null;
   
   
   // == Public Functions == //
   exports.toggle = function(event) {
     _toggle(event);
   };
   function _toggle(event) {
     event.cancelBubble = true;
   
     if (origImg) {
       $.menuIcon.setImage(origImg);
     }
   
     if (!menuView) {
       menuView = Widget.createController("menu", {rows: rowsArr, parent: _this}).getView();
       menuView.open();
     } else {
       if (menuView) {
         menuView.close();
         menuView = null;
       }
     }
   }

Widget.js displays an icon which opens a menu when clicking.

   <!-- menu.xml -->
   <Alloy>
     <Window id="win" onClick="clicked">
       <TableView id="menuTable" />
     </Window>
   </Alloy>

menu.tss

   "#win": {
     // Need to fill all screen to catch off-menu clicks to close menu
     height: Ti.UI.FILL,
     width: Ti.UI.FILL,
     backgroundColor: "transparent",
     opacity: 1
   },
   "#menuTable": {
     top: "40dp",
     right: "0dp",
     width: "200dp", 
     height: Ti.UI.SIZE,
     backgroundColor: "#F2F2F2",
     color: "#5b5b5b",
     borderColor: '#bfbfbf',
     borderWidth: 1,
     zIndex: 9000
   },
   "#menuTable[platform=ios]": {
     top: "50dp"
   }

     // this simply has onclick listeners for menu items in the tableview. nothing special here.

Include the widget by the following alloy xml:

   <View id="menuWrap">
         <Require type="widget" src="com.mywidget.dotMenu" id="dotMenu" />
   </View>

Shuo Liang 2014-09-29

As Widgets have their own views, controllers, models, styles and assets and are laid out the same as the app directory in the Alloy project. so Widgets have their own themes. Please try to set noActionBar Themes to widget as well. Here is the reference: [http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Widgets-section-35621514_AlloyWidgets-UsingWidgets], please check the themes section.
Adam 2014-09-29

Yes. That's correct, however, we're not using Alloy themes to set no action bar. We're using a platform specific android file. As stated above a file like the following: <?xml version="1.0" encoding="utf-8"?> <resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="MyTheme" parent="@style/Theme.AppCompat.Light">  <item name="android:windowNoTitle">true</item> <item name="windowActionBar">false</item> </style> </resources> is used. This file is located at /platform/android/res/values/themes.xml. Please note that this issue is NOT present on iOS. This is only an android issue. The changes defined by themes.xml should apply to the entire app. They are applied, but not to the widget when the widget opens up a separate window. Unfortunately, this has nothing to do with Alloy themes.
Adam 2014-09-29

Hi Shuo, We tracked this down. It happened in one other place in our application other than the widget. As it turns out, having the Window element with a background set to transparent creates this issue. The action bar reappears and none of the styles from the themes.xml file are obeyed. Having the application obey the android themes.xml file is important to us since we apply styles to buttons and other elements. Any suggestions? EDIT: I should mention that a colleague of mine asked me to try setting the background to black and add a really low opacity value to make it transparent. This works for him in a previous titanium version. Unfortunately, that also triggers the action bar to show.

Adam 2014-09-29

As a workaround, we have changed our android theme to the following:

    <!-- /platform/android/res/values/themes.xml -->
    <?xml version="1.0" encoding="utf-8"?>
    <resources xmlns:android="http://schemas.android.com/apk/res/android">
      <style name="SitataTheme"  parent="@style/Theme.AppCompat.Light">
    
        <!-- Hides the title/action bar at the top -->
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    
        <!-- Ensure that android windows are transparent by default -->
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    
        <!-- etc... -->
      </style>
    </resources>

This creates a starting point for window elements that is similar to ios with a transparent default. Unfortunately, this is just a workaround. Setting a background of transparent or changing the opacity of a Window element should not affect its properties as stated above.

Shuo Liang 2014-09-30

I am glad you find the workaround, I will forward this ticket to our engineer team to take care of it.
Adam 2014-11-11

HI There. What's the latest on this? As it turns out, the workaround I mentioned above is not the greatest. In some cases, setting the theme properties mentioned in the workaround actually makes all windows on the stack transparent such that when a new window is opened, the entire app "disappears" except for the new window. This also occurs on datepickers. i.e. the background windows all disappear when the picker is launched.

Joshua Quick 2020-08-18

This will work if you set the theme like this...

    <style name="MyTheme" parent="Theme.AppCompat">
    	<item name="android:windowActionBar">false</item>
    	<item name="android:windowNoTitle">true</item>
    	<item name="windowActionBar">false</item>
    	<item name="windowNoTitle">true</item>
    </style>

The key thing is you need to set the "windowActionBar" to false.

JSON Source