How to change the color of tab 'underbar' in actionbarsherlock

Refresh

November 2018

Views

15.6k time

14

Ok i'm loosing more sanity then ever. I can't find/understand how to style the damn thing. I managed to change the background of the tab itself but I can't cahnge the color of the bar under the selected tab.

How to change it from blue to something.

My styles.xml unfortunately I have very bad understanding of how it works

<?xml version="1.0" encoding="utf-8"?>
<resources>


    <style name="Theme.Styled" parent="Theme.Sherlock.Light">
        <item name="actionBarTabStyle">@style/Widget.Styled.ActionBarTab</item>
        <item name="android:actionBarTabStyle">@style/Widget.Styled.ActionBarTab</item>

        <item name="actionBarTabBarStyle">@style/Widget.Styled.ActionBarTabBar</item>
        <item name="android:actionBarTabBarStyle">@style/Widget.Styled.ActionBarTabBar</item>

        <item name="actionBarTabTextStyle">@style/myText</item>
        <item name="android:actionBarTabTextStyle">@style/myText</item>


    </style>

    <style name="Widget.Styled.ActionBarTab" parent="Widget.Sherlock.Light.ActionBar.TabView">
    <!--    <item name="background">@drawable/startbcg</item>
        <item name="android:background">@drawable/startbcg</item>
        <item name="backgroundSplit">@drawable/bg_striped_split</item>
        <item name="android:backgroundSplit">@drawable/bg_striped_split</item>
    -->
    </style>


    <style name="Widget.Styled.ActionBarTabBar" parent="Widget.Sherlock.Light.ActionBar.TabBar">

        <item name="background">@drawable/startbcg</item>
        <item name="android:background">@drawable/startbcg</item>
         <item name="backgroundSplit">@drawable/bg_striped_split</item>
        <item name="android:backgroundSplit">@drawable/bg_striped_split</item>

    </style>

    <style name="myText" parent="Widget.Sherlock.Light.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>
<style name="myTextInv" parent="Widget.Sherlock.Light.ActionBar.TabText.Inverse">
        <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>
</resources>

Bonus question: where I can find what properties (like background) certain stuff has.

2 answers

17

Используйте ActionbarStyleGenerator стилизовать ActionBar. Это, безусловно , самым простым и интуитивно понятным способом.

Как:

  1. Используйте пользовательский интерфейс для выбора цвета для различных элементов
  2. После этого нажмите на кнопку «скачать .zip»
  3. Файл ZIP содержит файлы ресурсов, которые вы должны скопировать в вашем проекте Рез / расположение и RES / папки drawableXXXX
8

Я обнаружил, что для фона, лучше скопировать (9 вводимые коэффициент заплаты и XML), найденный в каталоге Android SDK Реза и изменить его, чтобы иметь цвета вы любите.

Они используют фон с нижней панелью включены, так что я не думаю, что это можно изменить нижнюю планку в одиночку.

Вот что у меня есть, работая с зеленым цветом на нижней панели:

<style name="customTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
    <item name="android:showDividers">none</item>
    <item name="android:measureWithLargestChild">true</item>
    <!-- This was a copy from the sdk drawable -->
    <item name="android:background">@drawable/tab_indicator</item>

    <item name="background">@drawable/tab_indicator</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">normal</item>
</style>


<style name="customTabBar" parent="Widget.Sherlock.ActionBar.TabBar">
    <item name="android:showDividers">middle</item>

    <item name="android:divider">@drawable/tab_divider</item>
    <item name="divider">@drawable/tab_divider</item>

    <item name="android:dividerPadding">10dip</item>

    <item name="android:background">@drawable/tab_bg</item>
</style>

Индикатор Вкладка выглядит следующим образом:

<?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_unselected_focused" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused" />

<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed" />

<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed" />
</selector>

Я надеюсь, что это помогает!