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 Webradio-Hosting.

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 Generator


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

Webradio-Hosting 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 Webradio-Hosting.

* You can override the action bar text color on the Styles tab in your Webradio-Hosting 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 Webradio-Hosting.

This setting isn't used within Webradio-Hosting and can be ignored. It adds a thin line to the bottom of the action bar tabs. Webradio-Hosting 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 Webradio-Hosting.

The stacked color isn't used within Webradio-Hosting 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 Webradio-Hosting app at this time.

Tab indicator color

Not used in Webradio-Hosting.

The tab indicator color isn't used within Webradio-Hosting 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 Webradio-Hosting 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 Webradio-Hosting.

The action mode background color isn't used within Webradio-Hosting 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 Webradio-Hosting app at this time.

Action mode highlight color

Not used in Webradio-Hosting.

The action mode highlight color isn't used within Webradio-Hosting 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 Webradio-Hosting 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 Webradio-Hosting 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 Webradio-Hosting. Remember to click "Submit" when you're done.

  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

Activities

Apps created using Webradio Hosting Form contain a 'home' screen called...

Dashboard

What is the Dashboard? The dashboard is your 'home' screen (activity), where users can...

Styles

The Styles tab allows you to customize the look of your app by choosing settings and...

How to use Google Analytics in your Application

Overview Google Analytics lets you measure user interactions with your app, anonymously tracking...

App Info

App Info The first step in creating your project is describing your app and...