Jack Jack - 1 month ago 7
Android Question

Changing size of Icons inside TabHost bar

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:

enter image description here

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

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); 
Comments