[TIMOB-28558] TiAPI: Add property "imageIsMask" to Ti.UI.Button
GitHub Issue | n/a |
---|---|
Type | New Feature |
Priority | Low |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2021-10-28T21:59:55.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 10.2.0 |
Components | Android, iOS |
Labels | android, button, iOS, image, mask, parity |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2021-10-15T23:41:44.000+0000 |
Updated | 2021-10-28T21:59:55.000+0000 |
Description
*Summary:*
We should add a new boolean "imageIsMask" property to
Ti.UI.Button
. When set true
, the "image" assigned to the button will be tinted based on the "tintColor" or the default theme color. When set false
, the "image" will be displayed as-is.
*Current Behavior:*
On iOS, the button's "image" is always masked.
On Android, the button's "image" is always displayed as-is and is never masked.
This feature allows for parity between Android and iOS.
*Note:*
We may want to make a breaking-change on Android to have it default to masking the "image" by default like iOS. This would also match Google's material design. Especially since the Java MaterialButton
masks its icon by default and Titanium is not currently leveraging this feature.
*Example:*
const window = Ti.UI.createWindow({ layout: "vertical" });
window.add(Ti.UI.createButton({
title: " imageIsMask true",
image: OS_IOS ? "controls.png" : "controls@3x.png",
imageIsMask: true,
top: 80,
}));
window.add(Ti.UI.createButton({
title: " imageIsMask true (Green)",
image: OS_IOS ? "controls.png" : "controls@3x.png",
imageIsMask: true,
tintColor: "green",
top: 20,
}));
window.add(Ti.UI.createButton({
title: " imageIsMask false",
image: "RedLogo.png",
imageIsMask: false,
top: 20,
}));
window.open();
!Button-Android-Light.png|thumbnail! !Button-Android-Dark.png|thumbnail! !Button-iOS-Light.png|thumbnail!
Attachments
File | Date | Size |
---|---|---|
Button-Android-Dark.png | 2021-10-16T00:26:11.000+0000 | 446990 |
Button-Android-Light.png | 2021-10-16T00:26:10.000+0000 | 444035 |
Button-iOS-Light.png | 2021-10-16T00:26:11.000+0000 | 909100 |
controls.png | 2021-10-16T00:26:45.000+0000 | 15850 |
controls@2x.png | 2021-10-16T00:26:45.000+0000 | 16447 |
controls@3x.png | 2021-10-16T00:26:45.000+0000 | 17184 |
RedLogo.png | 2021-10-16T00:26:45.000+0000 | 24011 |
PR (master): https://github.com/appcelerator/titanium_mobile/pull/13125
The old code (before the above PR's changes) used to check if a "res/drawable" image existed before grabbing it from "assets". This allowed higher DPI images to be supported such as xxxhdpi. We need to restore this old behavior.
PR (master): https://github.com/appcelerator/titanium_mobile/pull/13148