Color properties in Android system styles

It is recommended that you thoroughly understand Attr, Style, and Theme in Android

Several commonly used color attributes

I’m going to start with a classic picture from the Internet.

This picture is very popular on the Internet, also do not know who was originally labeled, a good illustration of the Android system in several commonly used color attributes of the scope of action.

The developer website r.atttr lists all the system attributes, and you can find the meaning of the corresponding color attribute here.

Usually when we create a new project, we have the following theme styles that define the Application in res/values/styles. XML.

<resource>
	    <! -- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <! -- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resource>
Copy the code

In fact, the style is far more than that. Since Android 5.0, the Android system has introduced the Material Design style. Each control under such a theme, the style has a great change. To unify UI styles across different versions of the system, you can set up a custom Theme that inherits from the Theme.AppCompat series.

About AppCompat related topics provide system properties, which can be reference source: android.googlesource.com/platform/fr…

Also due to version-compatibility issues with some properties, to avoid adding multiple versions of the styles file, omit the Android: namespace

colorPrimary

The background color of the App Bar is also the main color of an App. However, the ActionBar is no longer encouraged to use the Toolbar instead, and the Toolbar needs to be given a background color.

<android.support.v7.widget.Toolbar
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="? attr/colorPrimary" />
Copy the code

colorPrimaryDark

The background color of the Status bar applies only to Android 5.0 and later. In this version you can change the color of the status bar directly by modifying this property.

colorAccent

Many controls use this color when state is selected or when focus is obtained, for example:

  • CheckBox: Checked status
  • RadioButton: Checked state
  • SwitchCompat: Checked status
  • EditText: The underline and cursor color when getting the focus
  • TextInputLayout: Hover label font color
  • , etc.

android:navigationBarColor

Background color for Navigation bar, only for Android 5.0 and above

colorControlNormal

The color of some views in their normal state.

Such as:

  • No CheckBox selected or no RadioButton selected

  • EditText when out of focus, Toolbar overflows button colors

  • , etc.

colorControlActivated

ColorControlActivated is a replacement for colorAccent in some cases. In this case, colorControlActivate’s color overrides colorAccent’s color. That is, the default color is colorAccent if you don’t set it

Such as:

  • The checked state of the CheckBox and RadioButton

colorControlHightlight

Ripple effects in all clickable View touch states. Only available for Android 5.0 and above

colorButtonNormal

The background color in Button Normal state.

The difference between this setting and Button’s Android: Background is that using the colorButtonNormal on Android5.0 or higher will retain the shadow and Ripple touch effects

Android: windowBackground

Window background color, things like that android:background Android :colorBackground and so on

android:textColorPrimary

The main text color of the APP, such as actionBar

Text color, such as text color in Button, text color in EditText, text color in AlertDialog But it does not include the TextColor in the TextView, which also needs to be controlled by TextColor.

Of course, if you set TextColor, TextColor takes precedence.

EditTextColor:

Default EditView input box font color

TextColor

TextView text color

More to seehere

The style is introduced

Since Android 5.0, the Android system has introduced the Material Design style.

The topics of MD are:

  • @ android: style/Theme. Material (dark)
  • @ android: style/Theme. Material. Light (bright),
  • @android:style/Theme.Material.Light.DarkActionBar

Of course, for compatibility purposes, we usually use the them.appCompat theme from the J-compatible package

The main styles are them. AppCompat and ThemeOverlay.AppCompat, both of which have their own subclasses.

The two styles can also be used in different ways

Theme.AppCompat is generally used to set the global Theme for the entire application

ThemeOverlay.AppCompat is used to overwrite the theme of a particular view, overwriting related attributes to make them light or dark, especially for use in toolbars.

This may not be easy to understand, but here is an example to illustrate.

For example, the theme of my entire APP is like this

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <! -- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
Copy the code

The default text color is black, so the display will look like this

Here we use a Titlbar so it doesn’t match the whole thing, what we need is the background of the Titlbar using our colorPrimary font color and using a light text style color, so we can define a style ourselves

    <style name="sencond" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:background">@color/colorPrimary</item>
    </style>
Copy the code

    <androidx.appcompat.widget.Toolbar
        android:theme="@style/sencond"
        app:title="@string/app_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
Copy the code

Then apply this style to the Titlbar so that the effect is appropriate.

Of course, you can do it yourself with attributes.

This is all the styles of ThemOverlay style, and the content in each style is very simple. Just modify some of the most basic properties, unlike the Theme that has so much content in it.

Reference: juejin. Cn/post / 684490…