Как изменить цвет вкладок навигации ActionBar?

У меня есть ActionBar в приложении, и в него встроены вкладки навигации (не TabHost!). По умолчанию вкладки отображаются темно-серым цветом, с тонкой синей линией под всеми вкладками и синим маркером на выбранной вкладке.

Какие стили нужно переопределить, чтобы изменить эти цвета?

введите здесь описание изображения


android android-actionbar
person Ollie C    schedule 27.12.2011    source источник

Ответы (2)


arrow_upward
24
arrow_downward

Сами вкладки я не менял, но предполагаю, что можно сделать это с этими стилями из styles.xml...

 <style name="Widget.Holo.TabWidget" parent="Widget.TabWidget">
        <item name="android:tabStripLeft">@null</item>
        <item name="android:tabStripRight">@null</item>
        <item name="android:tabStripEnabled">false</item>
        <item name="android:divider">?android:attr/dividerVertical</item>
        <item name="android:showDividers">middle</item>
        <item name="android:dividerPadding">8dip</item>
        <item name="android:measureWithLargestChild">true</item>
        <item name="android:tabLayout">@android:layout/tab_indicator_holo</item>
    </style>

с tab_indicator_holo.xml

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

        <!-- Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

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

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

Или вы также можете попробовать

   <style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView">
            <item name="android:background">@drawable/tab_indicator_ab_holo</item>
            <item name="android:paddingLeft">16dip</item>
            <item name="android:paddingRight">16dip</item>
        </style>

и tab_indicator_ab_holo.xml

   <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="@color/transparent" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

        <!-- Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/list_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

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

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

Наконец, используя два рисунка png-9: tab_selected_holo и tab_unselected_holo. Они выглядят как две более толстые и более тонкие синие линии, о которых вы говорите.

Или вы имеете в виду минитабы?

 <style name="Widget.ActionBar.TabView" parent="Widget">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/minitab_lt</item>
        <item name="android:paddingLeft">4dip</item>
        <item name="android:paddingRight">4dip</item>
    </style>

в minitab_lt.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_selected="true"
          android:drawable="@drawable/minitab_lt_press" />
    <item android:state_selected="true"
          android:drawable="@drawable/minitab_lt_selected" />
    <item android:state_pressed="true"
          android:drawable="@drawable/minitab_lt_unselected_press" />
    <item android:drawable="@drawable/minitab_lt_unselected" />
</selector>

Если вам нужно другое определение, просто найдите TabWidget здесь: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

Затем, как обычно, определите свой собственный стиль со всеми необходимыми атрибутами и чертежами...

person user387184    schedule 27.12.2011
comment
Я не вижу там ничего, чтобы установить цвета фона, линии внизу или выбранных маркеров... - person Ollie C; 27.12.2011
comment
Посмотрите, имеете ли вы в виду мини-вкладки TabViews. Они похожи на то, о чем вы говорите. Я отредактировал свой ответ соответственно... - person user387184; 28.12.2011
comment
О каком минитабе вы говорите? Я говорю об этих вкладках developer.android.com/images/ui/actionbar.png - person Ollie C; 28.12.2011
comment
Tbh Мне было очень трудно читать ваш ответ. Вместо этого я использовал этот пост в блоге, который намного понятнее android- Developers.blogspot.com/2011/04/ - person Ollie C; 28.12.2011
comment
Спасибо за отзыв, это довольно интересно, так как в вашей ссылке они используют ad_tab_selected_holo вместо tab_selected_pressed_holo в моей ссылке. На самом деле я не могу найти ни стиль, на который вы ссылаетесь, нигде в моей файловой системе, ни рисуемый файл ad_tab_selected_holo. Интересно, что это значит, и как можно было найти это в первую очередь? Надеюсь, это сработает! Вы просто использовали стиль Light или действительно изменили рисунок? - person user387184; 28.12.2011
comment
Я использую ActionBarSherlock, поэтому в итоге я унаследовал от style/Widget.Sherlock.ActionBar.TabView и настроил растровые изображения, чтобы использовать нужные мне цвета. На все это ушло несколько часов, но я счастлив, что наконец-то преуспел. Спасибо. - person Ollie C; 28.12.2011
comment
Я не могу заставить ни один из них работать, вы не очень подробно описываете их реализацию. Что указать в манифесте? Что вы подразумеваете под thr с и и блоками кода? Я добавляю те с вышеуказанным кодом или я делаю их также? - person ; 20.08.2014

arrow_upward
3
arrow_downward

Если вы хотите легко настроить свои панели вкладок, вы можете использовать этот отличный инструмент: http://jgilfelt.github.io/android-actionbarstylegenerator

Вы просто выбираете нужные цвета, и он автоматически генерирует XML-файлы стилей, PNG-файлы и т. д.

person Arnaud    schedule 31.12.2013