Làm cách nào để thay đổi màu của các tab điều hướng ActionBar?

Question

Tôi có một ActionBar trong một ứng dụng và nó có các tab điều hướng được nhúng trong đó (không phải là TabHost!). Theo mặc định, các tab hiển thị dưới dạng màu xám đậm, có đường kẻ màu xanh lam mỏng bên dưới tất cả các tab và một điểm đánh dấu màu xanh trên tab đã chọn.

Tôi nên ghi đè kiểu nào để thay đổi các màu đó?

Answer 1

tôi đã không thay đổi các tab bản thân, nhưng tôi sẽ cho rằng bạn có thể làm điều đó với những phong cách từ 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> 

với 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> 

Hoặc bạn cũng có thể thử

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

và 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> 

Cuối cùng sử dụng hai png-9 drawables: tab_selected_holo và tab_unselected_holo. Họ trông giống như hai dòng màu xanh đậm và mỏng hơn mà bạn đang nói đến.

Hay bạn có nghĩa là minitabs?

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

với trong 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> 

Nếu bạn cần định nghĩa khác chỉ cần tìm kiếm TabWidget ở đây: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

Sau đó, như thường lệ xác định phong cách riêng của bạn với tất cả các thuộc tính cần thiết và drawables ...

Answer 2

Nếu bạn muốn tùy chỉnh dễ dàng thanh tab của mình, bạn có thể sử dụng công cụ tuyệt vời này: http://jgilfelt.github.io/android-actionbarstylegenerator

Bạn chỉ cần chọn màu sắc mà bạn muốn và nó sẽ tự động tạo XMLs phong cách, PNG, vv