CODEWITHSUNDEEP
androideclipsetabs
Stian Instebo
Stian Instebo

Reputation: 652

Setting tab background in eclipse

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:

Wrong bg

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

Thanks

Upvotes: 1

Views: 637

Answers (2)

Trung Nguyen
Trung Nguyen

Reputation: 7532

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

Upvotes: 1

Sharmilee
Sharmilee

Reputation: 1295

You can have background for tabwidget:

   <TabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<RelativeLayout
        android:layout_height="fill_parent"
        android:layout_width="fill_parent">

        <TabWidget
        android:id="@android:id/tabs"
        android:layout_alignParentBottom="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/tabbackground"
        android:layout_margin="7dp"

        />


        <FrameLayout
            android:id="@android:id/tabcontent" 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent" 
            android:layout_above="@android:id/tabs" 
            android:layout_alignParentLeft="true" 
            android:layout_alignParentTop="true" 
            android:layout_margin="5dp" 
            android:background="@drawable/list_shape">
         </FrameLayout>
</RelativeLayout>

Upvotes: 0

Related Questions