[TIMOB-19912] tintColor for Android ImageView

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2016-04-02T09:56:37.000+0000
Affected Version/s	n/a
Fix Version/s	Release 5.4.0
Components	Android
Labels	android, imageview, parity
Reporter	Michael Gangolf
Assignee	Hans Knöchel
Created	2015-11-07T10:51:16.000+0000
Updated	2016-06-27T21:06:28.000+0000

Description

Adding tintColor property to Android using ImageView.setColorFilter() Pull Request: https://github.com/appcelerator/titanium_mobile/pull/7877

$.img2.setTintColor("#FF0000");
$.img3.tintColor = "#F0FF0F";
$.index.open();

<Alloy>
	<Window class="container">
		<ImageView id="img1"></ImageView>
		<ImageView id="img2"></ImageView>
		<ImageView id="img3"></ImageView>
	</Window>
</Alloy>

".container" : {
    backgroundColor: "white"
}
"#img1" : {
    image: "/images/img.png",
    top: 0,
    width: 150,
    height: 150
}
"#img2" : {
    image: "/images/img.png",
    width: 150,
    height: 150
}

"#img3" : {
    image: "/images/img.png",
    bottom: 0,
    width: 150,
    height: 150
}

Attachments

File	Date	Size
ezgif.com-optimize(1).gif	2015-11-07T12:50:15.000+0000	285398
tint.png	2015-11-07T10:50:50.000+0000	78623

Comments

Michael Gangolf 2015-11-07

-https://github.com/appcelerator/titanium_mobile/pull/7410- (old PR) Pull request is "work in progress". I still need to update the documentation but it's working already (see attachment)
Michael Gangolf 2015-11-07

fixed 'UI Thread' errors. GIF showing setTintColor in touchstart/touchend event
Michael Gangolf 2016-03-23

new clean pull request: https://github.com/appcelerator/titanium_mobile/pull/7877 Will create a diffrerent PR for Ti.UI.Button.image tintColor

Hans Knöchel 2016-04-02

PR approved, great work [~michael]! Demo:

   
   var win1 = Titanium.UI.createWindow({
       title:'Tab 1',
       backgroundColor:'#fff'
   });
   
   var img = Ti.UI.createImageView({
       image: "KS_nav_ui.png",
       tintColor: "red",
       top: 20
   });
   
   var img2 = Ti.UI.createImageView({
       image: "KS_nav_ui.png",
       tintColor: "#ff0",
       top: 200
   });
   
   setTimeout(function() {
       img.setTintColor("#ff0");
       img2.setTintColor("red");
   },3000);
   
   win1.add(img);
   win1.add(img2);
   
   win1.open();

Lokesh Choudhary 2016-06-27

Verified the fix. tintColor for ImageView works as expected. Closing. Environment: Appc Studio : 4.7.0.201606150733 Ti SDK : 5.4.0.v20160617074028 Ti CLI : 5.0.9 Alloy : 1.9.0 MAC El Capitan : 10.11.4 Appc NPM : 4.2.7-2 Appc CLI : 5.4.0-18 Node: 4.4.4 Nexus 6 - Android 6.0.1

JSON Source