Create small tabs in Android

Question

I am trying to create smaller tabs in android, but I cannot get it to work, because all that happens when I create a smaller tab is that it shows a large tab, but without the ability to draw.

This is my layout code for tabs now - but the height doesn't wrap for some reason - it just fits the usual Android layout height.

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> </FrameLayout> </LinearLayout> </TabHost> 

It would be great if someone helped me create something like a Facebook application - I think it looks really clean and I would like to implement something like this:

Answer 1

Well, that was a lot harder than I thought it should be, but nonetheless, it should provide you with the basic implementation of the look you want ...

  TabHost host = getTabHost(); TabSpec spec = null; TextView tab1 = null, tab2 = null; Intent intent = null; Resources resources = getResources(); XmlResourceParser parser = null; ColorStateList text = null; StateListDrawable[] drawables = new StateListDrawable[2]; int[] selected = {STATE_SELECTED}, unselected = {STATE_UNSELECTED}; Color selectedColor = Color.argb(255, 255, 255, 255), defaultColor = Color.argb(255, 119, 119, 119); // Load the colour lists. parser = resources.getXml(R.color.tab_text); text = ColorStateList.createFromXml(getResources(), parser); // Add an initial tab. ...Create Tab Contents Here... spec = host.newTabSpec("tab1"); tab1 = new TextView(this); tab1.setText(R.string.all_tab_title); tab1.setGravity(android.view.Gravity.CENTER); tab1.setTextSize(18.0f); tab1.setTextColor(text); spec.setIndicator(tab1); spec.setContent(intent); host.addTab(spec); // Add a second tab. ...Create Tab Contents Here... spec = host.newTabSpec("tab2"); tab2 = new TextView(this); tab2.setText(R.string.category_tab_title); tab2.setGravity(android.view.Gravity.CENTER); tab2.setTextSize(18.0f); tab2.setTextColor(text); spec.setIndicator(tab2); spec.setContent(intent); host.addTab(spec); // Set the background drawable for the tabs and select the first tab. drawables[0] = new StateListDrawable(); drawables[0].addState(selected, new ColorDrawable(selectedColor)); drawables[0].addState(unselected, new ColorDrawable(defaultColor)); drawables[1] = new StateListDrawable(); drawables[1].addState(selected, new ColorDrawable(selectedColor)); drawables[1].addState(unselected, new ColorDrawable(defaultColor)); tab1.setBackgroundDrawable(drawables[0]); tab2.setBackgroundDrawable(drawables[1]); host.setCurrentTab(0); 

This will not take into account the borders of the tabs or the distance between the elements. You will also need to define a list of color states as indicated in the catalog. / res / color ...

 <?xml version="1.0" encoding="UTF-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:color="#ff000000" /> <item android:state_selected="false" android:color="#ffaaaaaa" /> <item android:color="#ffffffff"/> </selector> 

Hope this helps.

Answer 2

I saw this on another forum, but decided that I will pass it here.

 TabHost th = getTabHost(); .... // Setup all the tabs -- in my case, with text only -- no icons .... int iCnt = th.getTabWidget().getChildCount(); for(int i=0; i&ltiCnt; i++) th.getTabWidget().getChildAt(i).getLayoutParams().height /= 2; // Or the size desired