Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-24898] Android: setting view.borderRadius causes backgroundColor alpha to be ignored

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2017-07-11T13:43:57.000+0000
Affected Version/sRelease 6.1.1
Fix Version/sRelease 6.2.0
ComponentsAndroid
Labelsn/a
ReporterIan Wall
AssigneeGary Mathews
Created2017-06-24T04:59:02.000+0000
Updated2018-08-07T07:00:31.000+0000

Description

The below code loosely simulates how I implemented an overlay tutorial in my app using backgroundColor transparency, set via hex triplets. mainview and label represent app content. containerview is an overlay containing tutorial information, and masking view represents a view that 'darkens' the content until it needs to be highlighted. In the example below, it toggles the highlighting by setting the maskingview backgroundColor alpha to either 0 or 90% when you click the view. Expected result is the alpha of the maskingview backgroundColor changes and the mainview content is visible or masked. Works on both Android and iOS using SDK 5.4.0.GA. Works on iOS using SDK 6.1.0.GA, but not Android. Commenting out setting borderRadius on the maskingview (issue is both at create or runtime) solves the problem on Android. Steps to reproduce: uncomment the borderRadius setter below, build with 5.4.0.GA on Android. Expected result: clicking on view fades or shows the underlying "Hello". Rebuild with 6.1.0.GA on Android, clicking on view complete hides the underlying view. Comment out borderRadius setter under 6.1.0.GA, works as expected again. 
var win = Ti.UI.createWindow({
	backgroundColor: 'black'
});
 
var mainview = Ti.UI.createView({
	backgroundColor: "#202020",
	width: 200, height: 200
});

var label = Ti.UI.createLabel({
	text: "Hello",
	width: 50,	height: 30,	color: "white"
});

mainview.add(label);

var containerview = Ti.UI.createView({
	backgroundColor: "#00202020",
	width: 300, height: 300
});

var maskingview = Ti.UI.createView({
	width: 200, height: 200, 
	//borderRadius: 6, 
	borderWidth: 1, 
	borderColor: "#ff0000",
	backgroundColor: "#e6202020"
});

containerview.add(maskingview);
win.add(mainview);
win.add(containerview);
 
maskingview.addEventListener('click', function(e) {
	maskingview.backgroundColor = (maskingview.backgroundColor == "#e6202020" ? "#00202020" : "#e6202020");
});

Comments

  1. Gary Mathews 2017-06-29

    master: https://github.com/appcelerator/titanium_mobile/pull/9179
  2. Lokesh Choudhary 2017-07-06

    FR Passed. PR Merged.
  3. Gary Mathews 2017-07-11

    Jenkins tests are failing due to backgroundColor: null Reopening to push fix.
  4. Gary Mathews 2017-07-11

    master: https://github.com/appcelerator/titanium_mobile/pull/9214
  5. Abir Mukherjee 2017-07-11

    Changes are seen in SDK 6.2.0.v20170711090338. Closing ticket.
  6. Michael Gangolf 2017-09-02

    There is a little bug in 6.2.0.RC when you don't set a backgroundColor and apply a borderRadius it will disable HW acceleration. But if you set the background color to "transparent" it will keep the acceleration (like it was in 6.1.2.GA) *Code* (sorry it's an alloy project) JS 
       var d = [];
   for (var i = 0; i < 20; ++i) {
   	d.push({
   		viewPlayer: {
   			width: "50%"
   		}
   	});
   }
   $.list_events.sections[0].setItems(d);
   $.index.open();
    TSS 
       ".view_event" : {left: 5,right: 5,top: 5,backgroundColor: "#AAA",height: 90,bottom: 5,borderRadius: 4,borderColor: "#DDD",borderWidth: 1}
   "#list_events" : {height: Ti.UI.FILL,width: Ti.UI.FILL}
   ".viewPlayer":{height: Ti.UI.FILL,left:0,backgroundColor: "#f00"}
   
   ".view_player": {
   	left:10,right:10,height: 15,
   	/*backgroundColor: "transparent",*/
   	borderRadius: 4,borderColor: "#999",
   }
    XML 
       <Alloy>
   	<Window >
   		<ListView id="list_events" defaultItemTemplate="default">
   			<Templates>
   				<ItemTemplate name="default">
   					<View class="view_event">
   						<View class="view_player">
   							<View bindId="viewPlayer" class="viewPlayer"/>
   						</View>
   					</View>
   				</ItemTemplate>
   			</Templates>
   			<ListSection></ListSection>
   		</ListView>
   	</Window>
   </Alloy>
    In 6.2.0.RC the movement of the ListView is not smooth (in 6.1.2.GA it is). When you uncomment the line backgroundColor:"transparent" it will be smooth in 6.2.0.RC.
  7. Gary Mathews 2017-09-04

    [~michael] What's interesting is it's actually the opposite. When backgroundColor is not set and borderRadius is set whilst you are running Android 6.0+. HW-acceleration will be enabled. Setting backgroundColor: 'transparent' with the borderRadius set will disable HW-acceleration (which allows transparency to work). So you are seeing a smoother ListView with HW-acceleration disabled. Android can be temperamental when it comes to HW-acceleration and in your case you are seeing improvements with it disabled. You could try disabling HW-acceleration in your manifest ([read more](https://developer.android.com/guide/topics/graphics/hardware-accel.html)) 
       <application android:hardwareAccelerated="false" ...>
  8. Michael Gangolf 2017-09-04

    I've put some log in TiUiView (before every disableHWAcceleration() call *output for transparent backgroundColor (smooth scrolling):* 
       [INFO]  BGColor: (main) [7,167] 0
   [INFO]  BGColor: (main) [160,160] -5592406
   [INFO]  BGColor: (main) [0,160] disable HWAccel because of bgColor 
   [INFO]  TiUIView: (main) [0,160] disableHWAcceleration()
    *output for no backgroundColor (laggy scrolling)* 
       [INFO]  BGColor: (main) [4,180] null
   [INFO]  BGColor: (main) [10,190] -5592406
   [INFO]  BGColor: (main) [1,191] disable HWAccel because of bgColor
   [INFO]  TiUIView: (main) [0,191] disableHWAcceleration()
    So you are right, it is disabling HW acceleration in both cases. But adding 
       <android xmlns:android="http://schemas.android.com/apk/res/android">
   		<manifest>
   			<application android:hardwareAccelerated="false">
   			</application>
   		</manifest>
   	</android>
    doesn't make any difference. So it looks like there is something else that is responsible for lowering the performance. In 6.1.2.GA it is smooth in both cases. I'm currently checking TiBackgroundDrawable
  9. Michael Gangolf 2017-09-04

    [~gmathews] There is an endless draw() loop in TiBackgroundDrawable! A log in draw() is called once per ListView item when I set the backgroundColor to transparent. When I don't set it it is called constantly! So its not the HW acceleration that is causing the problem it is a constant redraw! But I'm not sure what is calling draw() all the time :)
  10. Gary Mathews 2017-09-04

    [~michael] Uh oh!! Thanks for finding that, I'll take a look!
  11. Gary Mathews 2017-09-07

  12. Michael Gangolf 2017-09-07

    Nice, thank you [~gmathews]!
  13. ardy wongso 2017-11-06

    Is it me or it happen again on 6.3.0 for eg: var avatarView = Ti.UI.createImageView({ height:'40',width:'40', borderRadius:20, touchEnabled:false, defaultImage:'/icon/ic_blueUser.png', backgroundColor:'#fff', }); when i add above code to view, in 6.1.2 is shows BOX image, in 6.2.2 it shows CIRCLE image, in 6.3.0 it shows CIRCLE image, i think something is wrong with handling border radius. but when i turn off hardware acceleration (android:hardwareAccelerated = "false") in 6.1.2, 6.2.2 and 6.3.0 it shows circle it happen on s4 mini 4.4.2, but in other android phone it works fine. sorry if this not related to main bug.
  14. David van de Meer 2018-08-07

    Hi, This (or something similar) seems to have come up again Titanium SDK 7.2.0 Real Device: Lenovo A328 - Android 4.4.2 Simulator: Genymotion Google Nexus 5 - 4.4.4 - API 19 - 1080x1920 Steps to reproduce: 1. Build a new clean alloy app 2. Add the following code to index.js 3. Notice the top of the child view gets cut off. 4. To fix - remove borderRadius value and build again and the view will no longer be cut off 
        // create alertView container
    var alertView = Ti.UI.createView({
    	 backgroundColor:'white',
    	 opacity: 0.90,
    	 borderRadius: 5,
    	 width: "85%",
    	 height: '200dp',
    	 layout: 'vertical',
    });
    
    // create alertTitleView
    var alertTitleView = Ti.UI.createView({
      width: Ti.UI.FILL,
      height: Ti.UI.SIZE,
    });
    
    // create alertTitleLabel
    var alertTitleLabel = Ti.UI.createLabel({
      text: "This is a long test title This is a long test title This is a long test title This is a long test title",
      color: 'black',
      textAlign: 'center',
      touchEnabled: false,	
      top: "15dp",
      left: 5,
      right: 5,
      font: {
    			fontSize: '20dp',
    		}
    });
    
    alertTitleView.add(alertTitleLabel);
    alertView.add(alertTitleView);
    
    $.main.backgroundColor = "black";
    
    $.main.add(alertView);
    	  
    $.main.open();

JSON Source