Android-Holo-Colors

Custom components look&feel

The need is born when i was coding an application for a client (the app is not yet available on store, so i won’t tell who is it). We needed to create custom edittext and spinner with different colors :

Edittext & Spinner colored

The same question appears thousand times on stackoverflow (custom checkbox, custom edittext, custom progressbar, custom radio, and so on…).

==> So, how to achieve that ?

Background drawable

The first, simple and naive solution is to replace background drawable of the component. For example, on an EditText:

<EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_edittext" />

Where res/drawable/selector_edittext.xml should be something like (inspired from Android source) :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/textfield_default_holo_light" />
    <item android:state_enabled="true" android:state_focused="true" android:drawable="@drawable/textfield_activated_holo_light" />
    <iten android:state_enabled="true" android:state_activated="true" android:drawable="@drawable/textfield_activated_holo_light" />
    <item android:state_enabled="true" android:drawable="@drawable/textfield_default_holo_light" />
</selector>

And drawables are png or ninepatch (.9.png) of your choice. In my case, we wanted something with Holo aspect but with different colors. For example :
Holo version (see Android source tree): textfield_activated_holo.9.png
Our versions :

Some graphical skills are needed (Gimp, Photoshop, whatever…). If you have the chance to have an ui designer in your team, you are a lucky guy. Otherwise, you’ll need to do it yourself. That’s not so complicated in my example (edittext) but have a look at checkboxes

All that done (« fiou ! »), you can set your background on all your edittext. Not a beautiful solution, isn’t it ?! Hopefully, Android provides styles and themes to simplify this job.

Styles and Themes

Android provides a very clean solution to avoid code duplication and to simplify theming of your application. It’s closed to CSS on the web world : styles and themes. I won’t explain all the stuff, the documentation is clear. Let’s theming our previous edittext component.

In order to specify the android:background on all edittexts in the application, we’ll define a style (values/styles.xml) :

  <style name="EditTextStyle" parent="android:Widget.EditText">
     <item name="android:background">@drawable/edit_text_holo_dark</item>
  </style>

We can also define the style for post-android4 (values-v11/styles.xml) and it’s important in our case since we wanted to extend Holo style:

  <style name="EditTextStyle" parent="android:Widget.Holo.EditText"> <!-- or Widget.Holo.Light.EditText -->
     <item name="android:background">@drawable/edit_text_holo_dark</item>
  </style>

This style inherit from a parent Android style (to get all others attributes) and override the famous background attribute. At this point, we could use the style in our layout with style="@style/EditTextStyle. But we should duplicate the code on all our edittext (that’s what we wanted to avoid!).

So we need to create a theme (values/themes.xml). A theme is a set of styles that can be used for the complete application or a single activity :

<style name="CustomTheme" parent="android:Theme">
    <item name="android:editTextStyle">@style/EditTextStyle</item>
    <!-- ... many others styles ... -->
</style>

Same remark as for style, we define a values-v11/themes.xml, to extend Holo Theme:

<style name="CustomTheme" parent="android:Theme.Holo"><!-- or Theme.Holo.Light -->
    <item name="android:editTextStyle">@style/EditTextStyle</item>
    <!-- ... many others styles ... -->
</style>

We override the editTextStyle attribute with the previously declared style. The attribute editTextStyle is defined in Android attributes file (attrs.xml, see also R.attr for the complete list of attributes you can extend). That’s the magic part of themes and styles, because Android will be able to apply the defined theme to all edittext.

To apply our theme to application or activity, we can use the following code :

<application android:theme="@style/CustomTheme">
<activity android:theme="@style/CustomTheme">

If you read french, i suggest a good article from Cyril Mottier on the subject.

All that done (« fiou again ! »), you have a drawable.xml, several pictures (depending on the components, it can be up to ten) for several densities (imagine for mdpi, hdpi and xhdpi, you multiply by 3), styles.xml, themes.xml (for both ICS and older Android versions). A lot of work !

Android Holo Colors Generator

Imagine if all the previous stuff (styles, themes, png) was generated for you. That’s the idea I had when I created Android Holo Colors Generator.

  1. You choose a Theme name, to be used in themes.xml and AndroidManifest.xml
  2. You pick the color of your application:
  3. You choose the parent Theme:
  4. You choose the components you need:
  5. And you download the package with everything you need, ready-to-use res folder containing xmls and pngs:
  6. Finally, you include all the files in your project and that’s it ! A few seconds rather than long hours to create pictures manually.

Conclusion

Android provides an interesting mechanism to style your application but it can be tedious to do it by yourself. Hopefully, there is now a tool that do the job for you. I hope you’ll appreciate. Do not hesitate to give feedbacks and send issues on the github project.

Share

2 comments

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*