Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28558] TiAPI: Add property "imageIsMask" to Ti.UI.Button

GitHub Issuen/a
TypeNew Feature
PriorityLow
StatusClosed
ResolutionFixed
Resolution Date2021-10-28T21:59:55.000+0000
Affected Version/sn/a
Fix Version/sRelease 10.2.0
ComponentsAndroid, iOS
Labelsandroid, button, iOS, image, mask, parity
ReporterJoshua Quick
AssigneeJoshua Quick
Created2021-10-15T23:41:44.000+0000
Updated2021-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

FileDateSize
Button-Android-Dark.png2021-10-16T00:26:11.000+0000446990
Button-Android-Light.png2021-10-16T00:26:10.000+0000444035
Button-iOS-Light.png2021-10-16T00:26:11.000+0000909100
controls.png2021-10-16T00:26:45.000+000015850
controls@2x.png2021-10-16T00:26:45.000+000016447
controls@3x.png2021-10-16T00:26:45.000+000017184
RedLogo.png2021-10-16T00:26:45.000+000024011

Comments

  1. Joshua Quick 2021-10-16

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/13125
  2. Joshua Quick 2021-10-27

    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.
  3. Joshua Quick 2021-10-27

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/13148

JSON Source