ANDROID: STYLING THE TABS IN A TABWIDGET

MainActivity.java

import android.app.TabActivity;

import android.content.Context;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.ImageView;

import android.widget.TabHost;

import android.widget.TextView;

public class MainActivity extends TabActivity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        TabHost tabHost = getTabHost();

        this.setNewTab(this, tabHost, "tab1", R.string.textTabTitle1, android.R.drawable.star_on, R.id.tab1);

        this.setNewTab(this, tabHost, "tab2", R.string.textTabTitle2, android.R.drawable.star_on, R.id.tab2);

        this.setNewTab(this, tabHost, "tab3", R.string.textTabTitle3, android.R.drawable.star_on, R.id.tab3);

    }

    private void setNewTab(Context context, TabHost tabHost, String tag, int title, int icon, int contentID ){

        TabHost.TabSpec tabSpec = tabHost.newTabSpec(tag);

        tabSpec.setIndicator(getTabIndicator(tabHost.getContext(), title, icon)); // new function to inject our own tab layout

        tabSpec.setContent(contentID);

        tabHost.addTab(tabSpec);

    }

    private View getTabIndicator(Context context, int title, int icon) {

        View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);

        ImageView iv = (ImageView) view.findViewById(R.id.imageView);

        iv.setImageResource(icon);

        TextView tv = (TextView) view.findViewById(R.id.textView);

        tv.setText(title);

        return view;

    }

}

res/layout/activity_main.xml

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@android:id/tabhost"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical" >

        <TabWidget

            android:id="@android:id/tabs"

            android:layout_width="match_parent"

            android:layout_height="wrap_content" >

        </TabWidget>

        <FrameLayout

            android:id="@android:id/tabcontent"

            android:layout_width="match_parent"

            android:layout_height="match_parent" >

            <LinearLayout

                android:id="@+id/tab1"

                android:layout_width="match_parent"

                android:layout_height="match_parent" >

                <TextView

                    android:id="@+id/textView1"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="Tab 1 Content" />

            </LinearLayout>

            <LinearLayout

                android:id="@+id/tab2"

                android:layout_width="match_parent"

                android:layout_height="match_parent" >

                <TextView

                    android:id="@+id/textView2"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="Tab 2 Content" />

            </LinearLayout>

            <LinearLayout

                android:id="@+id/tab3"

                android:layout_width="match_parent"

                android:layout_height="match_parent" >

                <TextView

                    android:id="@+id/textView3"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="Tab 3 Content" />

            </LinearLayout>

        </FrameLayout>

    </LinearLayout>

</TabHost>

res/layout/tab_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="@drawable/tab_indicator"

    android:orientation="vertical" >

    <ImageView android:id="@+id/imageView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_gravity="center_horizontal" />

    <TextView

        android:id="@+id/textView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_vertical|center_horizontal" />

</LinearLayout>

res/drawable/tab_indicator.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Non focused states -->

    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected" />

    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />

    <!-- Focused states -->

    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_focused" />

    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focused" />

    <!-- Pressed -->

    <item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_pressed" />

    <item android:state_pressed="true" android:drawable="@drawable/tab_pressed" />

</selector>

tabtest.zip

출처 : https://maxalley.wordpress.com/2012/10/27/android-styling-the-tabs-in-a-tabwidget/