For an activity window to be translucent, Android appears to\nrequire that you set the activity's theme to a translucent theme in\nthe AndroidManifest.xml -- \nit does not appear to be possible to successfully set a translucent\ntheme -- or a transparent window background -- at runtime.
\nYou could, for example, use a custom AndroidManifest.xml in your\nTitanium application and set the TiActivity as such:
\n\n<activity android:configChanges=\"keyboardHidden|orientation\" android:name=\"ti.modules.titanium.ui.TiActivity\" android:theme=\"@android:style/Theme.Translucent\"/>\n\nTiActivity is the activity we use for all \"heavyweight\" windows\nin Titanium. The above change to the TiActivity's manifest entry --\nadding\nandroid:theme=\"@android:style/Theme.Translucent\"\nsuccessfully makes your windows translucent by default. (In code,\nyou can then give a backgroundColor to a window if you\ndon't want it to be translucent.)
When you use a TabGroup, however, you need to consider the theme\nfor the TiTabActivity, which is the\nactivity we use for TabGroups. So this should\nwork:
\n<activity android:configChanges=\"keyboardHidden|orientation\" android:name=\"ti.modules.titanium.ui.TiTabActivity\" android:theme=\"@android:style/Theme.Translucent\"/>\n\nBut, in fact, it's not working. The reason is because we\nexplicitly -- in our Java code -- set the Android TabHost's\nbackground drawable to a ColorDrawable with color\nvalue #ff1a1a1a.
SO ... to re-create the failcase, follow these rather elaborate\nsteps...
\nCreate a new Titanium application.
\nMake this its app.js:
\n\nTi.UI.backgroundImage = 'KS_nav_ui.png'; // Set the root background to show an (ugly, stretched) image\nvar tabGroup = Titanium.UI.createTabGroup();\nvar win1 = Titanium.UI.createWindow({ \n title:'Tab 1',\n backgroundColor:'transparent'\n});\nvar tab1 = Titanium.UI.createTab({ \n icon:'KS_nav_views.png',\n title:'Tab 1',\n window:win1\n});\nvar win2 = Titanium.UI.createWindow({ \n title:'Tab 2',\n backgroundColor:'transparent'\n});\nvar tab2 = Titanium.UI.createTab({ \n icon:'KS_nav_ui.png',\n title:'Tab 2',\n window:win2\n});\ntabGroup.addTab(tab1); \ntabGroup.addTab(tab2); \ntabGroup.open();\n\nRun the app once so that it generates our default\nAndroidManifest.xml.
\nCreate the folder platform/android under the\nproject's root folder.
Copy build/android/AndroidManifest.xml into\nplatform/android. This tells Titanium you want to use\na custom AndroidManifest.xml.
Edit platform/android/AndroidManifest.xml
Search for TiTabActivity. When you find it, add\nthis attribute to its element:\nandroid:theme=\"@android:style/Theme.Translucent\" so\nthat the complete element looks like:
\n<activity android:configChanges=\"keyboardHidden|orientation\" android:name=\"ti.modules.titanium.ui.TiTabActivity\" android:theme=\"@android:style/Theme.Translucent\"/>\n\nSave these changes you've made to\nplatform/android/AndroidManifest.xml.
Re-launch the application. You will see that although you have\nspecified a translucent theme for our tab Activity, you still won't\nbe able to see through to the default background, which is the\nimage KS_nav_ui.png.
\n(from [843c806d1c07731e5bd6643b37ce5015e0134695])\nIf TabGroup passed a backgroundColor, use it instead of the default\n#ff1a1a1a we've been setting. This allows people to set\n'transparent', for example, and then use Theme.Translucent on\nTiTabActivity to let their tabs be transparent. Also remove\nduplicate entries from generated AndroidManifest.xml in case user\nputs one of our default activities into of tiapp.xml (such as if\nthey wanted to apply a custom theme to it.) [#3290]\n\nhttps://github.com/appcelerator/titanium_mobile/commit/843c806d1c07...
(from [0a693f4dae443f4381269afebbcdffd24e5e8100])\nIf TabGroup passed a backgroundColor, use it instead of the default\n#ff1a1a1a we've been setting. This allows people to set\n'transparent', for example, and then use Theme.Translucent on\nTiTabActivity to let their tabs be transparent. Also remove\nduplicate entries from generated AndroidManifest.xml in case user\nputs one of our default activities into of tiapp.xml (such as if\nthey wanted to apply a custom theme to it.) [#3290]\n\nhttps://github.com/appcelerator/titanium_mobile/commit/0a693f4dae44...
So with this fix in place, here are the instructions for getting\n(and testing) transparent tab windows:
\nYou can get rid of the custom AndroidManifest.xml from my\ninstructions above (if you're using the same project to test the\nfix). I made a change that makes it easier to just update a single\nActivity rather than pull over the whole AndroidManifest.xml. The\nnext step takes advantage of that change.
\nOpen your tiapp.xml and put an entry for the TiTabActivity in\nthe <android><manifest><application>\nsection. On that entry, you're going to assign the\nTheme.Translucent theme to that activity. Such as this:
\n<android xmlns:android=\"http://schemas.android.com/apk/res/android\">\n <manifest>\n <application>\n <activity android:name=\"ti.modules.titanium.ui.TiTabActivity\"\n android:configChanges=\"keyboardHidden|orientation\"\n android:theme=\"@android:style/Theme.Translucent\"\n />\n </application>\n </manifest>\n</android>\n\nbackgroundColor:'transparent' -- that's not required\nin iOS, but it is for Android, because otherwise the default\nbackground color that we set for tab groups will be applied. Also\nset the constituent windows' backgroundColor:\n'transparent'. Here is a good example app.js that does\nboth:\nTi.UI.backgroundImage = 'KS_nav_ui.png';\nvar tabGroup = Titanium.UI.createTabGroup({backgroundColor: 'transparent'});\nvar win1 = Titanium.UI.createWindow({ \n title:'Tab 1',\n backgroundColor:'transparent',\n fullscreen:false\n});\nvar tab1 = Titanium.UI.createTab({ \n icon:'KS_nav_views.png',\n title:'Tab 1',\n window:win1\n});\nvar win2 = Titanium.UI.createWindow({ \n title:'Tab 2',\n backgroundColor:'transparent',\n fullscreen:false\n});\nvar tab2 = Titanium.UI.createTab({ \n icon:'KS_nav_ui.png',\n title:'Tab 2',\n window:win2\n});\ntabGroup.addTab(tab1); \ntabGroup.addTab(tab2); \ntabGroup.open();\n\nNote that that sample app.js also sets an ugly, stretched bitmap\non the root background, so that you can see if transparency is\nactually working.
\nRun the app -- you should be able to see the ugly bitmap, which\nmeans the tabgroup and the tab windows are transparent.
\nTested with Titanium SDK version: 1.7.0 (03/08/11 13:41 1dbf930)\non
\nSamsung Galaxy 2.2
\nNexus One 2.2.2
\nEmulator 2.1
Hi Bill,
\nI tried the code above and it works, but on my HTC Desire HD\nit's always in fullscreen mode. The bar at the top is missing.\nSometimes the empty bar pops up and disappears again a few seconds\nlater.
\nKind regards,
\nDennis
Yup, Android has an annoyance whereby if you open a translucent\nwindow from a fullscreen window, then the translucent window will\nalso be fullscreen, even if you don't want it to be. :\\\nIt's really annoying. There appears to be no way around it.
\nSo what's happening is that since the \"launch\" theme is\nfullscreen (the fullscreen splash screen), the translucent \"window\"\n(the TabGroup) which gets launched from it is also fullscreen. It\ndoesn't happen for non-translucent windows. Very weird.
\nThere are a couple of things you can try. The first one works\nfor sure, the second one I haven't tried.
\nChange the launch theme to not be fullscreen.\nIf you look in the generated AndroidManifest.xml, you'll see that\nthe first activity definition -- the one that carries your\napplication's name -- has\nandroid:theme=\"@style/Theme.Titanium. Now if you look\nat build/android/res/values/theme.xml, you'll see that\nTheme.Titanium inherits from the Android built-in\ntheme named Theme.NoTitleBar.Fullscreen. You can make\na custom version of this theme.xml:
platform/android/res/values, then copy this theme.xml\nfile into that folder and edit it.Theme.NoTitleBar.Fullscreen to\nTheme.NoTitleBar and save the file.Keep the launch screen as a fullscreen, but put a\nnon-fullscreen-window between the launch window (splash) and the\ntabgroup. I have not tried this. For example, in\napp.js you'd createWindow({fullscreen:false,\nurl:'launch.js'}) (etc.), then launch.js you'd have the code\nto open the TabGroup immediately. (For createTabGroup, you would\nwant to also set exitOnClose:true so that the app\ncloses when you back out of the TabGroup -- otherwise you would end\nup setting at that launch.js window which is useless.)
Hope that helps,
\nBill
Hi Bill,
\nthe first approach works great so far! But as soon as I put the\ndevice to the landscape mode the splash screen covers the root\nbackground. I was able to use a workaround by setting the\nbackground image again on orientationchange, but sometimes this\ndoesn't work as desired.
\nWould it be possible that I add you to my contacts in Skype? I\nhave some more bugs to share ;) Maybe you can send your Skype name\nby email to dennis@wunderkinder.com. That\nwould be really great!!
\nThank you very much
\nKind regards,
\nDennis
(from [0cfa014353f9af858ff975a9ae1eb6823ced0966])\nIf TabGroup passed a backgroundColor, use it instead of the default\n#ff1a1a1a we've been setting. This allows people to set\n'transparent', for example, and then use Theme.Translucent on\nTiTabActivity to let their tabs be transparent. Also remove\nduplicate entries from generated AndroidManifest.xml in case user\nputs one of our default activities into of tiapp.xml (such as if\nthey wanted to apply a custom theme to it.) [#3290]\n\nhttps://github.com/appcelerator/titanium_mobile/commit/0cfa014353f9...