Android: customizing the look of Tabs using TabHost & TabWidget
I opend a post about this before but I feel that I can now (after reading some other posts) better explain what I want and rephrase it so it will be better understand.
I followed the tutorial about Tab Layout on the dev guide and I managed to create tabs with it, but I want to do some customization to it (and I did look on other posts, but either the code had many mistakes to it or it didn't answer what I'm looking for).
The first problem I have is that the test is in most part over the icon instead of below it (I used an icon with dimensions 48x48 as recommended on the dev guide). I want the tab with to act like wrap_content does. I also want to change the text size (I think it's called the label).
I want to use hex triplets to change the background color of the tabs, to change it between to situations : when this tab is the one selected and when it's not.
I want to be able to change the color of the line that is below the tabs, I could not find any information on how to do this.
The code I'm currently using to create a new tab is (from the dev guide):
intent = new Intent().setClass(this, GroupsActivity.class);
spec = tabHost.newTabSpec("groups").setIndicator("groups",
res.getDrawable(R.drawable.ic_tab_groups))
.setContent(intent);
tabHost.addTab(spec);
(groups is the tab name).
Help is very much appreciated!
Answer
Rather than trying to customize the widget tabs themselves, here is an alternate approach that I've used successfully on a project that may save you some headaches:
The idea is to use a hidden TabWidget in your layout and control it with a customized LinearLayout containing Buttons. This way, you can more easily customize the buttons to look however you'd like. You'll control the actual TabWidget in your Activity within each button's OnClick.
Create your layout with both the TabWidget and the Buttons:
<?xml version="1.0" encoding="utf-8"?> <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"> <RelativeLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="bottom"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:visibility="gone" /> <LinearLayout android:id="@+id/tabbar" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button android:id="@+id/firstButton" android:layout_alignParentTop="true" android:background="@drawable/btn_first_on" android:layout_width="100dp" android:layout_height="43dp" android:clickable="true"></Button> <Button android:id="@+id/secondButton" android:layout_alignParentTop="true" android:background="@drawable/btn_second_off" android:layout_height="43dp" android:layout_width="100dp" android:clickable="true"></Button> <Button android:id="@+id/thirdButton" android:layout_alignParentTop="true" android:background="@drawable/btn_third_off" android:layout_height="43dp" android:layout_width="100dp" android:clickable="true"></Button> <Button android:id="@+id/forthButton" android:layout_alignParentTop="true" android:background="@drawable/btn_forth_off" android:layout_height="43dp" android:layout_width="100dp" android:clickable="true"></Button> </LinearLayout> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_below="@+id/tabbar" /> </RelativeLayout> </TabHost>Set up the onCreate of your activity to handle using the buttons for adjusting the tab views:
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // tabs firstButton = (Button) findViewById(R.id.firstButton); secondButton = (Button) findViewById(R.id.secondButton); thirdButton = (Button) findViewById(R.id.thirdButton); forthButton = (Button) findViewById(R.id.forthButton); Resources res = getResources(); // Resource object to get Drawables final TabHost tabHost = getTabHost(); // The activity TabHost TabHost.TabSpec spec; // Resusable TabSpec for each tab Intent intent; // Reusable Intent for each tab intent = new Intent().setClass(this, FirstGroupActivity.class); spec = tabHost.newTabSpec("first").setIndicator("First").setContent(intent); tabHost.addTab(spec); intent = new Intent().setClass(this, SecondGroupActivity.class); spec = tabHost.newTabSpec("second").setIndicator("Second").setContent(intent); tabHost.addTab(spec); intent = new Intent().setClass(this, ThirdGroupActivity.class); spec = tabHost.newTabSpec("third").setIndicator("Third").setContent(intent); tabHost.addTab(spec); intent = new Intent().setClass(this, ForthActivity.class); spec = tabHost.newTabSpec("forth").setIndicator("Forth").setContent(intent); tabHost.addTab(spec); tabHost.setCurrentTab(0); firstButton.setOnClickListener(new OnClickListener() { public void onClick(View v) { tabHost.setCurrentTab(0); firstButton.setBackgroundResource(R.drawable.btn_first_on); secondButton.setBackgroundResource(R.drawable.btn_second_off); thirdButton.setBackgroundResource(R.drawable.btn_third_off); forthButton.setBackgroundResource(R.drawable.btn_forth_off); } }); secondButton.setOnClickListener(new OnClickListener() { public void onClick(View v) { tabHost.setCurrentTab(1); firstButton.setBackgroundResource(R.drawable.btn_first_off); secondButton.setBackgroundResource(R.drawable.btn_second_on); thirdButton.setBackgroundResource(R.drawable.btn_third_off); forthButton.setBackgroundResource(R.drawable.btn_forth_off); } }); thirdButton.setOnClickListener(new OnClickListener() { public void onClick(View v) { tabHost.setCurrentTab(3); firstButton.setBackgroundResource(R.drawable.btn_first_off); secondButton.setBackgroundResource(R.drawable.btn_second_off); thirdButton.setBackgroundResource(R.drawable.btn_third_on); forthButton.setBackgroundResource(R.drawable.btn_forth_off); } }); forthButton.setOnClickListener(new OnClickListener() { public void onClick(View v) { tabHost.setCurrentTab(4); firstButton.setBackgroundResource(R.drawable.btn_first_off); secondButton.setBackgroundResource(R.drawable.btn_second_off); thirdButton.setBackgroundResource(R.drawable.btn_third_off); forthButton.setBackgroundResource(R.drawable.btn_forth_on); } }); }
As you can see, I'm using drawables for the images of the buttons on and off. Using this technique, you're not limited to the options available when simply just trying to customize the look of the TabWidget's tabs and you can create a completely custom look to your tabs.