CODEWITHSUNDEEP
androidappceleratorappcelerator-titanium
Mike Kellogg
Mike Kellogg

Reputation: 1178

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):

IMPORTANT, What I have tried:

Upvotes: 0

Views: 1748

Answers (3)

David Loekito
David Loekito

Reputation: 73

put your image : app/assets/images/header.png

then access it with

<ImageView id='img1' image="/images/header.png"></ImageView>

important : try to clean your project first for every changes you made at assets folder before you run the app!

Upvotes: 1

Soumya
Soumya

Reputation: 1420

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.

Upvotes: 3

abada henno
abada henno

Reputation: 740

Very Simple!

Alloy example:

Put your image at app/assets/images for example app/assets/images/header.png .

Now your code is 

   <ImageView id='img1' image='/images/header.png'  ></ImageView>

Or in .tss file 

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

End !

Upvotes: 1

Related Questions