Android: personalización de las pestañas de sherlock de la barra de acciones

Question

Im tratando de personalizar las pestañas de sherlock de la barra de acciones para que muestren el texto de la pestaña debajo del ícono de pestañas. Después de buscar y leer sobre el tema, todavía no estoy teniendo mucha suerte.

Éstos son los resultados que estoy obteniendo:

Tab1 personalizado seleccionado

Tab1 personalizada no se selecciona, Sep2 estándar seleccionado

Esto es lo que tengo hasta ahora:

Creé mi propio styles.xml donde cambio algunas de las configuraciones de la barra de acciones:

<style name="SkoletubeTheme" parent="Theme.Sherlock"> 
    <item name="actionBarSize">@dimen/st__action_bar_default_height</item> 
    <item name="actionBarTabStyle">@style/Skoletube.TabView</item> 
    <item name="actionBarTabTextStyle">@style/Skoletube.Tab.Text</item> 
</style> 

<style name="Skoletube.TabView" parent="Widget.Sherlock.ActionBar.TabView"> 
    <item name="android:background">@drawable/abs__tab_indicator_holo</item> 
    <item name="android:paddingLeft">6dp</item> 
    <item name="android:paddingRight">6dp</item> 
</style> 

<style name="Skoletube.Tab.Text" parent="Widget.Sherlock.ActionBar.TabText"> 
    <item name="android:textAppearance">@android:style/TextAppearance.Medium</item> 
    <item name="android:textColor">@android:color/primary_text_dark</item> 
    <item name="android:textSize">10sp</item> 
</style> 

Creado un ressource xml donde el cambio y owerwrite algunos textsettings para la barra de acción. Aquí he aumentado la altura de la barra de acciones, que a su vez aumenta la altura de las pestañas. También disminuyó el tamaño del texto con el fin de hacer espacio para el icono apropiado y texto en la pestaña

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<!-- Default height of an action bar. --> 
<dimen name="st__action_bar_default_height">58dip</dimen> 
<!-- Text size for action bar titles --> 
<dimen name="ab__action_bar_title_text_size">10dp</dimen> 
<!-- Text size for action bar subtitles --> 
<dimen name="ab__action_bar_subtitle_text_size">6dp</dimen> 
<!-- Top margin for action bar subtitles --> 
<dimen name="ab__action_bar_subtitle_top_margin">-3dp</dimen> 
<!-- Bottom margin for action bar subtitles --> 
<dimen name="ab__action_bar_subtitle_bottom_margin">5dip</dimen> 
</resources> 

Luego he definido un diseño personalizado para las pestañas utilicen, donde coloco el texto debajo del icono :

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/customTabLayout" 
android:layout_width="wrap_content" 
android:layout_height="fill_parent" 
android:orientation="vertical" 
android:layout_weight="1" 
android:focusable="true" 
android:gravity="center" 
style="?attr/actionBarTabStyle" 
> 
<ImageView 
    android:id="@+id/sk_abs__tab_icon" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerHorizontal="true" 
    android:background="@android:color/transparent" 
    /> 
<com.actionbarsherlock.internal.widget.ScrollingTextView 
    android:id="@+id/sk_abs__tab_txt" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/sk_abs__tab_icon" 
    android:layout_alignWithParentIfMissing="true" 
    android:layout_weight="1" 
    android:layout_centerHorizontal="true" 
    android:lines="1" 
    android:scrollHorizontally="true" 
    android:ellipsize="marquee" 
    android:marqueeRepeatLimit="marquee_forever" 
    style="@style/Skoletube.Tab.Text" 
    /> 
<FrameLayout 
    android:id="@+id/abs__tab_custom" 
    android:layout_width="wrap_content" 
    android:layout_height="fill_parent" 
    android:padding="5dip" 
    android:layout_weight="1" 
    android:visibility="gone" 
    /> 

Sólo para que conste el atributo pasado como el estilo de los puntos de disposición relativa a este:

<style name="Widget.Sherlock.ActionBar.TabBar" parent="android:Widget"></style> 

entonces he aplicado estos cambios a mi aplicación de la siguiente manera, la primera pestaña tiene mi implementación personalizada, la segunda pestaña tiene la implementación estándar:

final ActionBar actionBar; 
    actionBar = getSupportActionBar(); 
    actionBar.setDisplayHomeAsUpEnabled(false); 
    actionBar.setDisplayUseLogoEnabled(true); 
    // Set up tabs 

    myMediaTab = actionBar.newTab(); 
    myMediaTab.setCustomView(R.layout.skoletube_tab_layout); 
    ImageView myMediaImg = (ImageView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_icon); 
    myMediaImg.setImageResource(R.drawable.tab_mymedia); 
    ScrollingTextView myMediaText = (ScrollingTextView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_txt); 
    myMediaText.setText("Tab1"); 
    myMediaTab.setTabListener(this); 
    myMediaTab.setTag("MyMediaTab"); 
    actionBar.addTab(myMediaTab); 

    myChannelsTab = actionBar.newTab(); 
    myChannelsTab.setIcon(drawable.tab_mychannels); 
    myChannelsTab.setText("Tab2"); 
    myChannelsTab.setTabListener(this); 
    myChannelsTab.setTag("myChannelsTab"); 
    actionBar.addTab(myChannelsTab); 

Aunque creo que estoy cerca de la solución, Creo que he perdido un paso en alguna parte.

Obviamente, la barra azul detrás del texto/debajo de la imagen no debe estar allí, pero tampoco parece haber encontrado dónde puedo establecer la imagen enfocada (quiero que el img cambie de color cuando hay una pestaña seleccionado) y color del texto. ¿Debo hacer que la imagen sea enfocable y manejarla a través de eso o?

Todavía soy bastante nuevo en esto, por lo que el enfoque que he tomado aquí podría ser incorrecto si hay una mejor/más inteligente forma de hacerlo, por favor diga.

Apreciar cualquier sugerencia e idea.

Answer 1

No sé si ha encontrado una respuesta para esto o no, pero una solución podría ser modificar la imagen de la pestaña para incluir el texto, con GIMP o photoshop, y luego simplemente establecer esas imágenes en las pestañas , en lugar de imágenes y texto. Es una forma un poco incómoda de hacerlo, pero funcionaría.

Espero que esto ayude!

Answer 2

He resuelto que usando un compound drawable:

tv = new TextView(this); 
tv.setText(R.string.tab_movies); 
tv.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.nav_movies, 0, 0); 

mBar.addTab(mBar 
    .newTab() 
    .setCustomView(tv) 
    .setTabListener(
    new TabListenerImpl<TheatersTabActivity>(this, "theaters", 
     TheatersTabActivity.class))); 

Con el fin de hacer frente a la imagen seleccionada o no seleccionada, estoy usando un selector:

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