Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-17363] Android: Add "Ti.UI.MaskedImage" support

GitHub Issuen/a
TypeNew Feature
PriorityLow
StatusClosed
ResolutionFixed
Resolution Date2018-05-17T10:26:05.000+0000
Affected Version/sn/a
Fix Version/sRelease 7.3.0
ComponentsAndroid
Labelsandroid, android-l, demo_app, maskedimage
ReporterIngo Muschenetz
AssigneeJoshua Quick
Created2014-07-22T16:26:31.000+0000
Updated2018-06-27T13:39:11.000+0000

Description

*Original Request:* As of Android 5.0 (aka: Android L) you can define bitmaps as an alpha mask and tint them using a color resource. You create these assets only once and color each instance to match your theme. This is done via a Java Drawable class' setTint(), setTintList(), and setTintMode() method. https://developer.android.com/reference/android/graphics/drawable/Drawable.html#setTint(int) *Proposed Solution:* This should be implemented via our existing Ti.UI.MaskedImage feature which is currently iOS only. This way we have parity between platforms. https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.MaskedImage The concept is exactly the same. You apply a color or image to a grayscaled mask and specify the PorterDuff compositing mode. https://developer.android.com/reference/android/graphics/PorterDuff.Mode.html Instead of using Android 5.0's tinting APIs, we should use Android's Drawable and Canvas classes instead which support tinting/masking in all Android OS versions. _(The new tinting methods are there out of convenience for a pre-existing feature.)_ *Note:* This feature would also provide an alternate solution for developers who want to display an ImageView with rounded borders. Since rounded borders have known hardware acceleration bugs on Google's end, an alternative solution is to use a MaskedImage with a circular mask instead. This is how it's usually done by native Android developers anyways.

Attachments

FileDateSize
MaskedImageTest.zip2018-04-28T04:29:26.000+0000101730
MaskedImageTest-Android.png2018-04-28T04:55:52.000+0000184767
MaskedImageTest-iOS.png2018-04-28T04:46:21.000+000070508
Screenshot1.png2018-04-30T22:51:59.000+0000398009
Screenshot2.png2018-04-30T22:51:59.000+0000465803
Screenshot3.png2018-04-30T22:51:59.000+0000388504
Screenshot4.png2018-04-30T22:51:59.000+0000174490
Screenshot5.png2018-04-30T22:52:00.000+0000420857
Screenshot6.png2018-04-30T22:51:59.000+0000505431
Screenshot7.png2018-04-30T22:51:59.000+0000402294
Screenshot8.png2018-04-30T22:51:59.000+0000203860

Comments

  1. Joshua Quick 2018-04-07

    Android L's (aka: Android 5.0) drawable tinting is mostly intended as an image masking feature. We don't need to use its new tinting methods. Masking can be done on all Android OS versions via... https://developer.android.com/reference/android/graphics/PorterDuff.Mode.html I think this should be implement via Titanium's existing Ti.UI.MaskedImage, which is currently iOS only. https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.MaskedImage Side Note: Our Ti.UI.Button already supports a tintColor property. So, a button which uses a grayscaled backgroundImage with a tintColor already supports this feature.
  2. Joshua Quick 2018-04-18

    Also note that Android's Java "Drawable" class does not support using a ColorFilter and Tint at the same time. Calling Drawable.setColorFilter() disables tint and vice-versa... [Drawable.html#setColorFilter()](https://developer.android.com/reference/android/graphics/drawable/Drawable.html#setColorFilter(int,%20android.graphics.PorterDuff.Mode)) [Drawable.html#setTint()](https://developer.android.com/reference/android/graphics/drawable/Drawable.html#setTint(int)) On Android, Titanium's "tintColor" feature is implemented via the Java Drawable.setColorFilter() API. So, like I said above, we already support this feature, but we need to avoid Google's new tinting APIs since they conflict with their color-filter APIs. Implementing MaskedImage support is still the way to go.
  3. Joshua Quick 2018-04-26

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/10013
  4. Joshua Quick 2018-04-28

    Added Titanium test project: [^MaskedImageTest.zip] Note: The zip's images "MaskCamera.png" and "MaskCircleLock.png" came from the Android SDK. All other contained images were made by Axway (I created all other mask PNGs).
  5. Josh Longton 2018-06-27

    *Closing ticket.* The feature is present in SDK: {noformat} 7.3.0.v20180626174550 {noformat}

JSON Source