Full Documentation, i.e. Reference, of Android Material Themes and Styles

Viewed 38

I have two specific and several more general questions which are all related to the availability of documentation for material theming in Android. The general questions are the result of the specific questions.

According to the official docs [1], [2], [3], [4] and blogs [5], [6], [7] about Android Material Theming one should adopt the following theme values for branding

colorPrimary
colorPrimaryVariant
colorOnPrimary
colorSecondary
colorSecondaryVariant
colorOnSecondary

Those are also the values which are preset when one creates a new Android project with the wizard. According to [2] one should use the Material Color Tool to pick colors, check the colors in various previews and also assess their accessibility, in particular their legibility. After one has chosen a primary and secondary color, the tool automatically recommends a matching text color as well as a darker and lighter variant for each color.

The problems starts, when one exports the chosen colors to an android XML file. (The link is in the upper right corner of the Tool). The exported values are named

primaryColor
primaryLightColor
primaryDarkColor
secondaryColor
secondaryLightColor
secondaryDarkColor
primaryTextColor
secondaryTextColor

Obviously, there is a mismatch in the number and names of the attributes between what the theme expects and what the color tool exports. Moreover, according to [6] and [8] the primary and secondary color (colorPrimary, colorSecondary) are supposed to be used as background colors (for certain elements of the UI) with foreground elements (such as text) printed on top of them (using colorOnPrimary and colorOnSecondary, resp.). Also, [6] tells us that the secondary color should preferably be a bright complement to the primary color. Hence, I decided for a light yellow on which black text is perfectly legible. However, I had to find out that androidx.preference.PreferenceFragmentCompat uses the secondary color (colorSecondary) as the foreground color of the caption of preference groups on a background which is colored with colorBackground which equals white. Obviously, a bright yellow on white background is anything but legible. This leads me to my first two, specific questions

  1. Question 1: How are the colors of the Material Color Picking tool supposed to be mapped onto the theme attributes?
  2. Question 2: Is it correct that the primary and secondary color are also used as text colors on surface background or is this simply a bug in the style used by PreferenceFragmentCompat for captions?

This surprising experience led my to more general questions.

According to the official docs and my understanding views and in particular widgets are governed by styles, e.g. TextAppearance.MaterialComponents.Caption for a TextView which is used as a caption. These styles do not assign specific values to the attributes which they define, but refer to "semantic" values which act as a placeholder such as colorPrimary and which are defined by a theme. Then the theme assigns specific values to these semantic values, possibly using another step of indirection, e.g. by referring to named colors. Assigning custom values to the semantically named values of a theme is supposed to be the main anchor point to adopt a theme like Theme.MaterialComponents.DayNight without the need to redefine all individual styles separately. However, more or less by accident, I found the styles for TextView such as TextAppearance.MaterialComponents.Caption, TextAppearance.MaterialComponents.Body1. Again, more or less by accident, I found the theme attributes colorSurface, colorError, colorBackground. They are listed in the blog 6.

This leads to the following general questions

  1. Question 3: Is there any reference which completely lists all styles which are already defined in by the material design library and explains
    1. what purpose they serve
    2. in which context they should be applied to views (aka widgets)
    3. which subclass of View the style supports (i.e. a edit field, a radio button, etc.)
    4. which semantic attributes of a theme the style uses for what part
  2. Question 4: Is there any reference which completely list all semantic values which are defined by the material design library and explains
    1. their type (i.e. a color, a font size, a dimension)
    2. their intended purpose (e.g. should be light background color)
    3. how they are supposed to interact with other semantic values (e.g. should contrast with color xyz, should be at least be larger than the double of size xyz)

I am thinking of a reference like a typical reference for an API. I am not looking for the 1000th blog article which again recaps the basic attributes from above. I already had a look at https://material.io/, but it seems that there is no such thing.

0 Answers
Related