Пользовательские вкладки в приложении для Android

Question

Я создаю приложение для Android с табустом, и оно работает хорошо. Проблема в том, что я хочу настроить tabhost с помощью файла selector xml, но я не знаю, как это сделать.

Мой tabhost это:

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

И я хотел бы, чтобы это:

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

Мой код MainActivity, как я создаю вкладки через макет:

 // 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); 

И мой tab_indicator.xml (каждая вкладка):

<?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> 

Спасибо!

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>