Customization of Action Bar widget

The article is a translation of the topic from the android-developers blog. It shows how to style the Action Bar widget in the way you want. As an example, consider changing the design of the widget under the overall color scheme of the blog described above.

A lot of time has passed since the appearance of the Action Bar pattern , and many developers have already implemented it in their applications. In Android 3.0 (Honeycomb), this pattern is generally part of the SDK and the general navigation paradigm. The use of a common navigation element simplifies the user's mastering of the program (because he most likely has already worked with him), and does not require the developer to invent his own “bikes”. But since everyone uses the same pattern, then, of course, everyone styles it for their own application. The following example shows how to style the Action Bar under the overall look / image of the application. We will change the standard Holo.Light theme to match the android-developers blog.

<style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light"> … </style> 

Icon

To create an icon in the selected color scheme, you can use Android Asset Studio . We will use this image as a logo .
')

Navigation

Further, the navigation section works in three different modes. Consider them in turn.

Standard

Standard mode simply displays the name of the Activity. For this stylization is not needed, let's go further.

List

On the left - the standard drop-down list, on the right - the effect that we need.



The standard list uses a color scheme dominated by blue. To implement the scheme we need, we will overload android: actionDropDownStyle

 <!--    --> <style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar"> <item name="android:background">@drawable/ad_spinner_background_holo_light</item> <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item> <item name="android:dropDownSelector">@drawable/ad_selectable_background</item> </style> 

In this xml file, the combination of state-lists and nine-patch images is used to decorate the backlight, spinner and top bar.

Tabs

Below are the screenshots of the “before” and “after” tabs.



And again, in the standard theme for the tabs dominates the blue color. For reissue we will overload android: actionBarTabStyle .

 <!--    --> <style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBarView_TabView"> <item name="android:background">@drawable/actionbar_tab_bg</item> <item name="android:paddingLeft">32dp</item> <item name="android:paddingRight">32dp</item> </style> 

Actions

And again, “before” and “after”.


When you select one or another element, it is highlighted in blue. To change, reload android: selectableItemBackground .

 <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item> 

Also, the menu when expanding shows a blue rectangle at the top of the list. To change, we will overload android: popupMenuStyle .

 <!--    --> <style name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow"> <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item> </style> 

Also change the color of the selected items in the menu.

 <!--      --> <style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown"> <item name="android:listSelector">@drawable/ad_selectable_background</item> </style> 

In addition, you still need to change the design of checkboxes and radio buttons.

 <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item> <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item> 

Background

In principle, you can also change the background. By default, in the Holo.Light theme it is transparent. To change, you need to overload android: actionBarStyle .

We put everything together

To combine all the elements, create a custom style.

 <style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light"> <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item> <item name="android:popupMenuStyle">@style/MyPopupMenu</item> <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item> <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item> <item name="android:actionDropDownStyle">@style/MyDropDownNav</item> <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item> <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item> </style> 

Now you can apply this style to any activity or the entire application.

 <activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@style/Theme.AndroidDevelopers" android:logo="@drawable/ad_logo"> 

It is also important to note that some styles that we overloaded affect all widgets (for example, android: selectableItemBackground ). That is, we change the design of the entire application in this way, which is very useful if you try to maintain the overall style.

the end

The source of the sample can be taken at code.google.com .