Configuración de TAB seleccionado con un pequeño triángulo debajo de él

Question

Quiero que mis pestañas se muestren como en la imagen con un pequeño triángulo debajo. ¿Es posible? Si es así, ayúdenme con algunos códigos o documentación.

Answer 1

creo, el siguiente método es el más sencillo . Sólo tiene que configurar el siguiente estirable (en realidad, es estirable por defecto de Android para pestañas) como fondo de las fichas:

<?xml version="1.0" encoding="utf-8"?> 
<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_focus" /> 
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focus" /> 
    <!-- Pressed --> 
    <item android:state_pressed="true" android:drawable="@drawable/tab_press" /> 
</selector> 

donde tab_press, tab_focus y tab_selected dibujables serían png de (yo preferiría 9-patches) con flecha abajo y región transparente cerca de él. tab_unselected dibujable no tendría esta flecha, pero aún tendría la misma región transparente. Lo único que queda por hacer es especificar el margen inferior negativo para su TabWidget. Su valor se determina por la altura de la flecha (no se olvide de usar density independent unidades):

Answer 2

Puede añadir imágenes a la disposición con pestañas:

<RelativeLayout 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
    <TabWidget 
     android:id="@android:id/tabs" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:padding="0dip" /> 
    <FrameLayout 
     android:fadingEdge="none" 
     android:id="@android:id/tabcontent" 
     android:layout_width="fill_parent" 
     android:layout_height="0px" 
     android:layout_below="@android:id/tabs" 
     android:layout_alignParentBottom="true" 
     android:padding="0px" /> 
    <ImageView 
     .... 
     android:id="@+id/down_arrow_left"/> 
    <ImageView 
     .... 
     android:id="@+id/down_arrow_right"/> 
</RelativeLayout> 

y añadir oyente en su actividad pestaña:

getTabHost().setOnTabChangedListener(new OnTabChangeListener() { 
     public void onTabChanged(String tabId) { 
      if (tabId.equels("left")){ 
       findViewById(R.id.down_arrow_left).setVisibility(View.VISIBLE); 
       findViewById(R.id.down_arrow_right).setVisibility(View.INVISIBLE); 
      } else if (tabId.equels("right")){ 
       findViewById(R.id.down_arrow_left).setVisibility(View.INVISIBLE); 
       findViewById(R.id.down_arrow_right).setVisibility(View.VISIBLE); 
      } 
     } 
    }); 

Answer 3

tab_0_info.xml:

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


private void addTab(int resouceTabId, int drawableId, 
     Class<? extends ActivityGroup> groupActivityClass) 
{ 
    Intent intent = new Intent(this, groupActivityClass); 
    TabHost.TabSpec spec = tabHost.newTabSpec("tab" + resouceTabId); 

    View tabIndicator = LayoutInflater.from(this).inflate(
      R.layout.tab_indicator, getTabWidget(), false); 

    TextView title = (TextView) tabIndicator.findViewById(R.id.title); 
    title.setText(resouceTabId); 
    ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon); 
    icon.setImageResource(drawableId); 

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

} 

//addTab(R.string.yourTabTitle, R.drawable.tab_0_info, YourGroup.class);