Android tabHost and tabWidget icon issue

Question

I'm working on an Android Application which uses the Tab Host icons downloaded from internet and Icon size is 30x30.

for(int i = 0; i < titleNames.size(); i++) 
{
    intent = new Intent().setClass(context, Gallery.class);
    sp = tabHost.newTabSpec(titleNames.get(i)).setIndicator(titleNames.get(i), res.getDrawable(R.drawable.icon)).setContent(intent);
    tabHost.addTab(sp);
}

If I use this code above(icon from resources) to set the indicator text and the icon, It works quite well and the icon fits to the tab widget.

for(int i = 0; i < titleNames.size(); i++) 
{
    intent = new Intent().setClass(context, Gallery.class);
    sp = tabHost.newTabSpec(titleNames.get(i)).setIndicator(titleNames.get(i), Drawable.createFromPath(path+iconNames.get(i))).setContent(intent);
    tabHost.addTab(sp);
}

But If I use this code(image downloaded from internet and its in internal memory) instead of the previous one, icons seem so small, and even the height and width values are same for both of the icons. I dont scale the icons when downloading them from internet and I save them as PNG. Anyone has any idea about what the problem is ?

Here is the tabhost with icons from resources

Here is the tabhost with icons downloaded from internet

SOLUTION:

Instead of adding objects to the tab host with my previous code, now I use the code below, and it works quite well. The difference between these two is new one is using a Layout which has image view and text view to indicate icon and the text below to set indicator of the intent. So in this way I'm able to call the method from image view to make the image fits to its bounds which is defined in the xml file. Here is the way to do it with View.

    private void addTab(String labelId, Drawable drawable, Class<?> c) {

    tabHost = getTabHost();
    intent = new Intent(this, c);
    spec = tabHost.newTabSpec("tab" + labelId);

    View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
    TextView title = (TextView) tabIndicator.findViewById(R.id.title);
    title.setText(labelId);

    ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
    icon.setImageDrawable(drawable);
    icon.setScaleType(ImageView.ScaleType.FIT_CENTER);

    spec.setIndicator(tabIndicator);
    spec.setContent(intent);
    tabHost.addTab(spec);
}

And here is the layout with image view and text view.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="55dip"    
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp"
android:weightSum="55" >
<ImageView 
    android:id="@+id/icon"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:src="@drawable/icon"
    android:adjustViewBounds="false"
    android:layout_weight="30"
/>
<TextView 
    android:id="@+id/title"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="25"
    android:gravity="center_horizontal"
/> 
</LinearLayout>

Thanks to @Venky and @SpK for giving me an idea.

Solution 1

Instead of adding objects to the tab host with my previous code, now I use the code below, and it works quite well. The difference between these two is new one is using a Layout which has image view and text view to indicate icon and the text below to set indicator of the intent. So in this way I'm able to call the method from image view to make the image fits to its bounds which is defined in the xml file. Here is the way to do it with View.

private void addTab(String labelId, Drawable drawable, Class<?> c) {

tabHost = getTabHost();
intent = new Intent(this, c);
spec = tabHost.newTabSpec("tab" + labelId);

View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
TextView title = (TextView) tabIndicator.findViewById(R.id.title);
title.setText(labelId);

ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
icon.setImageDrawable(drawable);
icon.setScaleType(ImageView.ScaleType.FIT_CENTER);

spec.setIndicator(tabIndicator);
spec.setContent(intent);
tabHost.addTab(spec);
}

And here is the layout with image view and text view.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="55dip"    
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp"
android:weightSum="55" >
<ImageView 
    android:id="@+id/icon"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:src="@drawable/icon"
    android:adjustViewBounds="false"
    android:layout_weight="30"
/>
<TextView 
    android:id="@+id/title"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="25"
    android:gravity="center_horizontal"
/> 
</LinearLayout>

Thanks to @Venky and @SpK for giving me an idea.

Solution 2

Tab icon dimensions for high-density (hdpi) screens: Full Asset: 48 x 48 px Icon: 42 x 42 px

Tab icon dimensions for medium-density (mdpi) screens: Full Asset: 32 x 32 px Icon: 28 x 28 px

Tab icon dimensions for low-density (ldpi) screens: Full Asset: 24 x 24 px Icon: 22 x 22 px

you can see this: http://developer.android.com/guide/practices/ui_guidelines/icon_design_tab.html

Comments

[osayilgan]

you can use this in the case you use the icons from application's resources not from internal memory, because there is only one dimension for downloaded icon.

[IgorGanapolsky]

What is getTabWidget()?

[user3233280]

@osayilgan from applications resources means from drawable folder?

[osayilgan]

@user3233280 Yes, resources means anything bundled with your application. It can be anything in "Res" or "Assets" folder.