Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16353] Android: Transparent windows are opaque on Android

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-03-07T19:46:55.000+0000
Affected Version/sRelease 3.2.0
Fix Version/s2014 Sprint 05, 2014 Sprint 05 API, Release 3.3.0
ComponentsAndroid
LabelsAlloy, Titanium, black, module_window, qe-closed-3.3.0, qe-testadded, transparent, triage, window
ReporterHenry David Spells III
AssigneeSunila
Created2014-01-16T22:55:23.000+0000
Updated2014-07-26T06:00:24.000+0000

Description

Here is the XML used to generate a transparent window. I don't think that the content matters as long as the content is smaller than the window so that you can see through to the window underneath. Basically I'm creating a transparent window with a list view in it to simulate a popup menu control. Instead of seeing the window behind the list view, there is a black background on Android (iOS works fine). 
<Alloy>
	<Window id="PopupControl" class="container" onOpen="doOnOpen" onClick="doClose" androidback="doClose" onClose="doOnClose" backgroundColor='transparent'>
        <ListView id="listView" defaultItemTemplate="template">

            <Templates>

                <ItemTemplate id="template" name="template">
                    <Label bindId="iconBottom" id="iconBottomId" />
                    <Label bindId="iconTop" id="iconTopId" />
                    <Label bindId="option" id="optionId" />
                </ItemTemplate>

            </Templates>

            <ListSection id="optionsSection">
            </ListSection>
        </ListView>
	</Window>
</Alloy>
I think that this is a bug in Titanium. The generated code seems to look right. 
    $.__views.PopupControl = Ti.UI.createWindow({
        backgroundColor: "transparent",
        barColor: "gray",
        layout: "vertical",
        id: "PopupControl",
        androidback: "doClose"
    });

Attachments

FileDateSize
TransparencyIssueAndroid.png2014-01-21T02:46:47.000+000030420
TransparencyIssueNOToniOS.png2014-01-21T02:46:47.000+000070485
TransparentWindow.zip2014-01-30T09:36:38.000+00005930798

Comments

  1. Mostafizur Rahman 2014-01-20

    I tested this issue with the test code below. I can't reproduce this issue in latest TiSDK. On Android, to specify a semi-transparent [background| http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Window-property-backgroundColor], set the alpha value using the opacity property before opening the window. Let us know if this helps.

    Test Environment

    Mac OX S 10.8.5 Ti SDK 3.2.0.GA Ti CLI 3.2.0 Android SDK 4.4

    Test Code

       <Alloy>
   	<Window class="container" backgroundColor='transparent' opacity="0.5">
   		<ListView id="listView" defaultItemTemplate="template">
   			<Templates>
   				<ItemTemplate id="template" name="template" layout="vertical">
   					<Label bindId="iconBottom" id="iconBottomId" />
   					<Label bindId="iconTop" id="iconTopId" />
   					<Label bindId="option" id="optionId" />
   				</ItemTemplate>
   
   			</Templates>
   			<ListSection id="optionsSection">
   				<ListItem iconBottom:text="Corn" bindId:text="Maiz" option:text="/corn.png" />
   			</ListSection>
   		</ListView>
   	</Window>
   </Alloy>

    Step to Test

    Create a simple alloy project

    Update index.xml with my test code

    Run on android device for testing

    It will show transparent background

    Thanks
  2. Henry David Spells III 2014-01-21

    That is not the desired behavior. I don't want the foreground to be partially transparent. I want the background to be totally transparent. This worked properly in previous SDKs and it still works on iOS. I have uploaded screenshots from my app using Alloy 1.3.1beta3. Notice on Android how the background is black and on iOS the background (not the foreground) is fully transparent. Android worked like iOS still does in previous versions of Alloy/TI SDK. Did you use Alloy 1.3.1beta3? Please fix it the way it was in the previous versions of the SDK / Alloy.
  3. Henry David Spells III 2014-01-30

    Do you have a status update on this? This is really important to me. This makes my app unusable. I use this technique a lot in the app. It's difficult to go back to an old SDK because I upgrades to Xcode 5.0.1 not know I would be forced to upgrade Alloy / Titanium SDK and 1.3.0 added a crashing bug that was fixed in beta 3 (ALOY-922). I need to release an update soon. Do you understand that opacity effects the foreground and 'transparent' in the backgroundColor only makes the background transparent. Without this working it makes a whole class of problem unsolvable. Thanks in advance for your help.
  4. Shak Hossain 2014-01-30

    Henry, Can you please post a complete test case so that we can easily differentiate the UI behavior pre-1.3 alloy and 1.3+ Once reproduced, we will move this for fix. Regards, Shak
  5. Henry David Spells III 2014-01-30

    OK. I thought it was obvious from the pictures I posted. I open a window above another window. The new window has a 'transparent' background and you see the content above the window as if floating above the first window.
  6. Henry David Spells III 2014-01-30

    This is a zip file of a project folder called 'TransparentWindow' that demonstrates the bug. It works on iOS but does not work on Android. The window location is a little off on Android as well, I'm not sure why at this point.
  7. Pavel Kartsel 2014-01-30

    Henry, As a hack, you can get transparent background by setting popup window style: 
       navBarHidden: true,
   modal: true,
   backgroundColor: 'transparent',
   backgroundImage: 'transparent-pixel.png'
    Result: !http://s28.postimg.org/3rdc8rk7x/unnamed.png!
  8. Henry David Spells III 2014-01-30

    Thanks! That should at least get me through Beta.
  9. Ritu Agrawal 2014-01-31

    Moving this ticket to engineering as I can reproduce this issue with Android platform while it works correctly for iOS platform. Please use attached test TransparentWindow.zip file for a simple test case. Even though it is an Alloy test case, it is most likely a TIMOB issue.
  10. Fokke Zandbergen 2014-02-23

  11. Henry David Spells III 2014-02-24

    Why did this work in previous Titanium SDKs on Android. Was it because it used to create a lightweight window instead of a heavy weight window?
  12. Fokke Zandbergen 2014-02-24

    Yes, I guess it works fine on lightweight windows.
  13. Sunila 2014-02-26

    Use TiTranslucentActivity if the backgroundcolor is transparent or has alpha https://github.com/appcelerator/titanium_mobile/pull/5390
  14. Sunila 2014-02-26

    Simple test case to try 'transparent' and alpha-channel var win = Ti.UI.createWindow(); win.backgroundColor = 'white'; var b1 = Ti.UI.createButton({ title : 'Open Window', height : 'auto', width : 'auto' }); // Here is an example of creating the menu handlers in the window creation options. b1.addEventListener('click', function(e) { var w = Ti.UI.createWindow({ backgroundColor : 'transparent' //Comment above line and uncomment the below line to try alpha //backgroundColor : '#5FFF' }); var l = Ti.UI.createLabel({ backgroundColor : 'white', color : 'black', width : 'auto', height : 'auto', text : 'Press the menu button, then select Close Window. You should see a graphic w/ the menu text.' }); w.add(l); w.open({ animated : true}); }); win.add(b1); win.open();
  15. Paras Mishra 2014-04-24

    Verified the fix using the above testcase, setting parent window's background color red and child window's as transparent, red background is visible. Verified on: Device : Google Nexus 7, Android Version: 4.4.2 Device: LG-P970, Android version: 4.0.4 SDK: 3.3.0.v20140423155715 CLI version : 3.3.0-dev OS : MAC OSX 10.9.2 Alloy: 1.4.0-dev ACS: 1.0.14 npm:1.3.2 Appcelerator Studio, build: 3.3.0.201404211130 titanium-code-processor: 1.1.1-alpha XCode : 5.1.1

JSON Source