{ "id": "174316", "key": "TIMOB-27508", "fields": { "issuetype": { "id": "4", "description": "An improvement or enhancement to an existing feature or task.", "name": "Improvement", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [], "resolution": null, "resolutiondate": null, "created": "2019-10-29T08:54:28.000+0000", "priority": { "name": "Medium", "id": "3" }, "labels": [], "versions": [], "issuelinks": [], "assignee": null, "updated": "2019-12-12T20:24:38.000+0000", "status": { "description": "The issue is open and ready for the assignee to start work on it.", "name": "Open", "id": "1", "statusCategory": { "id": 2, "key": "new", "colorName": "blue-gray", "name": "To Do" } }, "components": [ { "id": "10202", "name": "Android", "description": "Android Platform" } ], "description": "When using a Ti.UI.Button with an image that is set to a smaller ratio than the physical image size, it is rendered incorrectly (example image is attached):\r\n\r\n{code:js}\r\nvar win = Ti.UI.createWindow();\r\nvar btn = Ti.UI.createImageView({ width: 20, height: 22, image: 'example.png' });\r\nwin.add(btn);\r\nwin.open();\r\n{code}\r\n\r\nExpected behavior: The image is rendered correctly.\r\nActual behavior: See below.\r\n\r\n !Bildschirmfoto 2019-10-29 um 09.50.15.png|thumbnail! \r\n\r\nThis works fine on iOS and bugs us since ages. Please fix this parity issue.", "attachment": [ { "id": "67092", "filename": "Bildschirmfoto 2019-10-29 um 09.50.15.png", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2019-10-29T08:54:11.000+0000", "size": 5867, "mimeType": "image/png" }, { "id": "67093", "filename": "example.png", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2019-10-29T08:53:42.000+0000", "size": 3243, "mimeType": "image/png" }, { "id": "67095", "filename": "MaskYinYang.png", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2019-10-29T21:47:51.000+0000", "size": 10020, "mimeType": "image/png" } ], "flagged": false, "summary": "Android: Ti.UI.Button with image is rendered incorrectly", "creator": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "subtasks": [], "reporter": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "environment": null, "comment": { "comments": [ { "id": "452335", "author": { "name": "ahutton", "key": "ahutton", "displayName": "Alan Hutton", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~hknoechel] Can you provide more information in the issues? I don't want to guess as to what configuration/environment since with Android, it could be a number of things. Please include SDK version, Simulator (or Device for DPI), Android API version, etc.. I am not able to reproduce the issue with SDK 8.2.1.GA.. I've tried on Pixel 3a Device and emulator (API 29), and Pixel 3a emulator (API 28), and for reference, iPhone 11 iOS 13.0.", "updateAuthor": { "name": "ahutton", "key": "ahutton", "displayName": "Alan Hutton", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2019-10-29T17:40:00.000+0000", "updated": "2019-10-29T17:40:00.000+0000" }, { "id": "452340", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "I think it's related to density specific images, e.g. Resources/android/images/xxhdpi/example.png (scale 3x) and Resources/android/images/xhdpi/example.png (scale 2). I can try to prepare a sample project, but ideally that already exists internally at Appc.", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2019-10-29T18:18:12.000+0000", "updated": "2019-10-29T18:18:12.000+0000" }, { "id": "452348", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~hknoechel], this is happening because you are setting the height on the button. Yes, there is a platform/parity difference here, but neither approach is necessary wrong/buggy either.\r\n\r\nOn iOS, the image will be \"scaled\" to fit the size of the button. However, it does not scale the image evenly. The image will appear \"squished\" if you make the height shorter.\r\n\r\nOn Android, the image will be loaded as-is and \"clipped\" within the button's bounds. This doesn't look great either if the button height is too short.\r\n\r\nIn my opinion, the best approach is don't set the button height. Leave it as {{Ti.UI.SIZE}} so that the button can fully display the image without it being clipped/squished.\r\n\r\nTry testing it with the attached \"MaskYinYang.png\" image that I've attached to this ticket and you'll see what I mean.\r\n\r\n*Side Note:*\r\nI think the iOS code should be changed to scale the image evenly to get rid of the squished effect. We can change the Android code to do the same. But for now, neither look good.", "updateAuthor": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2019-10-29T21:50:43.000+0000", "updated": "2019-10-29T21:50:43.000+0000" } ], "maxResults": 3, "total": 3, "startAt": 0 } } }