Question

i’m making an android application, and i have a tabhost and two tabs in my xml. I have called them and they work just fine. But i want to get rid of the ugly grey/orange color on tabs. I have tried setting the bg using an image. I used this code:

th.getTabWidget().setBackgroundResource(R.drawable.tab_normal);

But it shows up like this:

How can i get it to replace the gray and orange color?

Thanks

Answer 1

Steps to fully customize tabwidget:

1. Create custom layout for tabwidget: this layout similar to default one which consist of one Icon and one TextView. You can choose whatever layout you want. Notice that the parent layout has stateful background tabwidget_selector. This drawable is the key to replace default orange focus color. You can choose your own focus color.

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:background="@drawable/tabwidget_selector"
   android:gravity="center"
   android:orientation="vertical" >
   
   <ImageView
       android:id="@+id/tabIndicatorIcon"
       android:layout_width="28dp"
       android:layout_height="28dp"
       android:layout_marginTop="2dp" />
   
   <TextView
       android:id="@+id/tabIndicatorText"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginBottom="2dp"
       android:textColor="@color/white" />
   

2. Write function which return a view for tabwidget. Set text, icon drawable for your tabwidget

   private View getTabIndicatorView(Context context, String tag, int drawable) {
       View view = LayoutInflater.from(context).inflate(
               R.layout.tab_widget_custom, null);
       TextView tv = (TextView) view.findViewById(R.id.tabIndicatorText);
       tv.setText(tag);
       ImageView tabIndicatorIcon = (ImageView) view
               .findViewById(R.id.tabIndicatorIcon);
       tabIndicatorIcon.setBackgroundResource(drawable);
       return view;
   
   }
   

3. Use this function in your activity:

TabHost.TabSpec setIndicator(View view) Specify a view as the tab
indicator.

       Intent intent;
        TabHost.TabSpec spec;

        spec = tabHost.newTabSpec("Inbox").setIndicator(
                getTabIndicatorView(MainTabActivity.this, "Hộp thư",
                        R.drawable.tin_nhan_tab_selector));
        intent = new Intent(this, xxxx.InboxActivity.class);

        spec.setContent(intent);
        tabHost.addTab(spec);