Images in iOS and Android

You must Login before you can answer or comment on any questions.

Hi,

I'm new in Appceleraror and I don't know if the apps automatically get the corrects dpi images of the directories, depending of the dpi phone, or I have to control that in the app.

If is the first case, can someone puts a correct images directories tree for iOS and android?

Thanks and sorry by my english.

4 Answers

Android already has a correct image directory tree for default projects. iOS uses image names with an @2x.png at the end for retina display images.

— answered 1 year ago by Anthony Decena
answer permalink
4 Comments
  • Thanks, but I put the images in that directories and running the app the images are not showed, the problem maybe the code, I tried these ways:

    a) var tab3 = Ti.UI.createTab({
            title: L('find'),
            icon: '../images/c-find.png',
            window: win3
        });
     
    b) var tab3 = Ti.UI.createTab({
            title: L('find'),
            icon: '/images/c-find.png',
            window: win3
        });
     
    c) var tab3 = Ti.UI.createTab({
            title: L('find'),
            icon: 'images/c-find.png',
            window: win3
        });
    Neither work. The images are in this directory tree:
    Resources
        - android
            - images
                - res-...-hdpi
                    · image1.png
                ...
                - res-...-xhdpi
                    · image1.png
        - images (empty)
        - iphone
            · image1.png
            · image1@2x.png
            ...
    Do you know where I'm wrong?

    — commented 1 year ago by Alonso Pinar Mora

  • You haven't shared any info about your environment so there is no way to tell whether or not the images in the folders you have provided are the proper sizes for the device you are using.

    — commented 1 year ago by Anthony Decena

  • Sorry,

    I'm working with de iOS simulator, where is working now, and I have two Android devices, Galaxy Note II (I think this is xhdpi), and a SE Arc S (I think this is hdpi). In both of them is not working. The code that is working in iOS is this (I put the images in the directory: Resources/iphone/ and works fine in this operating system):

    var tab1 = Ti.UI.createTab({
            title: L('map'),
            icon: 'image1.png',
            window: win1
        });
    And the images are in the default directories tree for Android:
    - Resources
        - android
            - images
                - res-long-land-ldpi
                    · image1.png (33x33 px)
                - res-long-port-ldpi
                    · image1.png (33x33 px)
                - res-notlong-land-ldpi
                    · image1.png (33x33 px)
                - res-notlong-port-ldpi
                    · image1.png (33x33 px)
     
                - res-long-land-mdpi
                    · image1.png (44x44 px)
                - res-long-port-mdpi
                    · image1.png (44x44 px)
                - res-notlong-land-mdpi
                    · image1.png (44x44 px)
                - res-notlong-port-mdpi
                    · image1.png (44x44 px)
     
                - res-long-land-hdpi
                    · image1.png (66x66 px)
                - res-long-port-hdpi
                    · image1.png (66x66 px)
                - res-notlong-land-hdpi
                    · image1.png (66x66 px)
                - res-notlong-port-hdpi
                    · image1.png (66x66 px)
     
                - res-long-land-xhdpi
                    · image1.png (88x88 px)
                - res-long-port-xhdpi
                    · image1.png (88x88 px)
                - res-notlong-land-xhdpi
                    · image1.png (88x88 px)
                - res-notlong-port-xhdpi
                    · image1.png (88x88 px)
    Do I have to update some XML to work all resolutions on Android?

    Thanks.

    — commented 1 year ago by Alonso Pinar Mora

  • Show 1 more comment

Hello Alonso,

From what I am understanding you want to have different icons depending on which operating system you are using. All you need to do is keep all of your images in one folder, call it "images". In this folder you can have both "image1.png" and "image1@2x.png" and your device should automatically pick up if it has retina display and it will display the higher resolution ("image1@2x.png") image automatically.

On the other hand if you want to have separate images for iPhone and Android you would need to put in place some logic to determine which OS you were on and then create two different tabs with icon urls at two different folders.

for android you might have

androidImages/image1.png
and for iPhone
iphoneImages/image1.png
iphoneImages/image1@2x.png
I wasn't sure exactly what you are trying to accomplish from your question and code so I provided a couple answers for you.

Hope this helps,

Carter

— answered 1 year ago by Carter Lathrop
answer permalink
1 Comment
  • Hello,

    no the images are the same, with differents sizes depending the device dpi. In iOS is working now, but not in Android, and I don't know why.

    Thanks.

    — commented 1 year ago by Alonso Pinar Mora

Well,

finally for iOS the images are showed in the app, but in Android no, and I don't know why. The code, that works in iOS, is this:

var tab1 = Ti.UI.createTab({
        title: L('map'),
        icon: 'image1.png',
        window: win1
    });
The images in iOS are in the default directory and the images in Android are in the default tree directories too:
- Resources
    - android
        - images
            - res-...-ldpi
                · image1.png
            - res-...-mdpi
                · image1.png
            - res-...-hdpi
                · image1.png
            - res-...-xhdpi
                · image1.png
            ...
What can I do to let Android work with the images?

Hi Alonso, try using the complete absolute path for the image file, if it works then you can store the image path at some variable and use it later on.

eg: alternative approach

var ldpi_image = /android/images/res-long-land-ldpi;
var mdpi_image = /android/images/res-long-land-ldpi;
var hdpi_image = /android/images/res-long-land-ldpi;
var xhdpi_image = /android/images/res-long-land-ldpi;
 
// now you can check the density at run time and make imagePath variable accordingly
var imagePath = ldpi_image + "/image1.png";
 
var tab3 = Ti.UI.createTab({
        title: L('find'),
        icon:imagePath 
        window: win3
    });
I am not at my developer machine, else I would have suggested you with density check.

try at your end and let me know.

— answered 1 year ago by Ashish Nigam
answer permalink
2 Comments
  • I think that this works, but my question was precisely to avoid this solution, because the app is for iOS too, and if I have to check the system and dpi on each image I prefer develop the Android version in native enviroment.

    — commented 1 year ago by Alonso Pinar Mora

  • if this works then, Good why you are going to check for each image.... make it a function using density check and imagePath and use that when ever you use to set image in imagePATH.

    eg: function

    function imagePath (imagename)
    {
    var imagePath;
    if(Ti.Platform.Android){
    var ldpi_image = "/android/images/res-long-land-ldpi/";
    var mdpi_image = "/android/images/res-long-land-ldp/I";
    var hdpi_image = "/android/images/res-long-land-ldpi/";
    var xhdpi_image = "/android/images/res-long-land-ldpi/";
     
    if(Ti.Platform.DisplayCaps.Density === "low density")
    {
    imagePath = ldpi_image + imagename;
    }
    similary for other density check...
     
    else if(){
    }
    else if(){
    }
    else if(){
    }
    }
    else {
    if(Ti.Platform.iPhone || Ti.Platform.iPad){
    imagePath = Path for iOS image;
    }
    }
     
    return imagePath;
    }
     
    // then use in like
     
    var tab3 = Ti.UI.createTab({
            title: L('find'),
            icon: imagePath(image1) // function will return the path required
            window: win3
        });
    I am not at my developer machine so make any syntactic or symbolic mistake correct and use it like fun

    — commented 1 year ago by Ashish Nigam

Your Answer

Think you can help? Login to answer this question!