Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-28558

TiAPI: Add property "imageIsMask" to Ti.UI.Button

    Details

    • Story Points:
      5

      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();
      

        Attachments

        1. Button-Android-Dark.png
          Button-Android-Dark.png
          437 kB
        2. Button-Android-Light.png
          Button-Android-Light.png
          434 kB
        3. Button-iOS-Light.png
          Button-iOS-Light.png
          888 kB
        4. controls.png
          controls.png
          15 kB
        5. controls@2x.png
          controls@2x.png
          16 kB
        6. controls@3x.png
          controls@3x.png
          17 kB
        7. RedLogo.png
          RedLogo.png
          23 kB

          Activity

            People

            • Assignee:
              jquick Joshua Quick
              Reporter:
              jquick Joshua Quick
              Reviewer:
              Gary Mathews
            • Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                  Git Integration