Creating Custom Android Styles, the Easy Way

At first I want to tell you that I am not a graphical designer and I don't poses the skills to create beautiful UIs. This guide is to the tools we have available for us and how to use them. I will leave the selection of the colors and styles to people who understand it better than I do.

Starting with ADT

The Android Developer Tools for Eclipse has been getting better and better and now contain a lot of useful visual helpers as well. When you create a new project you can generate an icon right in the new app wizard. While this icon is rarely good enough for production it makes a much better placeholder for your app than the default Android icon that was used before. You can use your app's color scheme when creating the icon.

The resulting app uses the icon you created as a launcher icon as well as the action bar home icon.

You can find even more icon tools from the Android Asset Studio including menu, action bar, tab and notification icon generators.

Styling the Action Bar

The Android action bar is the most prominent UI element of most Android apps. Using the default style doesn't make sense an you will definitely want to style it to make your app look unique. Fortunately there's an easy to use online tool that makes it easy for you: the Android Action Bar Style Generator. This free webapp lets you type in the colors you've chosen to use in your app and it will generate all the necessary files you need for your app.

Note: don't use caps or spaces in the syle name. It is used to name all the assets that are being generated. Use only characters that are allowed in Android resources!

Once you're done download the generated ZIP file and copy it's content to into your app. You'll find different drawables and XML files in the zip. They all go to the res folder of your app.

Once you have copied them to your app project you simply need to enable the created theme. The name of the theme is what you gave it in the webapp. You'll find it in the values folder from the generated styles file:

To enable the generated style you must add it into your app's manifest. Simply set the app style to point to the generated style:

Now your app's action bar is styled as you defined throughout your app.

Customizing Component Styles

At this point you might be done. Your app has a little bit custom theme and looks a bit different from apps that only use the default theme. But what if you are not happy with the button style want to change your component styles as well? Not to worry. There's a webapp for that too. The Android Holo Colors Generator will help you. It is a very simple tool that lets you define colors for your components. You pick the color you want and which components you want to replace and you're set. Of course, this is just a very small change to the default theme but if you want to change the component styles even more you can use the generated assets as the starting point and edit them in a tool of your choice.

Tip: to keep things separated give this style a different name than you gave to the action bar style.

In this example I've replaced the button as well as the edit text.

The same way as the other generators this webapp generates a ZIP file you need to download and extract into your app. It contains drawables as well as XML files.

Now you just need to enable the style in your app. This time we cannot do the same thing we did earlier with the action bar styles as that would override the action bar style. Instead, we can use make the new style the parent of the style we generated for the action bar. Look for the theme name defined in the new component style you created and change that to be the parent of the action bar style. As the component style has the Android Holo theme as its parent our app theme is still a Holo theme.

Now the components we wanted to customize are themed as well. Here's the finished example app:

The Tools

Android Asset Studio

Android Action Bar Style Generator

Android Holo Colors Generator

Massive thanks to the people who built these tools and gave them to the community for free:

Roman Nurik, Jérôme Van Der Linden, Jeff Gilfelt!

(c) This article originally appeared on androiuipattens.com blog by Juhani Lehtimäki. Fully copying without permission is prohibited.