Tablet "drawable" Qualifier

A Titanium project for both Mobile+Tablet, completed mobile version perfectly but facing some complexity when coming to Tablet design. Below is the Matrix of qualifier which suppor

Solution 1:

Everything is fine just you are setting the path as a string

ie. icon:'Ti.App.Android.R.drawable.tab_icon'.

Instead you will have to set the image like below.

icon:Ti.App.Android.R.drawable.tab_icon

Edit

I found solution to handle multi-resolution for Android.

Here is my resources which I have putted in the resources/android/images folder

In this image I have created different images for each type of drawable folder. You can see bg.png in all the folder. In bg.png I have written text relevant to the drawable folder.

Here is my app.js file to display image in the imageView

Titanium.UI.setBackgroundColor('#000');

var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});

var view  = Ti.UI.createImageView({
    width : Ti.UI.SIZE,
    height : Ti.UI.SIZE,
    image : '/images/bg.png'

})

win1.add(view);
win1.open();

Now run the application in your device and check which image you are getting in the ImageView.

Note:: After loading the window if you will change the orientation it will not reload the image in the ImageView for that orientation because by default Titanium restrict orientation changed by putting android:configChanges="keyboardHidden|orientation" line in the manifest file which is auto generated.

You can change this default behavior by copying the generated manifest file from "/build/android/" to "/project directory/platform/android/"

After copying this file open the manifest file from "/project directory/platform/android/" directory and remove the above line(android:configChanges="keyboardHidden|orientation").

Save the file and run the application now you can check multi-orientation as well.

Also for tablet you can save image in the res-port-large or res-port-xlarge and res-land-large or res-land-xlarge for portrait and landscape respectively.

Edit2 ::

Also there is another approach to overcome with this issue. create below folders in root directory of the project.

Resources
platform
    -> res
        -> drawable
        -> drawable-ldpi
        -> drawable-mdpi
        -> drawable-hdpi
        -> drawable-xhdpi

Now put all your image in the respective folders.

Now from javascript file you can do below code to access these files.

var view  = Ti.UI.createImageView({
    width : Ti.UI.SIZE,
    height : Ti.UI.SIZE,
    image : Ti.App.Android.R.drawable.icon //Here icon is available to all above folders which we have created in /platform/res

})

Enjoy!!

Solution 2:

After doing some work with Titanium I came into conclusion that Titanium follows the same standard for naming drawable but the only difference is that in android we using drawable-hdpi but in Titanium it is res-hdpi.