android tab: writing text on top

Question

I am implementing tab layout in android. I am able to implement tabs however my implementation gives following output:

In this image, text "Tab 1" "Tab 2" "Tab 3" all are written at the bottom in tab. I want it to write on the top. I have already used android:gravity="top" as well as android:layout_gravity="top" but there did nothing for me. please help. i am using following layout:

    <?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp"
         android:gravity="top"
           android:layout_gravity="top"
        >
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:gravity="top"
            android:layout_gravity="top"
            />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>

please help.

Answer 1

We can achieve this by setting TabSpec content with customized views.Here is the sample.

in main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <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">
        <LinearLayout android:orientation="vertical"
            android:layout_width="fill_parent" android:layout_height="fill_parent">
            <View android:layout_width="fill_parent" android:layout_height="0.5dip"
                android:background="#000" />
            <TabWidget android:id="@android:id/tabs"
                android:layout_width="fill_parent" android:layout_height="wrap_content"
                android:layout_marginLeft="0dip" android:layout_marginRight="0dip" />
            <View android:layout_width="fill_parent" android:layout_height="2dip"
                android:background="#696969" />
            <View android:layout_width="fill_parent" android:layout_height="2dip"
                android:background="#000" />
            <FrameLayout android:id="@android:id/tabcontent"
                android:layout_width="fill_parent" android:layout_height="fill_parent" />
        </LinearLayout>
    </TabHost>

</LinearLayout>

in tabs_bg.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabsLayout" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:background="@drawable/tab_bg_selector"
    android:padding="10dip" android:gravity="center" android:orientation="vertical">

    <TextView android:id="@+id/tabsText" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="Title"
        android:textSize="15dip" android:textColor="@drawable/tab_text_selector" />
</LinearLayout>

i use some custom selector for view, you can create on your own.

In activity Main.class,

private TabHost mTabHost;

private void setupTabHost() {
    mTabHost = (TabHost) findViewById(android.R.id.tabhost);
    mTabHost.setup();
}

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // construct the tabhost
    setContentView(R.layout.main);

    setupTabHost();
    mTabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);

    setupTab(new TextView(this), "Tab 1");
    setupTab(new TextView(this), "Tab 2");
    setupTab(new TextView(this), "Tab 3");
}

private void setupTab(final View view, final String tag) {
    View tabview = createTabView(mTabHost.getContext(), tag);

    TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(new TabContentFactory() {
        public View createTabContent(String tag) {return view;}
    });
    mTabHost.addTab(setContent);

}

private static View createTabView(final Context context, final String text) {
    View view = LayoutInflater.from(context).inflate(R.layout.tabs_bg, null);
    TextView tv = (TextView) view.findViewById(R.id.tabsText);
    tv.setText(text);
    return view;
}

which provide output like this...