Brain Flush

March 15, 2009

Understanding Android Themes and Styles

Filed under: Mobile Devices, Software Development & Programming — Tags: , , — Matthias @ 8:10 pm

I don’t know how many hours I’ve spent struggling with Android’s theme engine, trying to figure out — mostly by trial and error — how styles are applied and how to properly define them (let’s be honest: the documentation on styles in Android is a bit lacking). I thought it may be worth sharing what I’ve found out so far, in order to save my fellow Android developers from baldness due to ripped out hair (I sure lost some). This is a work in progress (so is Android), and some information may be inaccurate. If you find anything that you think is wrong or unclear, please let me know by dropping a line in the comments section. On another note, I assume that you have read the reference documentation on Android styles, if not, you should do that now.

What are Android styles?

A style in Android is a collection of attribute/value pairs applied to a view, an Activity or the entire application (which means, all Activities in your application). Styles for Activities are called themes, but do not get confused: they are syntactically equivalent to styles (because they are styles), they merely have a different scope. At this point I want to clarify something upfront: Themes or styles in Android have nothing to do with user styles known from applications such as, say, Firefox. Android users can not change the looks of Android applications by downloading themes from the Market or creating their own (yet). Android themes are of interest for developers only, think of them as syntactic sugar, a way of making your application’s view code more DRY.

How do I define custom styles?

Let’s look into a simple theme definition (stored in res/values/styles.xml):

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="MyTheme" parent="android:Theme.Light">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@color/translucent_blue</item>
    <item name="android:listViewStyle">@style/MyListView</item>
  </style>

  <style name="MyListView" parent="@android:style/Widget.ListView">
    <item name="android:listSelector">@drawable/list_selector</item>
  </style>
</resources>

First, we declare a new theme called MyTheme, which inherits from another theme called Theme.Light in the android namespace (specified by the ‘parent’ attribute). This means that all styles we do not explicitly specify in our custom theme will be merged down from the definition of android:Theme.Light (the curious among you may want to download the Android source code and go to frameworks/base/core/res/res/values to see how it is defined; all stock styles are defined in themes.xml and styles.xml in that folder).

In our theme definition, we also set some custom styles using the ‘item’ element. We set the windowNoTitle attribute to true, so all activities that use our theme won’t have a title bar. We also set the window background color to a custom color called ‘translucent_blue'; this is a resource reference (indicated by the @ symbol) to a color definition in values/colors.xml. We could also have passed a reference to a drawable here, or have provided a hex color value directly. Finally, we set the default style for ListView widgets to a custom style called MyListView. Its style definition follows the exact same structure as the MyTheme definition, just that this time it is not a theme, but simply a style that can be applied to ListView objects. It inherits from the default styles for ListView but replaces the default selector image with a custom drawable.

There are two important things to understand here. First, those two style definitions are completely independent of each other (well, apart from the fact that we reference MyListView in MyTheme of course). This means, that if I remove the reference to MyListView from MyTheme, I can still use that style by applying it manually to a ListView declaration in a layout file. Think of styles simply as a bunch of attributes and values you would have otherwise typed directly into your view definition, so instead of writing

<ListView android:listSelector="@drawable/list_selector" />

we write

<ListView style="@style/MyListView" />

or better yet, we let this style be applied automatically to all ListView widgets by setting it in a theme definition (as seen above). (Note the missing ‘android:’ namespace reference here; this is intentional, the ‘style’ attribute is not defined in the ‘android’ namespace. You will get an error if you try to set a style using ‘android:style’, there is no such attribute.)

That way we never have to touch the ListView definition anymore; we can do all its styling from a single point, the style sheet. This helps in leaving the code for defining structure in your layouts, while leaving the code for defining appearance in your style sheets — a good example for separation of concerns. More importantly, your style definitions can be reused, which is particularly useful if styles are shared between several views.

The other important thing to understand is that styles do not have any type semantics. When we create a style called MyListView which inherits from Widget.ListView, then the intuition is that we are creating a style that is only supposed to apply to ListView objects. That’s not entirely correct though. There is no mechanism that will check whether we indeed apply that style to a ListView or even prevent us from applying it to an entirely different view type. It just so happens that Widget.ListView defines some attributes that only make sense when being applied to a ListView (such as listDivider), this doesn’t stop us, however, from creating a style that totally makes sense for any widget type (maybe because it only uses attributes defined in the View class, the parent class of all views). The bottom line is that you have to figure out yourself whether a style you define makes sense when you apply it to a view. Android will not do any sanity checks for you. In the worst case, the targeted view will expose odd behavior when being rendered, but more probably nothing will happen at all.

So what can I style, and from what can I inherit?

To get going with styles, it’s of course important to know two things:

  1. what’s there to be styled, and
  2. what styles are already there to inherit from

The easy answer is: Anything in android.R.styleable can be used inside a style body as a subject for styling (using the item tag), while anything in android.R.style can be used as parent styles to inherit from. So, to stick with the ListView example style, the android:listSelector style item can be found in android.R.styleable, while android:style/Widget.ListView is defined in android.R.style. Those two files are therefore what you want to turn your attention to first when defining custom styles. You should generally always inherit all default style items first, and then overwrite them one by one with your custom items.

That’s basically already it, a simple yet powerful style framework if used correctly!

Useful Tidbits

Text Appearance

Did you find yourself defining text appearance like font size or text color over and over again in your layouts? Don’t do that, use text appearances instead. Text appearances are styles, too, and Android already defines some for you which you can override (they are, of course, defined in R.style). This helps tremendously in keeping your view code DRY, and encourages you to get some structure into your different font styles used throughout your app by grouping them into styles you can reference and reuse. If, for example, you want to change the default text appearance in your app, simply define a custom text appearance in your stylesheet and set it as the default in your theme:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="MyTheme" parent="android:Theme.Light">
    <item name="android:textAppearance">@style/MyDefaultTextAppearance</item>
  </style>

  <style name="MyDefaultTextAppearance" parent="@android:style/TextAppearance">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">#333</item>
    <item name="android:textStyle">bold</item>
  </style>
</resources>

Make yourself familiar with all the text appearances Android already defines, and customize them for your application as you see fit.

Colors

Avoid setting color values directly in layouts or styles. Define them in a color resource file instead, and only use references to those color values from your layouts and styles. This helps in isolating them from the rest of your view code and makes your styles less brittle if you should decide to change a color afterwards. For simple, non-stateful colors, you can simply create a colors.xml file in res/values:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <color name="default_text_color">#FFEAEAEA</color>
    ...
</resources>

Often, however, colors can be more complex. If, for instance, you use a custom list selector image, it may happen that list text is readable when not selected, but becomes difficult or impossible to read when the custom selector is drawn (e.g. because the coloring is too similar). In that case, you need a ColorStateList, which you can use to automatically change colors for the view it’s applied to, based on that view’s state. Start by creating a new file, e.g. ‘stateful_text_color.xml’ in your res/colors directory. The resource root is ‘selector’, which is what you always use when creating resources that change with a view’s state:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_enabled="false" android:color="#333" />
  <item android:state_window_focused="false" android:color="#CCC" />
  <item android:state_pressed="true" android:color="#FFF" />
  <item android:state_selected="true" android:color="#FFF" />
  <item android:color="@color/default_text_color" /> <!-- not selected -->
</selector>

You get the idea. You can set this stateful color resource like any other color, it’s simply defined in a different way.

Also keep in mind that there are already color definitions shipped with Android. The most useful of them is probably android:color/transparent, which corresponds to the color #00000000. The first 8 bit, i.e. the first two hex digits, represent the alpha channel which is used to define opacity. A value of zero means zero opacity, or 100% transparency; the remaining color bits are therefore of no relevance, because they will be invisible. You can then turn the background of your views transparent by doing something like:

<style name="MyListView" parent="@android:style/Widget.ListView">
  <item name="android:background">@android:color/transparent</item>
</style>

That’s it for now. If I find out more about styles in Android, I’ll update this post accordingly. Feel free to contribute in the comments section, too.

About these ads

98 Comments »

  1. Wow great info. I’ve bookmarked your site.

    Comment by androidandme — March 16, 2009 @ 2:14 am

  2. thanks! This topic really helped me understand styles and themes in its basic form :)

    Android’s SDK documentation is really giving me a tough time… geez

    Comment by reynolds — March 19, 2009 @ 10:36 am

  3. Great stuff. Thanks for the tips!

    Comment by justin — April 8, 2009 @ 10:50 pm

  4. It’s giving an error like – “No resource found that matches the given name (at “android:windowBackground” with value ‘@color/translucent_blue’

    Comment by jarvarm — April 18, 2009 @ 1:48 pm

    • hi,Jarvarm

      You asked the below question previously, i also get the same problem.so,if you get any solution to this please forward to jettimadhu@gmail.com.

      It’s giving an error like – “No resource found that matches the given name (at “android:windowBackground” with value ‘@color/translucent_blue’

      Thanx in advance

      Comment by jetti — September 12, 2009 @ 7:44 am

      • that was just an example, there is no predefined color called “translucent_blue”.

        You have to create a file res/colors.xml and define all colors you use in that file. Or use the ones coming with android (@android:color/some_color).

        Comment by Matthias Käppler — September 13, 2009 @ 6:58 pm

  5. ok..jusst figured out. Need to define colors.xml
    Great tutorial. Thanks.

    Comment by jarvarm — April 18, 2009 @ 6:07 pm

  6. Thanks a lot, you saved me from balding a little more :)

    Comment by joe — April 30, 2009 @ 2:31 pm

  7. Kudos. Wish the android docs were this clear.

    I’m specifically try to create a dialog with a icon in the title bar (the menu more icon). I can use @Theme.Dialog to get almost all the way there, but not the icon. Is the icon something styleable, or do I need to go in muck about with new low level view definitions?

    Comment by Charles — May 28, 2009 @ 8:08 pm

    • Hey Charles,

      glad to hear that. As to your problem, I don’t believe title bar icons are set using styles; title bar features are typically changed by going through the Window class. Did you already try something like this:

      dialog.requestWindowFeature(Window.FEATURE_RIGHT_ICON);
      dialog.setFeatureDrawable(Window.FEATURE_RIGHT_ICON, iconDrawable);

      I didn’t actually test this code, but I believe it’s going in the right direction. Also, remember that custom window features must be requested before adding any content to the dialog (same for activities). Check the Dialog and Window class documentation for more info.

      Cheers,
      Matthias

      Comment by Matthias Käppler — May 28, 2009 @ 9:05 pm

  8. [...] guide is almost completely useless regarding themes, for example sample themes don’t work. This blog entry from Brainflush is much more informative, at least its examples work. The source that helped me the most was the [...]

    Pingback by Planet Android » Blog Archive » Custom adapter in color — June 30, 2009 @ 10:32 pm

  9. [...] Taken from brainflush blog [...]

    Pingback by Understanding Android Themes and Styles - MSINO | Mobile Sino — August 30, 2009 @ 12:31 pm

  10. [...] project. started searching for other tutorials on the net on Android, like the one found on this link. There are tutorials found on the Android site but I’ve been trying to understand them for a [...]

    Pingback by Makeover 101 « Research Log of Web Science Students — September 12, 2009 @ 1:29 pm

  11. Hi Matthias Käppler,
    Thanx for your reply.Is there any alternative without help of colors.xml

    Comment by jetti — September 16, 2009 @ 12:00 pm

  12. Thanks for writing this great post. All that information should go into the official Android documentation.

    Comment by Stefan Klumpp — October 29, 2009 @ 12:17 pm

  13. (Oh dear, formatting did not work on the previous one. Please delete)

    Very useful post. I’ve bookmarked it too.

    One question: suppose I want to style something from a different namespace? I.e. I’ve defined my own widget class with its own attributes. In the layout.xml file, I would do:

    <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:gridbox="http://schemas.android.com/apk/res/org.efalk.gridtest"
        >
    

    And everything would work fine. But in styles.xml

      <style name="bigButton">
        <item name="android:gravity">center</item>
        <item name="gridbox:layout_colspan">2</item>
      </style>
    

    I get “ERROR: No resource found that matches the given name: attr ‘gridbox:layout_colspan’”

    Any ideas how I can use styles with additional namespace?

    Comment by falk — November 16, 2009 @ 6:21 pm

    • The difference is that xmlns:mynamespace=”…” is simply an instruction to your XML parser that whenever the prefix ‘gridbox’ is encountered, it should be expanded to “http://schemas.android.com/apk/res/org.efalk.gridtest”. That’s an XML thing, not an Android thing, and it’s really just to make an XML file easier to read and write. There is nothing checked about this, the URL and prefix could be anything that’s allowed in an XML file.

      Not so with the second example. You can only reference attributes in a style definition which are declared somewhere (i.e., they must be accessible through the R class). What you must do is create an attrs.xml in your res/values folder, and do something like:

      <?xml version="1.0" encoding="utf-8"?>
      <resources>>
        <declare-styleable name="YourWidget">
          <attr name="layout_colspan" format="integer" />
          ...
        </declare-styleable>
      </resources>
      

      Android will then use your schema URL (which you probably have noticed contains the package name of your app) and tries to find that styleable in your package’s R class. However, that only works in the scope of a single application. You cannot use stylables from other applications (just in case you’re trying to create a shared lib, I tried, and failed miserably :-)

      There’s a blog article about declare-styleable here:

      http://blog.pocketjourney.com/2008/05/02/android-tutorial-42-passing-custom-variables-via-xml-resource-files/

      Comment by Matthias Käppler — November 16, 2009 @ 7:01 pm

      • oh and, in the constructor of your custom widget that takes an AttributeSet as the second argument (that’s the ctor that will be called when the view is being inflated from XML), you have to call obtainStyledAttribute() to do something with layout_colspan.

        Comment by Matthias Käppler — November 16, 2009 @ 7:21 pm

  14. I need someone to style my android apps. Anyone interested?

    Comment by michael conway — November 24, 2009 @ 5:29 pm

  15. Matthias, you can simply use @android:color/transparent (which also works as a drawable btw) instead of defining your own transparent color. Also, colors can be defined as color lists and contains different colors values for different states. The content or res/color/ in the framework source code shows several example of this. This is how we change the color of items in lists when they are selected for instance.

    Comment by Romain Guy — November 24, 2009 @ 5:40 pm

    • Hi Romain, yes, actually I’m aware of android:color/transparent. I never got to update the post (it’s like half a year old). We also use color lists in our application now, which is very useful when elements like text need to change color depending on their state (selected, pressed, etc.)

      Thanks for the reminder though!

      Comment by Matthias Käppler — November 24, 2009 @ 5:45 pm

    • I’ve updated the section about colors to include your feedback. Thanks again.

      Comment by Matthias Käppler — November 24, 2009 @ 6:07 pm

  16. Actually I was just looking for info like this yesterday, and today I found this excellent bit. Thanks for sharing!!

    Comment by redsolo — November 25, 2009 @ 1:53 pm

  17. [...] need to make a note to read this post on styles and themes more thoroughly. For now I’m just gonna use it to find out what I can put in [...]

    Pingback by Activity odds n ends, and eclipse platform source attach « Teh Tech Blogz0r by Luke Meyer — January 6, 2010 @ 9:48 am

  18. Thanks, that’s a great discussion of android arcana I couldn’t find elsewhere.

    Comment by Luke Meyer — January 6, 2010 @ 9:48 am

  19. Excellent. This information should have been in the docs (as you eluded to) but is not. Thank you for providing it. I’m sure you’ve just saved me, and others, hours of time.

    Comment by wjackson — January 10, 2010 @ 3:57 pm

  20. [...] so I’m going to start getting familiar with styles and applying them everywhere. About time. This is a great post to help with understanding how styles are used in [...]

    Pingback by git rm; application toast pool; G1 bug « Teh Tech Blogz0r by Luke Meyer — February 1, 2010 @ 9:57 am

  21. Thanks, great post. Another thing I am trying to figure out is how to apply default style to custom component. For example, I extended Button and I want to apply Spinner style to it, by default.

    Comment by Andrey Vityuk — February 9, 2010 @ 10:00 am

  22. great Post !
    really the best post on android Styles !
    thanks;-)

    Comment by Piyush — February 17, 2010 @ 9:58 am

  23. Nice tips!
    But… the “textAppareance” Tidbit is not working for me :S

    I want to apply the same text appareance to all an activity, so:


    In styles.xml

    true
    @drawable/red
    @style/MyDefaultTextAppearance

    30sp
    #FFFF0000
    bold

    Then, when I start the activity, it has no title OK, red background OK, but… text still default size and format u___U
    If I apply to a single TextView the style “MyDefaultTextAppearance” works ok.
    So… what I’m doing wrong?

    Comment by Luc — March 1, 2010 @ 10:35 am

    • d’0h….. noob in wordpress posting

      <activity
      	android:name=".LayoutTester"
      	android:theme="@style/MyTheme">
      </activity>

      In styles.xml

      <style
      		name="MyTheme"
      		parent="android:Theme">
      		<item
      			name="android:windowNoTitle">true</item>
      		<item
      			name="android:windowBackground">@drawable/red</item>
      		<item
      			name="android:textAppearance">@style/MyDefaultTextAppearance</item>
      	</style>
      	<style
      		name="MyDefaultTextAppearance">
      		<item
      			name="android:textSize">30sp</item>
      		<item
      			name="android:textColor">#FFFF0000</item>
      		<item
      			name="android:textStyle">bold</item>
      </style>

      Comment by Luc — March 1, 2010 @ 10:37 am

      • The same problem. Have you found the solution? Thanks in advice!

        Comment by Aleksey M. — July 14, 2011 @ 1:03 pm

      • put the text appearance item tags inside the “MyTheme” style tags, and see if that works. It seems to be working for me.

        Comment by Sandi Sawyerr — July 8, 2012 @ 4:30 am

    • Hi Luc

      I do have the same problem with my app. All items in the theme work except Text Appearance. I use API level 4 for my app, does Text Appearance work with higher levels only? Every tipp is welcome, because im working on that problem for hours and can not find a solution.

      Comment by Marc — July 16, 2011 @ 9:08 am

  24. Great post…….I’ve been searching for a tutor on styles…great work.

    Can you post a blog on creating drawables in xml.

    Comment by Pratap S — April 8, 2010 @ 12:09 pm

  25. Is there any good way to extract resources from the Theme to use them somewhere else, e.g. getting the primary text color from a Theme and using it when coloring HTML?

    Comment by Mariano Kamp — April 25, 2010 @ 2:57 pm

  26. [...] did not work for me and a hint on where to find more information was lacking. Fortunately, this article on Android themes and styles helped. Only its section "So what can I style, and from what can I inherit?" left a bit [...]

    Pingback by Centigrade GmbH · Blog · Writing and Styling Android™ Applications – Coming from Swing — April 28, 2010 @ 1:08 pm

  27. [...] did not work for me and a hint on where to find more information was lacking. Fortunately, this article on Android themes and styles helped. Only its section "So what can I style, and from what can I inherit?" left a bit [...]

    Pingback by Centigrade GmbH · Blog · Writing and Styling Android Applications – Coming from Swing — May 3, 2010 @ 8:49 am

  28. You suggest to download the source of the framework.

    To look at them is very usefull. For example, there I found the images for the thumb of the seekbar.

    But I don’t wanted to set up git, download it all…

    Here you may browse it by web:

    https://android.git.kernel.org/

    platform/frameworks/base.git
    Select an appropriate tag, with the link tree you find all you need.

    Comment by mago — May 17, 2010 @ 8:54 am

  29. hi,
    I wanted to customize ProgressDialog is there any example of customizing ProgressDialog?

    Comment by amol — May 17, 2010 @ 12:06 pm

  30. Hi,

    Nice post – one question though about styles. To me it seems that themes are applied to components based on their type which means that all TextView’s will share the style you define. How could to do the following:

    Say you have a header text on several activities that you want to display with bigger font, then rest of the “body” texts display with smaller font.

    So how can you define that some TextView should use this HeaderStyle and others something else – on theme level that is?

    Comment by Jukka — May 20, 2010 @ 8:25 am

    • That’s not possible — you would create a new style, e.g. HeaderTextStyle and manually apply it to all header TextViews. Unfortunately, as soon as you’re not sticking with a default style for a widget type you’re back where you were: applying stuff explicitly.

      Comment by Matthias Käppler — May 20, 2010 @ 8:45 am

  31. Ok, thanks for the quick answer. I would be nice to have a “class” concept with Android styles/themes, like CSS.

    Comment by Jukka — May 20, 2010 @ 10:11 am

  32. [...] documented enough (you can read a great post about Android styles and how to use them in general here). Actually, it is a must — so please do if you want to continue understanding what’s [...]

    Pingback by Android Fun » Pretty RatingBar — May 23, 2010 @ 12:28 pm

  33. Thanks for the valuable info.

    Comment by Tushar Shrishrimal — May 24, 2010 @ 7:21 am

  34. hi all.
    Thanks for info, great post!

    I want to add themes to my android application. In the application, user will have the options to changes theme of the application. Please help how do i implement this kind of structure to my application.

    Any help, tutorials, guidance are highly appreciated.

    thanks..

    Comment by Catalin — June 4, 2010 @ 10:02 pm

  35. [...] documented enough (you can read a detailed post about Android styles and how to use them in general here). Actually, it’s a must — so please do if you want to continue understanding what’s going on. [...]

    Pingback by Pretty RatingBar | 盈哲科技 — June 10, 2010 @ 7:56 am

  36. Thanks you very much for the tutorial.

    Comment by Praveen — June 11, 2010 @ 9:15 am

  37. Hi Matthias. I posted some more detailed info about custom Android styling at http://www.androidengineer.com/2010/06/using-themes-in-android-applications.html.

    Cheers,
    -Matt

    Comment by Matt Quigley — June 21, 2010 @ 11:15 pm

  38. [...] I don't know how many hours I've spent struggling with Android's theme engine, trying to figure out — mostly by trial and error — how styles are applied and how to properly define them (let's be honest: the documentation on styles in Android is a bit lacking). I thought it may be worth sharing what I've found out so far, in order to save my fellow Android developers from baldness due to ripped out hair (I sure lost some). This is a work in prog … Read More [...]

    Pingback by Understanding Android Themes and Styles (via Brain Flush) « Paul’s blog – dedicated to my friends — August 24, 2010 @ 8:54 pm

  39. Love android – hate this crap.
    Why is it that to do something so simple as to change the way my UI looks I have to learn all sorts of stupid codes and cryptic sh*t?
    Every other graphical interface on earth has a “visual settings” where one can select which theme or style they want and not have to type it out into some retarded codebook of sorts.
    This is ridiculous.

    Comment by Matt — August 31, 2010 @ 10:42 pm

  40. Thanks for the info! Still relevant after a year and change. Big help.

    Comment by Blake Ferm — October 28, 2010 @ 11:35 pm

  41. [...] I don't know how many hours I've spent struggling with Android's theme engine, trying to figure out — mostly by trial and error — how styles are applied and how to properly define them (let's be honest: the documentation on styles in Android is a bit lacking). I thought it may be worth sharing what I've found out so far, in order to save my fellow Android developers from baldness due to ripped out hair (I sure lost some). This is a work in prog … Read More [...]

    Pingback by Understanding Android Themes and Styles (via Brain Flush) « VirtualParadise — March 18, 2011 @ 2:47 pm

  42. Many many thanks! :) :D

    Comment by BEcomputer06 — March 22, 2011 @ 12:14 pm

  43. I am trying to port ConnectedMedia app from the HTC Thunderbolt to the HTC EVO. I have succesfully decompiled it using apktool. I have created a new android project using Eclipse and the decomipled files. I am getting 2 resource errors listed below.

    error: Error: No resource found that matches the given name (at ‘textSize’ with value
    ‘@com.htc:dimen/darklist_primary_l’)

    error: Error: No resource found that matches the given name (at ‘textSize’ with value
    ‘@com.htc:dimen/darklist_secondary_m’).

    I am not sure what xml file I am missing or how to correct these error.

    Any help with be greatly appreciated

    Joe

    Comment by Joe — April 13, 2011 @ 12:00 am

    • Those look like references to platform specific styles added by the manufacturer. Just re-define them yourself with whatever value you see fit. Notice the custom XML namespace though.

      Comment by Matthias Käppler — April 13, 2011 @ 8:21 am

  44. hey,this is something i was really looking up for..Fantastic work :)

    Comment by archana — April 13, 2011 @ 2:00 pm

  45. Thanks for this nice tutorial. I m stuck at a place : I have a TabLayout in which I have a TableLayout. I fill the Table with TableRows dynamically that contains 3 textview’s. I do not set colors for the tab or the application, it just uses the default color and theme. On selecting a tableRow I want to set its background same as tab selected color. I couldn’t make out how to do this.

    I would be glad, if you can help me out with this. Am stuck at this since last 2-3 days. Please help me at the earliet.

    Thanks

    Comment by Terry — May 23, 2011 @ 2:31 pm

    • you can use selector drawables for that kind of thing: http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
      the idea is that you provide different background drawables for a single view. based on its runtime state, Android will then switch between these drawables. in your case, set a different background color for the view in its “selected” drawable.

      Comment by Matthias Käppler — May 23, 2011 @ 2:35 pm

      • But how can I know the background of tab selected. AS the background color of Tab selected and Row selected got to be the same. I am a newbie in this case and feel this things complicated as cant make out how to handle it.

        Comment by Terry — May 23, 2011 @ 3:05 pm

  46. I read it twice to get it through. Finally figured it out, how to do it.

    Comment by Rashmi — May 25, 2011 @ 5:34 am

  47. I am working with honeycomb Holo theme. I want to change the background color, foreground color, and text color of the drop down overflow menu. I also want to change the color of dialogs from black to blue. How can I achieve this? I tried inheriting from Theme_Holo and changing the window background but I don’t see any changes.

    Comment by FH — May 25, 2011 @ 3:49 pm

    • For example see the style below. I dont see any changes on the actionDropDownStyle.

      fill_parent
      50dip
      @drawable/list_item_selector
      10dip

      @style/ActionBar.Dark
      @style/CustomActionDropDownStyle
      </style

      Comment by FH — May 25, 2011 @ 4:23 pm

  48. Even today still, you’re post is of great help! Thanks! ;-)

    Comment by Sander Versluys — June 21, 2011 @ 3:39 pm

  49. Thanks a lot..this really helps…!!

    Comment by Jay Khatwani — July 1, 2011 @ 10:52 pm

  50. Up until I found this article, I couldn’t get a single theme to run using Google documentation. This helped a lot, thanks.

    Comment by otakonx — July 7, 2011 @ 7:04 pm

  51. Very good article. Specifying a theme in the manifest seems to prevent screen auto-rotation on orientation change. Have you seen this behavior? Any workarounds? Thanks.

    Comment by alanpappachan — July 16, 2011 @ 3:17 pm

  52. Hi All,
    I want to show a text in different colors in default alert dialog. I tried to apply setSpan for the text and added to the setMessage like builder.setMessage(message);. But it is showing as plain color.

    Is there any other way to do this?

    Comment by jetti — October 14, 2011 @ 8:29 am

  53. Very nice tutorial for newcomers. Thanks!

    Comment by Pawan Kumar — October 17, 2011 @ 1:29 pm

  54. [...] about UI, where we explain how Android renders views, how to write themes and styles (based on a post from my blog here), how to implement state and 9-patch drawables, how to write scalable UIs, [...]

    Pingback by Our Android book, Android in Practice, is here! « Brain Flush — October 31, 2011 @ 11:34 pm

  55. [...] about UI, where we explain how Android renders views, how to write themes and styles (based on a post from my blog here), how to implement state and 9-patch drawables, how to write scalable UIs, [...]

    Pingback by Mr. Android » Blog Archive » Our Android book, Android in Practice, is here! — November 1, 2011 @ 2:09 am

  56. An absolute fantastic piece of article on android style. Still Very usefull even today.

    Comment by Sha — November 11, 2011 @ 5:36 pm

  57. A very basic question: How do I view my theme in the WYSIWYG Eclipse graphical layout editor so I don’t have to compile and run the app all the time to see the result.
    I can only choose the basic android themes and not the one I have created.

    Comment by norfeldt — January 22, 2012 @ 6:31 pm

    • Never mind.. Just updated the ADT in eclipse and the new version seems to support own custom themes.

      Comment by norfeldt — January 24, 2012 @ 2:21 pm

  58. is there a way to disable the list selector color?

    Comment by Hemanth Kumar — February 1, 2012 @ 3:06 pm

  59. Hello Brain,

    Nice article, With reference this article, I have develop my own themes 1. Green Theme and 2. Blue Theme.

    Take look : http://kpbird.blogspot.in/2012/01/how-to-write-android-style-and-themes.html

    Comment by kpbird — February 2, 2012 @ 5:55 am

  60. Thank you, great introduction into Themes and Styles.

    Comment by Lars Vogel — March 26, 2012 @ 8:56 am

  61. Thanks dude……It is still helpful after 3 years………..

    Comment by shahzadrocks — April 7, 2012 @ 10:40 am

  62. Its great work dude…!

    Comment by A.Ramesh — April 18, 2012 @ 7:50 am

  63. Reblogged this on Android World and commented:
    Custom Thems and Styles

    Comment by A.Ramesh — April 18, 2012 @ 7:55 am

  64. This is oozing with awesomeness. Very very good. Thanks to you, I saved a lot of hair ;)

    Comment by Tushar — May 5, 2012 @ 12:40 pm

  65. Everything wus simple n clear. This blog really gave me a gud picture of styles n themes. Thank u loads for the efforts…..

    Comment by Rhodes — May 18, 2012 @ 3:44 pm

  66. How can i set theme for a programatically created EditText ???looking for an example

    Comment by Amarjeet — June 28, 2012 @ 5:02 am

    • And I am not talking about text appearance

      Comment by Amarjeet — June 28, 2012 @ 5:03 am

    • I’m not convinced this is even possible. Applying styles is an integral part of constructing a view in the first place, and the only way to pass in a style is the View(Context, AttributeSet, int) constructor, which is invoked during layout inflation. Can you perhaps extract a basic version of your EditText into a separate layout file, apply the style there, then inflate the view on-demand at runtime and make any further modifications then?

      Comment by Matthias Käppler — June 28, 2012 @ 9:01 am

  67. good stuff but please whenever you are explaining something related to styles/selectors/colors then I would request you to add screenshots too so that a person who is not actually looking to find some style guideline but here to see what has been written and how it is articulated could also get a chance to understand things right at the spot…. thumbs up for your efforts!

    Comment by Hammad — July 21, 2012 @ 11:13 am

  68. Nice Article. I came hear hoping for a specific help but although didn’t find it, the article was good. I was looking to override the gravity property of button style (Widget.Button) of android namespace but couldn’t figure it out. Could you help?

    Comment by Sam — October 23, 2012 @ 1:46 am

  69. [...] Les dejo también un excelente artículo sobre le tema. [...]

    Pingback by Android – Styles & Themes | micayael — October 25, 2012 @ 5:00 pm

  70. Thanks, incredible useful

    Comment by Juan Ardissone (@juanardissone) — October 25, 2012 @ 5:05 pm

  71. Hey, wonderful blog you’ve got here, feel I came across it on Yahoo but im not confident nowanyway, Ill check back again! Are guests allowed to post here?

    Comment by I've — November 1, 2012 @ 11:22 am

  72. I found it simply and clear, a good point to start … thanks for the Job

    Comment by N2M — November 25, 2012 @ 11:15 am

  73. Great post.. Seriously a lot better than Developer docs

    Comment by Neha Dhanwani — February 8, 2013 @ 11:41 am

  74. Good Job. After reading this, one thing became clear .. Difference between themes and styles.

    Comment by Vijay — February 23, 2013 @ 7:56 pm

  75. Very useful Thank you!

    Comment by Van Keizer — February 24, 2013 @ 4:49 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Shocking Blue Green Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

Join 37 other followers

%d bloggers like this: