Resizing the tabgroup header height in Titanium Android

Question

I am new to mobile development with Titanium Studio. I am developing an app for android. When I tried running it in WXGA720 screen emulator, which was looking good. But when I tried the same with WXGA800-7in screen emulator, it looks terrible. Below is the screenshot for your reference.

Screenshot from WXGA720:

WXGA720 screen

Screenshot from WXGA800-7in:

tabgroup abnormal size in WXGA800-7in

Please suggest. Thanks in advance.

When i use the emulator for Galaxy S3 (WXGA720) the tab header is good as shown above, but when i use emulator for Nexus 7 (WXGA800-7in) the tab icon and the title overlaps as shown above.. — balanv, Oct 19 '12 at 11:38

score 1 · Accepted Answer · edited Oct 19 '12 at 20:31

In Titanium when developing for Android, it uses same image for TabGroups. Bigger the image specified, bigger it will show up in the app. My solution was using different images for different devices.

Android let you do that automatically by different device profiles.

If you look at Resources/android/images, there are several directories like:

res-long-land-hdpi
res-long-land-ldpi
res-long-port-hdpi
res-long-port-ldpi
res-notlong-land-hdpi
...

Please check here for a complete description.

score 0 · Answer 2 · answered Oct 22 '12 at 14:06

I found a way to rectify this issue, as i would like to have my application only for Galaxy S3 and Nexus 7.

I wrote code to detect the screen size of Nexus 7 (height=1216 && width=800) and dynamically set the tab icon, i used smaller size tab icons for Nexus.

Resizing the tabgroup header height in Titanium Android

2 Answers2