[TIMOB-16909] Android: Anti-aliasing does not work properly in views

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2015-01-27T16:22:49.000+0000
Affected Version/s	Release 3.2.2
Fix Version/s	Release 4.0.0
Components	Android
Labels	n/a
Reporter	Fix Please
Assignee	Hieu Pham
Created	2014-05-02T14:39:55.000+0000
Updated	2015-03-13T00:12:37.000+0000

Description

See the attached image. 1. Seems there is no anti-aliasing at all in case of borderWidth="0" 2. Anti-aliasing is not good (especially on the border inner) in case of borderWidth>"0" 2. Seems the border alpha channel (opacity) is being ignored and the corresponding view opacity is being used instead. The markup:

<Alloy>
	<Window class="container">
		<View id="backgroundView" backgroundColor="white" width="Ti.UI.FILL" height="Ti.UI.FILL">
      <!-- 50x50x50 -->
      <View top="10" left="10" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="0" borderColor="transparent"></View>
      <View top="70" left="10" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="0" borderColor="black"></View>
      <View top="130" left="10" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="0" borderColor="#0000"></View>
      <View top="190" left="10"  backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="0" borderColor="#f000"></View>
      
      <View top="10" left="40" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="1" borderColor="transparent"></View>
      <View top="70" left="40" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="1" borderColor="black"></View>
      <View top="130" left="40" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="1" borderColor="#0000"></View>
      <View top="190" left="40"  backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="1" borderColor="#f000"></View>
      
      <View top="10" left="70" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="3" borderColor="transparent"></View>
      <View top="70" left="70" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="3" borderColor="#0f00"></View>
      <View top="130" left="70" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="3" borderColor="#f0f0"></View>
      <View top="190" left="70" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="50" borderWidth="3" borderColor="#f00f"></View>

      <!-- 50x50x25 -->
      <View top="10" left="130" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="0" borderColor="transparent"></View>
      <View top="70" left="130" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="0" borderColor="#black"></View>
      <View top="130" left="130" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="0" borderColor="#0000"></View>
      <View top="190" left="130"  backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="0" borderColor="#f000"></View>
      
      <View top="10" left="160" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="1" borderColor="transparent"></View>
      <View top="70" left="160" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="1" borderColor="#black"></View>
      <View top="130" left="160" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="1" borderColor="#0000"></View>
      <View top="190" left="160"  backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="1" borderColor="#f000"></View>
      
      <View top="10" left="190" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="3" borderColor="transparent"></View>
      <View top="70" left="190" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="3" borderColor="#ff00"></View>
      <View top="130" left="190" backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="3" borderColor="#00f0"></View>
      <View top="190" left="190"  backgroundColor="black" opacity="0.5" width="50" height="50" borderRadius="25" borderWidth="3" borderColor="#f00f"></View>
      
      <!-- 80x80x25 -->
      <View top="10" left="250" backgroundColor="black" opacity="0.5" width="80" height="80" borderRadius="25" borderWidth="1" borderColor="transparent"></View>
      <View top="80" left="270" backgroundColor="black" opacity="0.5" width="80" height="80" borderRadius="25" borderWidth="1" borderColor="#black"></View>
      <View top="150" left="290" backgroundColor="black" opacity="0.5" width="80" height="80" borderRadius="25" borderWidth="1" borderColor="#0000"></View>
      <View top="220" left="310"  backgroundColor="black" opacity="0.5" width="80" height="80" borderRadius="25" borderWidth="1" borderColor="#f000"></View>
      
      <View top="10" left="340" backgroundColor="black" opacity="0.5" width="80" height="80" borderRadius="25" borderWidth="3" borderColor="transparent"></View>
      <View top="80" left="360" backgroundColor="black" opacity="0.5" width="80" height="80" borderRadius="25" borderWidth="3" borderColor="#ff00"></View>
      <View top="150" left="380" backgroundColor="black" opacity="0.5" width="80" height="80" borderRadius="25" borderWidth="3" borderColor="#f0f0"></View>
      <View top="220" left="420"  backgroundColor="black" opacity="0.5" width="80" height="80" borderRadius="25" borderWidth="3" borderColor="#000f"></View>
		</View>
	</Window>
</Alloy>

Attachments

File	Date	Size
another_app.js	2015-01-15T02:50:11.000+0000	15144
app_timob_16909.js	2014-11-26T07:59:26.000+0000	7631
Screenshot_2014-05-02-17-04-26.png	2014-05-02T14:52:42.000+0000	44882
square.png	2015-01-15T02:50:11.000+0000	1548

Comments

Ritu Agrawal 2014-05-04

Moving this ticket to engineering as I can reproduce this issue on Android device (Galaxy Nexus) with the provided test case. It looks fine on iOS.
Fix Please 2014-05-20

Hi. Any update on the issue?
Fix Please 2014-07-01

Why the priority is set to low? Views looks really nasty because of this bug. Could you suggest a workaround and increase the priority, please.
Ingo Muschenetz 2014-07-06

The priority is set based in apart on the number of people requesting a fix. We will review this issue, but perhaps you can ask others to join you on this ticket.
ian young 2014-08-29

Looking forward to the fix for this issue. No anti-aliasing on rounded borders is surely a pretty big deal no? It means we can't create circular views that look any way decent on Android, including circular profile pictures, which is the current fashion after all.
Fix Please 2014-09-01

Hi ian young. I'm surprised and frustrated with such approach to bug fixing as well. But seems, I'm too tired to fight with them concerning each bug opened. We've already spent too much time with this. So we are seriously thinking about to stop wasting time and return back to native development. Unfortunately (
Eduardo Silva 2014-11-27

+1 to fix this issue. I really need this...
Vinicius Oliveira 2014-12-26

Please fix this !!!
Hieu Pham 2015-01-15

master PR: https://github.com/appcelerator/titanium_mobile/pull/6571
Vishal Duggal 2015-01-27

While the PR does not fully fix the issue for all use cases, the problem is mitigated.
Lokesh Choudhary 2015-03-13

Verified the fix. As [~vduggal] said the PR will mitigate the issue, we see minimal anti aliasing. Closing. Environment: Appc Studio : 4.0.0.201503062102 Ti SDK : 4.0.0.v20150312095013 CLI : 3.5.0-dev Alloy : 1.5.1 MAC Yosemite : 10.10.2 Nexus 5 - Android 5.0 Samsung S3 -Android 4.2.2

JSON Source