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.

Backsaw

You better try this example I always suggest this example to all of one. – Wayzgoose

#5568032 .. Try this post – Kirovabad

Thanks for your answers they are quite helpful, I may use it later on. But what I want to do is setting these tab bar icons with icons that I downloaded from internet, and since I don't use drawable-mdpi or drawable-ldpi in resources they dont fit to tabbar properly according to the screen resolution. Instead of using resources I would like use icons in my internal memory. for example with the createDrawableFromPath(). – Backsaw

Your Flickr Links are dead. (404) - Just a reminder! :] – Tenedos

The problem with this solution is that if you want to use a Holo theme for your tabs, you will lose the default separators and underline visibility. – Capability

@Capability then what is the solution i m also facing this issue – Muscat

@Muscat The solution now is to use Material Design with a Toolbar with a LinearLayout hosting the tabs. See GoogleIO sample code on GitHub, or the samples in SDK 21. – Capability

@Capability will material design work for below api level 21 – Muscat

@Capability using this code i m only able to add only one tab ......why not others ? others tabs are adding but image setting is not working properly here is the code – Muscat

Answer 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.

Backsaw

What is getTabWidget()? – Capability

Answer 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

Feer

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. – Backsaw

@Backsaw from applications resources means from drawable folder? – Muscat

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