Action Bar Style Generator

The Action Bar Style Generator is an online tool that you can use to make a custom action bar theme compatible with Andromo.

It will create a zip file containing all the styles and assets that are needed by the action bar, using the colors and settings that you configure in the tool.

Quick overview

Simply adjust the settings in the Action Bar Style Generator to your liking, and download the resulting zip file to your computer. Then, on the Styles tab in your project, set your "Action Bar Theme" setting to "Upload Custom Theme File" and upload the zip file. Click "Save Changes" and you're done.

action-bar-style-generator-360x460.png

Here are the Action Bar Style Generator settings in a bit more detail:

Style name

The Action Bar Style Generator lets you customize the internal name that will be used for the styles that it generates. You can use the default name of "example" or you can change it to any name you want. Just make sure you follow the rules for Android asset naming: it must begin with a lowercase letter, and contain only lowercase letters from a-z, digits from 0-9, decimal points (.) and underline characters (_).

Style compatibility

Andromo requires "Sherlock" styles, so make sure you set the Style compatibility mode to "Sherlock" and not "Holo." (Sherlock should be highlighted in blue.)

Base theme

Choose a base theme for your app. This affects all kinds of things, most notably the color used for icons on the action bar, and the default color for the title and menu text.* The themes are named according to the background color, so a "dark" base theme refers to a dark background with brightly colored icons and text.

You should decide whether you intend to choose a light or dark background color for your action bar and app, and set this accordingly so the base theme will complement them.

  • Light: your app and the action bar have a "light" theme (dark icons over a light background).
  • Dark: your app and the action bar have a "dark" theme (light icons over a dark background).
  • Light - Dark action bar: your app will have a "light" theme (dark text on a light background) and the action bar will have a "dark" theme (light icons on a dark background).

Note that the base theme affects both the look of your action bar and the overall look of your app itself. Your choice here will have a subtle affect on the parts of your app that you cannot style directly within Andromo.

* You can override the action bar text color on the Styles tab in your Andromo project.

Action bar style

This setting lets you choose between two basic action bar styles:

  • Solid: an action bar with a single solid background color that extends to the full height of the action bar.
  • Transparent: an action bar with a thin line of color along the bottom, but otherwise transparent. Note that this means the action bar will allow the dark or light window color (from the base theme) to show through its "transparent" background. (The name "transparent" refers to the fact that the base theme shows through.)

Action bar texture

Whether to apply a subtle texture effect over the action bar color. Only visible on devices running Android 4.0 (Ice Cream Sandwich) or newer.

Tab hairline style

Not used in Andromo.

This setting isn't used within Andromo and can be ignored. It adds a thin line to the bottom of the action bar tabs. Andromo does not make use of action bar tabs, so turning this on or off will not have any effect on your app at this time.

Action bar color

The background color used for the action bar if the action bar style is set to "Solid."

Stacked color

Not used in Andromo.

The stacked color isn't used within Andromo and can be ignored. It controls the background color of the tabs when they are "stacked" below the action bar. You can set this to any color you want, but it will not have any affect on your Andromo app at this time.

Tab indicator color

Not used in Andromo.

The tab indicator color isn't used within Andromo and can be ignored. It controls the color of the line that indicates which tab is selected. You can set this to any color you want, but it will not have any affect on your Andromo app at this time.

The main background color used for the various popup menus in the action bar. For some items this will be combined with the Accent color below.

Accent color

An accent color used when menu items are focused, selected or pressed, and also used for progress bars and the line beneath the action bar if the action bar style is set to "Transparent." On popup menu items this will be combined with the Popup color above to create a variety of different colors.

Action mode background color

Not used in Andromo.

The action mode background color isn't used within Andromo and can be ignored. It controls the background color shown when the action bar is placed into contextual "action mode." You can set this to any color you want, but it will not have any affect on your Andromo app at this time.

Action mode highlight color

Not used in Andromo.

The action mode highlight color isn't used within Andromo and can be ignored. It controls the highlight color shown when the action bar is placed into contextual "action mode." You can set this to any color you want, but it will not have any affect on your Andromo app at this time.

Output resources (Download .ZIP)

This section shows some of the image assets that will be generated by the tool. You should click the Download .ZIP button when you're ready to download the theme. Be sure to save the file to a convenient location.

You can apply your custom action bar theme to any Andromo project by uploading it on the Styles tab. Set the "Action Bar Theme" option to "Upload Custom Theme File" and then use the Choose File button to upload your theme zip file to Andromo. Remember to click "Save Changes" at the bottom of the Styles tab when you're done.