[TIMOB-3290] Android: TabGroup never translucent even if translucent theme applied to TiTabActivity

(from [843c806d1c07731e5bd6643b37ce5015e0134695]) If TabGroup passed a backgroundColor, use it instead of the default #ff1a1a1a we've been setting. This allows people to set 'transparent', for example, and then use Theme.Translucent on TiTabActivity to let their tabs be transparent. Also remove duplicate entries from generated AndroidManifest.xml in case user puts one of our default activities into of tiapp.xml (such as if they wanted to apply a custom theme to it.) [#3290] https://github.com/appcelerator/titanium_mobile/commit/843c806d1c07731e5bd6643b37ce5015e0134695"> https://github.com/appcelerator/titanium_mobile/commit/843c806d1c07...

(from [0a693f4dae443f4381269afebbcdffd24e5e8100]) If TabGroup passed a backgroundColor, use it instead of the default #ff1a1a1a we've been setting. This allows people to set 'transparent', for example, and then use Theme.Translucent on TiTabActivity to let their tabs be transparent. Also remove duplicate entries from generated AndroidManifest.xml in case user puts one of our default activities into of tiapp.xml (such as if they wanted to apply a custom theme to it.) [#3290] https://github.com/appcelerator/titanium_mobile/commit/0a693f4dae443f4381269afebbcdffd24e5e8100"> https://github.com/appcelerator/titanium_mobile/commit/0a693f4dae44...

So with this fix in place, here are the instructions for getting (and testing) transparent tab windows:

• You can get rid of the custom AndroidManifest.xml from my instructions above (if you're using the same project to test the fix). I made a change that makes it easier to just update a single Activity rather than pull over the whole AndroidManifest.xml. The next step takes advantage of that change.

• Open your tiapp.xml and put an entry for the TiTabActivity in the <android><manifest><application> section. On that entry, you're going to assign the Theme.Translucent theme to that activity. Such as this:

   <android xmlns:android="http://schemas.android.com/apk/res/android">
       <manifest>
           <application>
               <activity android:name="ti.modules.titanium.ui.TiTabActivity"
                   android:configChanges="keyboardHidden|orientation"
                   android:theme="@android:style/Theme.Translucent"
               />
           </application>
       </manifest>
   </android>
   

• In your app.js, create a TabGroup and set its backgroundColor:'transparent' -- that's not required in iOS, but it is for Android, because otherwise the default background color that we set for tab groups will be applied. Also set the constituent windows' backgroundColor: 'transparent'. Here is a good example app.js that does both:

   Ti.UI.backgroundImage = 'KS_nav_ui.png';
   var tabGroup = Titanium.UI.createTabGroup({backgroundColor: 'transparent'});
   var win1 = Titanium.UI.createWindow({  
       title:'Tab 1',
       backgroundColor:'transparent',
       fullscreen:false
   });
   var tab1 = Titanium.UI.createTab({  
       icon:'KS_nav_views.png',
       title:'Tab 1',
       window:win1
   });
   var win2 = Titanium.UI.createWindow({  
       title:'Tab 2',
       backgroundColor:'transparent',
       fullscreen:false
   });
   var tab2 = Titanium.UI.createTab({  
       icon:'KS_nav_ui.png',
       title:'Tab 2',
       window:win2
   });
   tabGroup.addTab(tab1);  
   tabGroup.addTab(tab2);  
   tabGroup.open();
   

• Note that that sample app.js also sets an ugly, stretched bitmap on the root background, so that you can see if transparency is actually working.

• Run the app -- you should be able to see the ugly bitmap, which means the tabgroup and the tab windows are transparent.

Tested with Titanium SDK version: 1.7.0 (03/08/11 13:41 1dbf930) on
Samsung Galaxy 2.2
Nexus One 2.2.2
Emulator 2.1

Hi Bill,

I tried the code above and it works, but on my HTC Desire HD it's always in fullscreen mode. The bar at the top is missing. Sometimes the empty bar pops up and disappears again a few seconds later.

Kind regards,
Dennis

Yup, Android has an annoyance whereby if you open a translucent window from a fullscreen window, then the translucent window will also be fullscreen, even if you don't want it to be. :\ It's really annoying. There appears to be no way around it.

So what's happening is that since the "launch" theme is fullscreen (the fullscreen splash screen), the translucent "window" (the TabGroup) which gets launched from it is also fullscreen. It doesn't happen for non-translucent windows. Very weird.

There are a couple of things you can try. The first one works for sure, the second one I haven't tried.

1. Change the launch theme to not be fullscreen. If you look in the generated AndroidManifest.xml, you'll see that the first activity definition -- the one that carries your application's name -- has android:theme="@style/Theme.Titanium. Now if you look at build/android/res/values/theme.xml, you'll see that Theme.Titanium inherits from the Android built-in theme named Theme.NoTitleBar.Fullscreen. You can make a custom version of this theme.xml:

   • In your project root, create platform/android/res/values, then copy this theme.xml file into that folder and edit it.
   • Change the Theme.NoTitleBar.Fullscreen to Theme.NoTitleBar and save the file.
   • Now "touch" your tiapp.xml file (i.e, do something to update its file date/time). I'm not sure this step is necessary, but it's a good idea in this case.
   • Re-launch your app. You'll see that your splash screen is no longer fullscreen (which might be annoying), but also your translucent TabGroup will not be fullscreen anymore.

2. Keep the launch screen as a fullscreen, but put a non-fullscreen-window between the launch window (splash) and the tabgroup. I have not tried this. For example, in app.js you'd createWindow({fullscreen:false, url:'launch.js'}) (etc.), then launch.js you'd have the code to open the TabGroup immediately. (For createTabGroup, you would want to also set exitOnClose:true so that the app closes when you back out of the TabGroup -- otherwise you would end up setting at that launch.js window which is useless.)

Hope that helps,

Bill

Hi Bill,

the first approach works great so far! But as soon as I put the device to the landscape mode the splash screen covers the root background. I was able to use a workaround by setting the background image again on orientationchange, but sometimes this doesn't work as desired.

Would it be possible that I add you to my contacts in Skype? I have some more bugs to share ;) Maybe you can send your Skype name by email to dennis@wunderkinder.com. That would be really great!!

Thank you very much

Kind regards,
Dennis

(from [0cfa014353f9af858ff975a9ae1eb6823ced0966]) If TabGroup passed a backgroundColor, use it instead of the default #ff1a1a1a we've been setting. This allows people to set 'transparent', for example, and then use Theme.Translucent on TiTabActivity to let their tabs be transparent. Also remove duplicate entries from generated AndroidManifest.xml in case user puts one of our default activities into of tiapp.xml (such as if they wanted to apply a custom theme to it.) [#3290] https://github.com/appcelerator/titanium_mobile/commit/0cfa014353f9af858ff975a9ae1eb6823ced0966"> https://github.com/appcelerator/titanium_mobile/commit/0cfa014353f9...