how to get this tabbar

Question

how to get the following design of a tabbar

When a tab is been selected the the curve button must visible in the particular tab and the other to be in common.

i thought of adding a fixed background color to be red and i am to place the buttons of an image with curve and without curve. But i want to know whether it gets fixed for all android device, because wat to be the button height and width ? how to set a tabbar of fixed height and width....

Answer 1

I found by a simple way as follows

To get the redline at the bottom of the tabbar i have added a view under the tab as follows

<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:layout_width="fill_parent"
        android:id="@+id/linearLayout1"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <TabWidget
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"
            android:layout_alignParentBottom="true"
            android:layout_weight="0">
        </TabWidget>

        <View android:layout_width="fill_parent" android:layout_height="4dip"   android:background="#ff0000" />

        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@android:id/tabcontent"
            android:layout_weight="1">
        </FrameLayout>

    </LinearLayout>
</TabHost>

Then my tabbar class is as follows

public class CustomTabActivity extends TabActivity 
{
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabbar);

        addTab1(FirstTab.class);
        addTab2(SecondTab.class);
        addTab3(FirstTab.class);
        addTab4(SecondTab.class);
    }

    private void addTab1( Class<?> c)
    {
        TabHost tabHost = getTabHost();
        Intent intent = new Intent(this, c);
        TabHost.TabSpec spec = tabHost.newTabSpec("tab");   

        View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator1, getTabWidget(), false);
        ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon1);

        spec.setIndicator(tabIndicator);
        spec.setContent(intent);
        tabHost.addTab(spec);
    }
}

My tab_indicator layout is as follows

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="55dip"    
    android:layout_weight="1"
    android:orientation="vertical"
    android:padding="5dp">

    <ImageView android:id="@+id/icon1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@drawable/tab1">    
    </ImageView> 
</RelativeLayout>

the tab1 in the drawable is an Selector xml file as follows

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >  
    <item android:state_focused="false" android:state_selected="false"
        android:state_pressed="false" android:drawable="@drawable/home" />
    <item android:state_focused="false" android:state_selected="true"
        android:state_pressed="false" android:drawable="@drawable/home_select_btn" />

</selector>

Here i have added the selected image with a bend and unselected image without bend, that i want to show.

This way seems to be a very long but i feel it to be the same design which i needed.