Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-24667] Android: borderRadius doesn't clip the backgroundColor on android 4.1.x, 4.2.x on SDK 6+

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2017-05-11T01:41:04.000+0000
Affected Version/sRelease 6.0.4
Fix Version/sRelease 6.1.0
ComponentsAndroid
Labelsandroid, borderRadius, regression
ReporterDan Tamas
AssigneeGary Mathews
Created2017-05-08T11:19:53.000+0000
Updated2017-05-15T18:48:23.000+0000

Description

Adding a borderRadius on a view won't clip the backgroundColor, so the result will be a square with a circle behind instead of a bordered circle. Please see screenshot. This happens on android 4.1.x and 4.2.x, on 4.4.4+ works ok.

Attachments

FileDateSize
Screen Shot 2017-05-08 at 13.18.26.png2017-05-08T11:18:43.000+000017883

Comments

  1. Sharif AbuDarda 2017-05-08

    Hello, Please provide a sample code that regenerates the issue. We will test it. Thanks.
  2. Dan Tamas 2017-05-08

    Hi, thank you for the fast reply, here is how to replicate: For a new Alloy project, put this in index.xml
       <Alloy>
         <Window class="container">
           <View class="roundedWithBorder">
             <Label id="label" onClick="doClick">Hello, World</Label>
           </View>
         </Window>
       </Alloy>
       
    add this in index.tss:
       ".roundedWithBorder":{
       	width:100,
       	height:100,
       	borderWidth:3,
       	borderRadius:50,
       	borderColor:'red',
       	backgroundColor:'pink'
       }
       
  3. Hans Knöchel 2017-05-08

    Hey Dan, I moved it to Engineering, it looks valid. Your labels state that it's a regression, can you see in which Titanium SDK it used to work? Test-Case (classic):
       var win = Ti.UI.createWindow({
           backgroundColor: '#fff'
       });
       
       var roundedWithBorder = Ti.UI.createView({
           width: 100,
           height: 100,
           borderWidth: 3,
           borderRadius: 50,
           borderColor: 'red',
           backgroundColor: 'pink'
       });
       
       roundedWithBorder.add(Ti.UI.createLabel({
           text: 'Hello, World'
       }));
       
       win.add(roundedWithBorder);
       win.open();
       
  4. Dan Tamas 2017-05-08

    Hi, I jumped from 5.5.1 to 6.0.3, it was working ok with 5.5.1.
  5. Dan Tamas 2017-05-08

    Could it be this: https://github.com/appcelerator/titanium_mobile/pull/8851 ?
  6. Hans Knöchel 2017-05-08

    Will be checked by the Android team asap. I also tried my above test-case and it indeed reproduces: - [Working on Android 7](https://abload.de/img/bildschirmfoto2017-050wug5.png) - [Not Working on Android 4.2](https://abload.de/img/bildschirmfoto2017-05xlu2w.png)
  7. Gary Mathews 2017-05-09

    master: https://github.com/appcelerator/titanium_mobile/pull/9037
  8. Gary Mathews 2017-05-09

    6_1_X: https://github.com/appcelerator/titanium_mobile/pull/9039
  9. Lokesh Choudhary 2017-05-11

    FR passed for both master & backport PR.
  10. Lokesh Choudhary 2017-05-15

    Verified the fix in 6.1.0.v20170514022959. Adding a borderRadius on a view clips the backgroundColor as expected. Closing. Studio Ver: 4.9.0.201705110256 SDK Ver: 6.1.0.v20170514022959 OS Ver: 10.12.3 Xcode Ver: Xcode 8.3.2 Appc NPM: 4.2.9 Appc CLI: 6.2.1 Ti CLI Ver: 5.0.13 Alloy Ver: 1.9.11 Node Ver: 6.10.1 Java Ver: 1.8.0_101 Android Emulator: Android 4.2.2, Android 4.1.1 & android 5.1.1

JSON Source