[TIMOB-17363] Android: Add "Ti.UI.MaskedImage" support
GitHub Issue | n/a |
---|---|
Type | New Feature |
Priority | Low |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2018-05-17T10:26:05.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 7.3.0 |
Components | Android |
Labels | android, android-l, demo_app, maskedimage |
Reporter | Ingo Muschenetz |
Assignee | Joshua Quick |
Created | 2014-07-22T16:26:31.000+0000 |
Updated | 2018-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
File | Date | Size |
---|---|---|
MaskedImageTest.zip | 2018-04-28T04:29:26.000+0000 | 101730 |
MaskedImageTest-Android.png | 2018-04-28T04:55:52.000+0000 | 184767 |
MaskedImageTest-iOS.png | 2018-04-28T04:46:21.000+0000 | 70508 |
Screenshot1.png | 2018-04-30T22:51:59.000+0000 | 398009 |
Screenshot2.png | 2018-04-30T22:51:59.000+0000 | 465803 |
Screenshot3.png | 2018-04-30T22:51:59.000+0000 | 388504 |
Screenshot4.png | 2018-04-30T22:51:59.000+0000 | 174490 |
Screenshot5.png | 2018-04-30T22:52:00.000+0000 | 420857 |
Screenshot6.png | 2018-04-30T22:51:59.000+0000 | 505431 |
Screenshot7.png | 2018-04-30T22:51:59.000+0000 | 402294 |
Screenshot8.png | 2018-04-30T22:51:59.000+0000 | 203860 |
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: OurTi.UI.Button
already supports atintColor
property. So, a button which uses a grayscaledbackgroundImage
with atintColor
already supports this feature.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 JavaDrawable.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.PR (master): https://github.com/appcelerator/titanium_mobile/pull/10013
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).
*Closing ticket.* The feature is present in SDK: {noformat} 7.3.0.v20180626174550 {noformat}