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

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
Question 1: How are the colors of the Material Color Picking tool supposed to be mapped onto the theme attributes?
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
Question 3: Is there any reference which completely lists all styles which are already defined in by the material design library and explains
what purpose they serve
in which context they should be applied to views (aka widgets)
which subclass of View the style supports (i.e. a edit field, a radio button, etc.)
which semantic attributes of a theme the style uses for what part
Question 4: Is there any reference which completely list all semantic values which are defined by the material design library and explains
their type (i.e. a color, a font size, a dimension)
their intended purpose (e.g. should be light background color)
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.

Related

FIGMA I con set that can quickly change Color

Trying to understand how to make component sets and use variance to make designing more simplified. I have a tile that has an icon on the right that I want to be able to change both what type of icon it is as well as its colour. Is there a way to create the two-component properties using variance? Do all the icons need to be grouped by color and do I need to adjust their naming conventions (still not to sure how that works as well)h
There is a more efficient way to do this, by taking advantage of Color Styles. With this method, you only have to create your icons once, and no need for variants. Color Style swapping will handle that.
Create your icon components, but using a boring black color. Avoid creating variants of the icons, if it's only the fill color that's changing.
Instead create a standard set of Color Styles for your icons.
Your designers then, could place an instance of a black icon from your library. Then use the Selection Panel to replace the black color with one of your defined color styles.

custom font selector for interactive SVG

I have an SVG image (logo) that contains SVG text element. I want to provide users with ability to change font of the text via list UI (drop down list), so that if user clicks the drop down list they can see how will this text look like approximately after selection. If selected such font attributes would apply to the SVG text element.
Right now I feel like I don't understand how would I learn for a particular user's browser/system which fonts are available.
I read SVG fonts specs and it is still confusing.
One approach I found is:
- I pre-bake the list based on assumptions (lets say we list all popular fonts)
- show this list to user who could see on their own whether the applied font is looking good for them
- If users selects an option that is not supported by their system - it will be matched by closest "equivalent" font (according to the specs)
But this is suboptimal as I want to guarantee what this user will generate as SVG logo will look the same for all other users.
Then I was thinking to embed the fonts I liked from fonts.google.com into my web-site and list those?
So given the description and requirements to make the font choice consistent across many users - what should be my approach?

Changing colors in a simple shape editior

I've made a simple shape editor. I can change colors (used to fill shapes) by click on buttons in a menu bar. The disadvangate of this solving is the fact that the numbers of colors are so restricted. I can't find a better solution for my program. Can somebody help me and give me an idea how can I improve it? I thought about color palette, but I have no idea how can I do this.
The image:
("Aktywny kolor" means active colors, and there is the list of colors below, which I can use)
You would need to use a color picker where the colors are distributed on many pixels and not on a very small set of color names. Since you are using applet, you might want to download an already made color picker compatible with your environment, or you might want to write your own, depending on whether the things you find meet your expectations.

Creating an image whith GIMP hiding another image unless we add a color filter in real life

The idea is like the inverse of Ishihara test (http://www.colour-blindness.com/colour-blindness-tests/ishihara-colour-test-plates/).
I want to create with GIMP an image that showing something and then if I add a color layer, for exemple green glasses, then I see something new appearing.
I've searching far in Google and so but didn't found anything. Do you know how would I make this?
The Ishihara tests use the principle of combining things color blind persons cannot differentiate.
Coloured glass filters will only remove other colours from what you see. They don't add something. Therefor it is not possible to create a digital image that contains no information unless seen through a colour filter.
The only thing you can do is overlap your "hidden" information with high contrast colour noise.
Like here:
Using the glasses / filter only improves the visibility. The information is not added. It was always there.

Custom FeedCount. Acording to which rule FeedBurner converts colors?

I am traying to prepare own dynamicly generated FeedCount for my own subscription service. I think this will be a good idea to support convention for setting colors via URL which is well known from FeedBurner,
http://feeds.feedburner.com/~fc/Ekundelekpl?bg=99CCFF&fg=000000&anim=0
this URLs produce such image.
fg is means a text color, bg means here a dark blue color. However light blue (ccffff) is here generated according to some rule.
Is this a some kind popular convert color convention, which is well known in webdeveloper/designers world?
I checked few other pairs of color, but I count figure out what the rule is. I don't want to hardcode all colors supported by FeedBurner.
[EDIT]
There is 216 available colors. Here is twelve pairs which I have extracted:
000000,7e7e7e
000033,8a8a8a
000066,909090
000099,9999CC
0000CC,9999FF
0000FF,9999FF
006600,909090
006633,99CC99
006666,A2A2A2
006699,99CCCC
0066CC,99CCFF
0066FF,99CCFF
I did it in another way.
I decided to use feedburner as template. I download proper image and override parts which interest me.
https://github.com/noisy/eGazeciarzFeedCount

Resources