[TIMOB-27508] Android: Ti.UI.Button with image is rendered incorrectly
| GitHub Issue | n/a |
|---|---|
| Type | Improvement |
| Priority | Medium |
| Status | Open |
| Resolution | Unresolved |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | Android |
| Labels | n/a |
| Reporter | Hans Knöchel |
| Assignee | Unknown |
| Created | 2019-10-29T08:54:28.000+0000 |
| Updated | 2019-12-12T20:24:38.000+0000 |
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):
var win = Ti.UI.createWindow();
var btn = Ti.UI.createImageView({ width: 20, height: 22, image: 'example.png' });
win.add(btn);
win.open();
Attachments
| File | Date | Size |
|---|---|---|
| Bildschirmfoto 2019-10-29 um 09.50.15.png | 2019-10-29T08:54:11.000+0000 | 5867 |
| example.png | 2019-10-29T08:53:42.000+0000 | 3243 |
| MaskYinYang.png | 2019-10-29T21:47:51.000+0000 | 10020 |
[~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.
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.
[~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. On 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. On 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. In my opinion, the best approach is don't set the button height. Leave it as
Ti.UI.SIZEso that the button can fully display the image without it being clipped/squished. Try testing it with the attached "MaskYinYang.png" image that I've attached to this ticket and you'll see what I mean. *Side Note:* I 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.