Android custom TabWidget

Question

I'm a newbie android developer, and I have a lot of question naturally :) I want to design an application which contains a tabbed activity. There will be 3 ImageButton and a small divisor between these buttons. If I press one of the button it will be focused. My question is: how can I modify the tabhost/tabwidget style? One picture if button is pressed and an another if it isn't. I don't need the android default highlighting can I override it somehow?

Thanks in advance!

Br, Peter

Answer 1

This will help you out:

<LinearLayout 
        android:id="@+id/header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/headerContent"
        android:orientation="horizontal"
        android:background="@drawable/bg_seablue"
        android:padding="10dip">

        <Button 
            android:layout_height="wrap_content" 
            android:id="@+id/tabOne"
            android:layout_width="fill_parent"
            android:layout_weight="1.0"
            android:background="@drawable/bg_tabs"
            android:padding="10dp"
            android:text="Tab 1"
            android:textColor="#000000"
            android:textSize="16dip"
            android:layout_marginRight="2dp"
            android:onClick="onClick"/>

       <Button 
            android:layout_height="wrap_content" 
            android:id="@+id/tabTwo"
            android:layout_width="fill_parent"
            android:layout_weight="1.0"
            android:background="@drawable/bg_tabs"
            android:padding="10dp"
            android:text="Tab 2"
            android:textColor="#000000"
            android:textSize="16dip"
            android:layout_marginRight="2dp"
            android:onClick="onClick"/>

       <Button 
            android:layout_height="wrap_content" 
            android:id="@+id/tabThree" 
            android:layout_width="fill_parent"
            android:layout_weight="1.0"
            android:textColor="#000000"
            android:background="@drawable/bg_tabs"
            android:padding="10dp"
            android:text="Tab 3"
            android:textSize="16dip"
            android:layout_marginRight="2dp"
            android:onClick="onClick"/>

    </LinearLayout>

The following code is for the bg of the tabs:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#d2d2d2" />
            <stroke
                android:width="1dp"
                android:color="#000000" />
            <corners
                android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ffffff"
                android:endColor="#ffffff"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#000000" />
            <corners
                android:radius="3dp" />
        </shape>
    </item>
</selector>

To see other pages when pressed on the buttons use the following code:

    public void onClick(View v) {

        Intent intent = new Intent();
        intent.setFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);

        switch(v.getId()){

            case R.id.tabOne:
                intent = new Intent(this, tabOne.class);
            break;

            case R.id.tabTwo:
                intent = new Intent(this, tabTwo.class);
            break;

            case R.id.tabThree:
                intent = new Intent(this, tabThree.class);
            break;

        }

        startActivity(intent);
        finish();
        overridePendingTransition(0, 0);

    }

This will help you more then enough, I'm sure of it. Have fun coding!