feat(android): allow VectorDrawables in ImageView

[m1ga]

Currently an Android ImageView thinks a drawable is always a bitmap and tries to load it from the drawable ID. If it is a vector XML it won't show anything.

This PR will check if it is a VectorDrawable and then just use that ID and assign it.

Top 3 ImageViews = red: image, green: bitmap drawable (png file), blue: XML drawable with a vector
Bottom left: ListView with Header and Footer
Bottom right: tableView
Green part in the middle: scrollView

var win = Ti.UI.createWindow({});
win.open();
var img1 = Ti.UI.createImageView({
	top: 50,
	width: 50,
	height: 50,
	borderWidth: 1,
	borderColor: "red",
	image: "/appicon.png"
});
win.add(img1)
var img2 = Ti.UI.createImageView({
	top: 100,
	width: 50,
	height: 50,
	borderWidth: 1,
	borderColor: "green",
	image: Titanium.App.Android.R.drawable.notificationicon
});
win.add(img2)
var img3 = Ti.UI.createImageView({
	top: 150,
	width: 50,
	height: 50,
	borderWidth: 1,
	borderColor: "blue",
	image: Titanium.App.Android.R.drawable.loyaltystampmask
});
win.add(img3)

let items = [];
var tblSection1 = Ti.UI.createTableViewSection();
for (var i = 0; i < 100; i++) {
	items.push({
		image: {
			image: Titanium.App.Android.R.drawable.loyaltystampmask
		}
	});

	var row1 = Ti.UI.createTableViewRow({
		height: 50,
		backgroundColor: "blue"
	})
	var rowImg = Ti.UI.createImageView({
		image: Titanium.App.Android.R.drawable.loyaltystampmask,
		left: 0,
		width: 50,
		height: 50
	});
	row1.add(rowImg)
	tblSection1.add(row1);
}

var hViewImg = Ti.UI.createImageView({
	width: 50,
	height: 50,
	image: Titanium.App.Android.R.drawable.loyaltystampmask
});
var hView = Ti.UI.createView({
	backgroundColor: "red",
	height: 50
});
hView.add(hViewImg);

var fViewImg = Ti.UI.createImageView({
	width: 50,
	height: 50,
	image: Titanium.App.Android.R.drawable.loyaltystampmask
});
var fView = Ti.UI.createView({
	height: 50
});
fView.add(fViewImg);

var listView1 = Ti.UI.createListView({
	height: "49%",
	width: "49%",
	left: 0,
	bottom: 0,
	templates: {
		'template': {
			childTemplates: [{
				type: 'Ti.UI.ImageView',
				bindId: 'image',
				properties: {
					left: 0,
					top: 0,
					width: 100,
					height: 100
				}
			}]
		}
	},
	defaultItemTemplate: 'template',
	sections: [Ti.UI.createListSection({
		headerView: hView,
		footerView: fView,
		items: items
	})]
});
win.add(listView1)


var table1 = Ti.UI.createTableView({
	data: [tblSection1],
	width: "49%",
	right: 0,
	height: "49%",
	bottom: 0,
});
win.add(table1)

var scrollView = Ti.UI.createScrollView({
  width: Ti.UI.FILL,
	height: 150,
	backgroundColor: "green",
  top: 210,
  contentWidth: 2000,
  contentHeight: 150
});
win.add(scrollView)

var sImg1 = Ti.UI.createImageView({
	width: 50,
	height: 50,
	left: 0,
	image: Titanium.App.Android.R.drawable.loyaltystampmask
});
var sImg2 = Ti.UI.createImageView({
	width: 50,
	height: 50,
	right: 0,
	image: Titanium.App.Android.R.drawable.loyaltystampmask
});

scrollView.add([sImg1, sImg2]);

Test:

• place a png called notificationicon.png into [app]/platform/android/res/drawable/
• place this XML loyaltystampmask.xml in the drawable folder
• run the code

[prashantsaini1]

Great. Could you please run more tests like using the vector images in ListItem, ListSection header or footer view, TableView and Scroll-view? I think it might need further handling to recycle vector images.

[m1ga]

good point! I'll test it with those elements too

[m1ga]

Ugly code but I've updated the example with: ScrollView, ListView (Header, Footer, Items) and TableView and all look fine so far. It's the normal ImageView, just with the vector image in the image set method, so I guess all other places should be fine too