Changing size of Icons inside TabHost bar

Question

I need to change the size of the TabHosts's icons I have set up.

At the moment, the icons are the height of the bar and it looks pretty horrible because the icons are to big inside the bar:

Would there be any way for me to downsize the images inside the TabHost?

MainActivity:

public class MainActivity extends FragmentActivity {

/* Tab identifiers */
private final String TAB_A = "Appointments";
private final String TAB_B = "Calender";
private final String TAB_C = "Profile";
private final String TAB_D = "Settings";

private String selectedTab;

private static TabHost mTabHost;

private Fragment1 fragment1;
private Fragment2 fragment2;
private Fragment3 fragment3;
private Fragment4 fragment4;

@Override
protected void onCreate(Bundle savedInstanceState) {
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    fragment1 = new Fragment1();
    fragment2 = new Fragment2();
    fragment3 = new Fragment3();
    fragment4 = new Fragment4();

    mTabHost = (TabHost) findViewById(android.R.id.tabhost);
    mTabHost.setOnTabChangedListener(listener);
    mTabHost.setup();

    initializeTab();
}

// TABS

public void initializeTab() {
    TabHost.TabSpec spec = mTabHost.newTabSpec(TAB_A);
    mTabHost.setCurrentTab(0);
    spec.setContent(new TabHost.TabContentFactory() {
        public View createTabContent(String tag) {
            return findViewById(android.R.id.tabcontent);
        }
    });
    spec.setIndicator(createTabView(TAB_A, R.drawable.tab1_selector));
    mTabHost.addTab(spec);

    spec = mTabHost.newTabSpec(TAB_B);

    spec.setContent(new TabHost.TabContentFactory() {
        public View createTabContent(String tag) {
            return findViewById(android.R.id.tabcontent);
        }

    });

    spec.setIndicator(createTabView(TAB_B, R.drawable.tab2_selector));
    mTabHost.addTab(spec);

    spec = mTabHost.newTabSpec(TAB_C);
    spec.setContent(new TabHost.TabContentFactory() {
        public View createTabContent(String tag) {
            return findViewById(android.R.id.tabcontent);
        }
    });
    spec.setIndicator(createTabView(TAB_C, R.drawable.tab3_selector));

    mTabHost.addTab(spec);

    spec = mTabHost.newTabSpec(TAB_D);
    spec.setContent(new TabHost.TabContentFactory() {
        public View createTabContent(String tag) {
            return findViewById(android.R.id.tabcontent);
        }
    });
    spec.setIndicator(createTabView(TAB_D, R.drawable.tab4_selector));
    mTabHost.addTab(spec);

    mTabHost.setCurrentTab(0);
}

TabHost.OnTabChangeListener listener = new TabHost.OnTabChangeListener() {
    public void onTabChanged(String tabId) {
        /* Set current tab.. */
        if (tabId.equals(TAB_A)) {
            pushFragments(tabId, fragment1);
            selectedTab = TAB_A;
        } else if (tabId.equals(TAB_B)) {
            pushFragments(tabId, fragment2);
            selectedTab = TAB_B;
        } else if (tabId.equals(TAB_C)) {
            pushFragments(tabId, fragment3);
            selectedTab = TAB_C;
        } else if (tabId.equals(TAB_D)) {
            pushFragments(tabId, fragment4);
            selectedTab = TAB_D;
        }
    }
};


public void pushFragments(String tag, Fragment fragment) {

    FragmentManager manager = getSupportFragmentManager();
    FragmentTransaction ft = manager.beginTransaction();

    ft.replace(android.R.id.tabcontent, fragment);
    ft.commit();
}


private View createTabView(final String tabText, final int id) {
    View view = LayoutInflater.from(this).inflate(R.layout.tabs_icon, null);
    ImageView imageViewTabIcon = (ImageView) view
            .findViewById(R.id.tab_icon);
    imageViewTabIcon.setImageDrawable(getResources().getDrawable(id));

    return view;
}

public static void tabfresh() {
    mTabHost.setCurrentTab(0);
}

public static void tabfresh_sal() {
    mTabHost.setCurrentTab(1);
}
}

Answer 1

You need to create tabhost_row.xml so as to inflate it.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@color/white"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imgTab"
        android:layout_width="YOUR_WIDTH"
        android:layout_height="YOUR_HEIGHT" />


</FrameLayout>

Note: For above ImageView set height and width as per your requirment.

Then in your MainActivity.java, inflate tabhost_row.xml as below code.

public TabSpec setIndicator(Context ctx,TabSpec spec,int viewId,int resId,String name) {
        View v = LayoutInflater.from(ctx).inflate(R.layout.tab_row, null);
        ImageView imgTab = (ImageView) v.findViewById(viewId);
        imgTab.setImageDrawable(getResources().getDrawable(resId));

        return spec.setIndicator(v);
    }

Now, add your tab as below,

mTabHost.addTab(setIndicator(this,mTabHost.newTabSpec(Commons.TAG_HOME_CONTAINER_FRAGMENT),R.id.imgTab,R.drawable.home_selector,"Home"),HomeContainerFragment.class,null);