Titanium/Appcelerator images will not show on Android

Question

I'm back with tales of frustrating adventures. This time concerning images on the android side of titanium.

Long story short, I can't get any images to show up for android whatsoever, whether it be a background image or a plain image in an imageView object.

I will provide code I'm trying and keep it extremely small and simple so that it can be easily replicated for all of our testing purposes.

The Code:

Attempt #1 programatically creating view and image:

index.js

var header = Ti.UI.createImageView({
    width: 300,
    image: '/images/header.png',
    width: 300
});

var win = Ti.UI.createWindow({
    backgroundColor: 'white',
    height: Ti.UI.FILL,
    title: 'test',
    width: Ti.UI.FILL
});

win.add(header);

win.open();

Attempt #2 plain jane .xml and .tss styling:

index.js:

$.index.open();

index.xml:

<Alloy>
    <Window class="container">
        <Label id="label">Hello World!!</Label>
        <ImageView id='img1'></ImageView>
    </Window>
</Alloy>

index.tss:

".container": {
    backgroundColor: 'white'
}

"#img1": {
    width: 300,
    image: '/header.png',
    width: 300,
    top: 0,
    left: 0
}

file locations (i copied the same image to 3 different locations to try and get something):

app/assets/header.png
app/assets/android/header.png
app/assets/android/images/header.png

IMPORTANT, What I have tried:

using "/images/header.png
using "images/header.png"
using "header.png"
using "/header.png"

forgot to meantion, the result of executing this is always the white background with my "hello world" label and thats it. — Mike Kellogg
@Shawn good question. Yes I have attempted to use 3 or 4 different images. all of which I have put into the project. I also went out to google and picked a stock png image to try to see if it was me or something. This also didn't work. I have also tried using Ti.FileSystem.getFile to make sure my path is correct, but I'm looking at seeing all my images in the "resources" build folder so I don't think I'm having pathing issues. I also drew a border around the image to see where it would be on the app and I see a border but no image. — Mike Kellogg

Soumya Soumya · Accepted Answer · 2016-02-25T20:03:27

First thing, in the ImageView property you have mentioned the width twice, so you can remove one declaration and put the height of the image, like 300 (you can put Ti.UI.SIZE to maintain the aspect ratio)

Second, put the images inside app/asset/android/images/res-<density> respectively. Replace <density> with for example mdpi / hdpi / xhdpi. (you can put this in res-hdpi for testing)

Do a clean build and then check if it is getting reflected or not.

Titanium/Appcelerator images will not show on Android

3 Answers