"Android Interface Implementation" styling the Action Bar

Reprint Please specify Source: http://blog.csdn.net/zhaokaiqiang1992

This article was translated from the Android developer site, but not exactly translated in accordance with the original intent, adding some of my personal understanding. To see the original, please poke: http://developer.android.com/training/basics/actionbar/styling.html

Actionbar controls, which provide a consistent navigation experience for our app, make it easier and more familiar for users, and reduce the cost of learning, but that doesn't mean we want to use exactly the same actionbar as other apps, and we want to give users a new look, Then we can use the style and theme resources to customize our Actionbar.

There are some activity topics within Android that include the different actionbar styles of "dark" and "light". We can implement the effect of customizing the actionbar appearance by inheriting these existing themes.

It is important to note that if we want to use the API for Actionbar in the Support class library, then we must use or rewrite the Theme.appcompat family of style resources instead of using the Theme.holo series theme ( API11 and above). If we do this, then we have to declare the attributes of each style two times: once in the platform's style attributes (refer to Android:properties), and the other is the properties of the styles that use the support library.

Android contains two basic activity styles, both of which are distinguished mainly by the color of the theme.

Theme.holo is a black theme and Theme.Holo.Light is a white theme.

We can get the theme effect by setting the <application> or the theme property of the <activity> tag to the branch we want.

such as the following:

<application android:theme= "@android: Style/theme.holo.light" .../>

If we want the black Actionbar and the white activity background, then we just need to set theme as Theme.Holo.Light.DarkActionBar.

If you are using a support library, then you have to use the Theme.appcompat series instead of the above:

Theme.appconpat represents a black theme, Theme.appcompat represents a white theme, and Theme.Appcompat.Light.DarkActionBar represents a mixed theme of black and white.

Make sure you want to use the Actionbar icon color and theme color collocation, in order to solve this problem, you can access http://developer.android.com/design/downloads/index.html# Action-bar-icon-pack Download the complete set of icon files.

Custom Background Color

If we want to customize the Actionbar background color, then we have to create a theme for the activity to override the Actionbarstyle property, which points to another style, in this style, We can rewrite the background property to set a special drawable resource for our actionbar.

If our app uses navigation or split action bar, we can also override the Backgroundstacked and Backgroundsplit properties to assign them a special background resource or color.

Note that it is important to inherit from an existing theme parent topic, otherwise we would have to declare a lot of properties in the custom theme, which is very tiring and ineffective.

only compatible with 3.0 and above

If our app is only compatible with version 3.0 and above, then we can customize a background like this:

<?xml version= "1.0" encoding= "Utf-8"?><resources>    <!--the theme applied to the application or Activity--    <style name= "Customactionbartheme"           parent= "@android: style/ Theme.Holo.Light.DarkActionBar ">        <item name=" Android:actionbarstyle "> @style/myactionbar</item >    </style>    <!--ActionBar Styles--    <style name= "Myactionbar"           parent= "@android: Style/widget.holo.light.actionbar.solid.inverse ">        <item name=" Android:background "> @drawable/ Actionbar_background</item>    </style></resources>

when used, it is possible to do as follows:

<application android:theme= "@style/customactionbartheme" .../>

compatible with version 2.1 and above

When we use the compatibility library, we have to declare and use it as follows:

<?xml version= "1.0" encoding= "Utf-8"?><resources>    <!--the theme applied to the application or Activity--    <style name= "Customactionbartheme"           parent= "@style/theme.appcompat.light.darkactionbar ">        <item name=" Android:actionbarstyle "> @style/myactionbar</item>        <!--Support Library Compatibility--        <item name= "Actionbarstyle" > @style/myactionbar</item>    </style>    <!--ActionBar Styles--    <style name= "Myactionbar"           parent= "@style/ Widget.AppCompat.Light.ActionBar.Solid.Inverse ">        <item name=" Android:background "> @drawable/ Actionbar_background</item>        <!--support Library compatibility--        <item name= "Background" > @drawable/actionbar_background</item>    </style></resources>

On the use of the same as above:

<application android:theme= "@style/customactionbartheme" .../>

Custom Font Color

If we need to change the color of the Actionbar font, then we have to rewrite the font properties for each location:

(1) Actionbar fonts: Create a custom style, set the TextColor property, and then set this style to the TitleTextStyle property of the custom Actionbar style, Then set the Actionbar style to the custom theme. This is very abstract, see the following example is good to understand.

Note that if we want to set the TitleTextStyle property, then we use TextAppearance.Holo.Widget.ActionBar.Title as the parent style

(2) ActionBar Tabs: Rewrite Actionbartabtextstyle

(3) Action Buttons: Overriding Actionmenutextcolor

compatible with version 3.0 and above

If we are to be compatible with the above version of 3.0, our style file should be defined as follows:

<?xml version= "1.0" encoding= "Utf-8"?><resources> <!--the theme applied to the application or activity --<style name= "Customactionbartheme" parent= "@style/theme.holo" > <item name= "android:act Ionbarstyle "> @style/myactionbar</item> <item name=" Android:actionbartabtextstyle "> @style/ myactionbartabtext</item> <item name= "Android:actionmenutextcolor" > @color/actionbar_text</item > </style> <!--ActionBar Styles---<style name= "Myactionbar" parent= "@style/widget. Holo.actionbar "> <item name=" Android:titletextstyle "> @style/myactionbartitletext</item> </styl E> <!--ActionBar title text--<style name= "Myactionbartitletext" parent= "@style/textappeara nCE. Holo.Widget.ActionBar.Title "> <item name=" Android:textcolor "> @color/actionbar_text</item> </st yle> <!--ActionBar tabs TexT styles---<style name= "Myactionbartabtext" parent= "@style/widget.holo.actionbar.tabtext" > <item name= "Android:textcolor" > @color/actionbar_text</item> </style></resources>

compatible with version 2.1 and above

If we are going to use a compatible library, we can define it as follows:

<?xml version= "1.0" encoding= "Utf-8"?><resources> <!--the theme applied to the application or activity --<style name= "Customactionbartheme" parent= "@style/theme.appcompat" > <item name= "Androi D:actionbarstyle "> @style/myactionbar</item> <item name=" Android:actionbartabtextstyle "> @style/ myactionbartabtext</item> <item name= "Android:actionmenutextcolor" > @color/actionbar_text</item > <!--Support Library compatibility--<item name= "Actionbarstyle" > @style/myactionbar</i tem> <item name= "Actionbartabtextstyle" > @style/myactionbartabtext</item> <item name= "actio Nmenutextcolor "> @color/actionbar_text</item> </style> <!--actionbar styles and <style na Me= "Myactionbar" parent= "@style/widget.appcompat.actionbar" > <item name= "Android:titletextstyle" ; @style/myactionbartitletext</iteM> <!--Support Library compatibility-<item name= "TitleTextStyle" > @style/myactionbartitle           Text</item> </style> <!--ActionBar Title text---<style name= "Myactionbartitletext" parent= "@style/textappearance.appcompat.widget.actionbar.title" > <item name= "Android:textcolor" > @color    /actionbar_text</item> <!--The TextColor property was backward compatible with the support Library-- </style> <!--ActionBar Tabs text-to-<style name= "Myactionbartabtext" parent= "@style/wi Dget. AppCompat.ActionBar.TabText "> <item name=" Android:textcolor "> @color/actionbar_text</item> &lt ;! --The TextColor property was backward compatible with the support Library--</style></resources>

custom Tab Indicator

If we want to change the color of the Navigation tab indicator, we need to customize an activity's theme and then rewrite the Actionbartabstyle property. This property points to another resource file that overrides the Backgroung property, which is the form of a status list, that is, in different states, the display is not the same background.

For example, here is a file in the form of a status list that controls the tab indicator to display different picture backgrounds in different states.

<?xml version= "1.0" encoding= "Utf-8"? ><selector xmlns:android= "http://schemas.android.com/apk/res/ Android ><!--states when BUTTON isn't PRESSED-<!--Non focused states--<item Android:stat E_focused= "false" android:state_selected= "false" android:state_pressed= "false" android:drawable= "@drawab Le/tab_unselected "/> <item android:state_focused=" false "android:state_selected=" true "ANDROID:STATE_PR Essed= "false" android:drawable= "@drawable/tab_selected"/> <!--Focused states (such as when Focused wit H a d-pad or mouse hover)--<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_sele cted_focused "/><!--states whenbutton is PRESSED-<!--Non focused states-to <item android:state_focused= "false" Android:state_sele Cted= "false" android:state_pressed= "true" android:drawable= "@drawable/tab_unselected_pressed"/> & Lt;item android:state_focused= "false" android:state_selected= "true" android:state_pressed= "true" Android:dra wable= "@drawable/tab_selected_pressed"/> <!--Focused states (such as when Focused with a d-pad or mouse hover)          --<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_sele Cted= "true" android:state_pressed= "true" android:drawable= "@drawable/tab_selected_pressed"/></sel Ector>

If you want to be compatible with more than 3.0 versions, you can use the following notation.

<?xml version= "1.0" encoding= "Utf-8"?><resources>    <!--the theme applied to the application or Activity--    <style name= "Customactionbartheme"           parent= "@style/theme.holo" >        <item name= " Android:actionbartabstyle "> @style/myactionbartabs</item>    </style>    <!--ActionBar tabs Styles--    <style name= "myactionbartabs"           parent= "@style/widget.holo.actionbar.tabview" >        <!--tab INDICATOR--        <item name= "Android:background" > @drawable/actionbar_tab_indicator</item >    </style></resources>

If you want to use a compatible library, then we need to write the following.

<?xml    Version= "1.0" encoding= "Utf-8"?><resources> <!--the theme applied to the application or activity-- <style name= "Customactionbartheme" parent= "@style/theme.appcompat" > <item name= "android:actionb Artabstyle "> @style/myactionbartabs</item> <!--support Library compatibility---<item Nam    E= "Actionbartabstyle" > @style/myactionbartabs</item> </style> <!--ActionBar Tabs styles--- <style name= "Myactionbartabs" parent= "@style/widget.appcompat.actionbar.tabview" > <!--tab indic Ator--<item name= "Android:background" > @drawable/actionbar_tab_indicator</item> <!--Sup Port Library Compatibility--<item name= "Background" > @drawable/actionbar_tab_indicator</item> & Lt;/style></resources> 
 

If you want to get more style resources about Actionbar, you can visit this site http://jgilfelt.github.io/android-actionbarstylegenerator/

"Android Interface Implementation" styling the Action Bar