Android应用中的自定义标签

Question

I'm build a android app with a tabhost and It works well. The problem is that I want to customize the tabhost with a selector xml file but I dont know how I do.

My tabhost is this:

http://i.stack.imgur.com/xYMuh.png

And I would like to have this:

http://i.stack.imgur.com/UJu1K.png

My code of MainActivity as I create the tabs through a layout:

        // Tab1
        View tab1 = getLayoutInflater().inflate(R.layout.tab_indicator, null);
        TextView title1 = (TextView)tab1.findViewById(R.id.titleTab);
        title1.setText("¿Qué hacer?");
        ImageView img1 = (ImageView)tab1.findViewById(R.id.iconTab);
        img1.setImageResource(R.drawable.what);
        mTabHost.addTab(mTabHost.newTabSpec("que hacer").setIndicator(tab1),
                HacerFragment.class, null);

        // Tab2
        View tab2 = getLayoutInflater().inflate(R.layout.tab_indicator, null);
        TextView title2 = (TextView)tab2.findViewById(R.id.titleTab);
        title2.setText("¿A dónde ir?");
        ImageView img2 = (ImageView)tab2.findViewById(R.id.iconTab);
        img2.setImageResource(R.drawable.where);
        mTabHost.addTab(mTabHost.newTabSpec("donde").setIndicator(tab2),
                DestacadoFragment.class, null);

        // Tab3
        View tab3 = getLayoutInflater().inflate(R.layout.tab_indicator, null);
        TextView title3 = (TextView)tab3.findViewById(R.id.titleTab);
        title3.setText("Lee tu mapa");
        ImageView img3 = (ImageView)tab3.findViewById(R.id.iconTab);
        img3.setImageResource(R.drawable.read);
        mTabHost.addTab(mTabHost.newTabSpec("mapa").setIndicator(tab3),
                LectorFragment.class, null);

        // Tab4
        View tab4 = getLayoutInflater().inflate(R.layout.tab_indicator, null);
        TextView title4 = (TextView)tab4.findViewById(R.id.titleTab);
        title4.setText("Captura");
        ImageView img4 = (ImageView)tab4.findViewById(R.id.iconTab);
        img4.setImageResource(R.drawable.capture);
        mTabHost.addTab(mTabHost.newTabSpec("captura").setIndicator(tab4),
                CapturaFragment.class, null);

And my tab_indicator.xml (each tab):

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

    <ImageView android:id="@+id/iconTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/buscar24" /> 

    <TextView android:id="@+id/titleTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" 
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/iconTab"
        style="@drawable/tab_selector" /> 

</RelativeLayout>

Thanks!!

Answer 1

tab_indicator.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relative"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background_selector"
android:padding="5dp" >

<ImageView
    android:id="@+id/iconTab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:clickable="false"
    android:focusable="false"
    android:background="@drawable/image_selector" />

<TextView
    android:id="@+id/titleTab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/iconTab"
    android:layout_centerHorizontal="true"
    android:clickable="false"
    android:focusable="false"
    android:text="HELLO" />

</RelativeLayout>

background_selector.xml:

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

image_selector.xml:

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