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.

[You better try this example](http://stackoverflow.com/a/6992662/940096) I always suggest this example to all of one. — Praveenkumar, May 17 '12 at 07:39
http://stackoverflow.com/questions/5567532/android-ui-tabactivity-issue/5567823#5567823 .. Try this post — Venky, May 17 '12 at 07:52
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(). — osayilgan, May 17 '12 at 08:09
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. — IgorGanapolsky, Apr 10 '14 at 18:22
@IgorGanapolsky then what is the solution i m also facing this issue — user3233280, Jan 09 '15 at 17:39
@user3233280 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. — IgorGanapolsky, Jan 09 '15 at 17:41
@IgorGanapolsky will material design work for below api level 21 — user3233280, Jan 09 '15 at 18:11
@IgorGanapolsky 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 — user3233280, Jan 09 '15 at 18:16

score 11 · Accepted Answer · answered Sep 18 '12 at 07:52

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.

What is getTabWidget()? – IgorGanapolsky Apr 10 '14 at 17:54 — IgorGanapolsky, Apr 10 '14 at 17:54

score 3 · Answer 2 · answered May 17 '12 at 09:50

3

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

answered May 17 '12 at 09:50

Osama Ahmad

235
3
5
14

1

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. – osayilgan May 17 '12 at 12:11
@osayilgan from applications resources means from drawable folder? – user3233280 Jan 09 '15 at 17:30
@user3233280 Yes, resources means anything bundled with your application. It can be anything in "Res" or "Assets" folder. – osayilgan Jan 12 '15 at 18:32

Android tabHost and tabWidget icon issue

2 Answers2