Android Change tab navigation indicator color

I actually want to change the blue strips above and change them to red.

This question is really bothering me for too long. Before this article in Google:

Https://developer.android.com/training/basics/actionbar/styling.html

But it backfired, I found that even my entire tab color changed.

Think it's very strange, why does Google give the method is to change the entire tab? Is Google mistaken?

On the internet for a very long time, found that very many people are asking this question, and the actual solution of very few people. Occasionally there are several solutions that are also used by Google in that way. But I'm not right!

This problem has been placed. In the middle of a few attempts, no. Search today, find an article, I have a general look, or the use of Google's approach, but he came with the source code, some questions, why his color can be changed? Just download his source code to perform a look at the effect. I found it. Why is this? Finally, the mystery lies in the image he uses, which is transparent above, with color underneath. I used to have all the colors on top and bottom, so I would cover the whole tab.

This is the picture:

Oh, finally find the reason.

The following is the detailed flow: This process gives the Google article has.

First, change the system styles.xml.V14 above version number in the VALUES-V14 directory:

 <style Name= "Appbasetheme" parent= "Android:Theme.Holo.Light.DarkActionBar" > <!--API + Theme customizations can go Here. --<item name= "Android:actionbarstyle" > @style/my_actionbar_style</item> <item name= "and Roid:actionoverflowbuttonstyle "> @style/mycustomtheme.overflow</item> <!--It's work---<item Nam E= "Android:homeasupindicator" > @drawable/upcaret</item> <!--it ' s work--><!--<item name= "a Ndroid:actionbuttonstyle "> @style/my_actionbar_tabbar_style</item>--<!--set Actionbar tab style, such as the following Red Guide, gap between tabs, etc.-<item name= "Android:actionbartabstyle" > @style/mytabview</item> <!--   Set the style of the Actionbar tab font-<!--<item name= "Android:actionbartabtextstyle" > @style/mytabtext</item> --</style> 

   <style name= "Mytabview" parent= "@android: Style/widget.holo.light.actionbar.tabview" >        <item name= " Android:background "> @drawable/tab_indicator</item>        <item name=" Android:paddingleft ">8dip< /item>        <item name= "android:paddingright" >8dip</item>    </style>  

Second, under the Drawable directory under RES (assuming no, create one yourself) Create a tab_indicator.xml:

<selector xmlns:android= "Http://schemas.android.com/apk/res/android" >    <item android:state_selected= "False" android:state_pressed= "false" android:drawable= "@android: Color/transparent"/>    <item android: State_selected= "false" android:state_pressed= "true" android:drawable= "@android: Color/transparent"/>         < Item android:state_selected= "True"  android:state_pressed= "false" android:drawable= "@drawable/base_tabpager_ Indicator_selected "/>    <item android:state_selected=" true "  android:state_pressed=" true "Android: drawable= "@drawable/base_tabpager_indicator_selected"/></selector>

As for the artifact of the drawable picture I uploaded a copy, we can base on this to change the color and change the height. Address: Http://pan.baidu.com/s/1ozNKM

Finally effect:

Reference information:
https://developer.android.com/training/basics/actionbar/styling.html
http://blog.csdn.net/ xiaanming/article/details/9971721