Search code examples
androidappceleratorappcelerator-titanium

Titanium/Appcelerator images will not show on Android


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"

Solution

  • 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.