The article translation: developer.android.com/guide/topic…

The Style and theme words are proprietary terms and are used directly below without translation.

 

Styles and Themes

A Style is a collection of properties applied to a View control or Window that contains a specified look and format. A style can specify many properties, such as height, fill, font color, font size, background color, etc. A Style is defined in an XML resource file and is distinguished from the layout specified in XML.

 

Styles in Android share a similar principle to CSS in Web Design, which allows you to separate Design from Content.

 

For example, by using a style, you can make your layout XML look like this:

 

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />
Copy the code

And, it can look like this:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />
Copy the code

All attributes associated with style have been removed from the layout XML and are defined in a style called “CodeFont”. It is applied via a style attribute. In the following sections, you will see how to define style.

 

A Theme is also a style that is applied to all activities or applications, not individual views (as in the example above). When a style is applied as a theme, each activity or view control in the application will apply each of its supported style properties. For example, you can use the same CodeFont style as a theme on your activity, and all the internal fonts in your activity will change to CodeFont style fonts and become green monospaced fonts.

 

Define a Style Style

To create some styles, you can save them in an XML file in the RES /Values/ folder of your project. The name of the XML file is arbitrary, but it must have an.xml extension and be stored in the res/Values/ folder.

 

The root node of the XML file must be <resources>

 

For each style you create, add a <style> element and require a name attribute, which identifies the unique and required attribute. Add all your style attributes again, by adding the <item> element, using a name attribute and a value attribute declared in the style attribute, both of which are required. The value attribute of <item> can be a keyword string, a hexadecimal color description, a reference to another resource type, or a dependent value in another style attribute. Here is a simple sample style file content:

<? The XML version = "1.0" encoding = "utf-8"? > <resources> <style name="CodeFont" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#00FF00</item> <item name="android:typeface">monospace</item> </style> </resources>Copy the code

Each child node of the <resources> element is converted to a program resource object at compile time. It can be referenced by the value of the name attribute of the <style> element. This sample style can be referenced in AN XML layout, such as “@style/CodeFont” (as in the example described above).

 

The parent attribute in the <style> element is optional and points to a resource ID in another style from which it can inherit attributes. You can override inherited attributes if appropriate.

 

Remember that a style you want to use in your activity or application is defined in an XML file, and all view controls have the same style. A style, such as the one defined above, can be applied to a single view control as a style application or applied to all activities or applications as a theme. How to apply a single view or as the subject of an application is discussed later.

 

inheritance

The parent property in 

  <style name="GreenText" parent="@android:style/TextAppearance">
        <item name="android:textColor">#00FF00</item>
    </style>
Copy the code

 

If you want to inherit your own style, you don’t have to apply the parent property. Instead, build a prefix for the name of the style you want to inherit, separated by dots. For example, to create a style that inherits from the CodeFont style above, but makes the color red, you could write your new style like this:

<style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>
Copy the code

Note that the <style> tag has no parent attribute, but since the name attribute starts with the style name CodeFont (which is a style you already defined), from which the style inherits all the style attributes. This style overrides the Android :textColor property and changes the text to red. You can refer to this new style like @style/ codefont.red.

 

You can continue this inheritance many times, using “dot” links to these names. For example, you can extend codefont. Red to make it bigger, like this:

  <style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
    </style>
Copy the code

This is inherited from CodeFont and codefont. Red, and the Android :textSize attribute is added

 

Note: this method of inheriting by link name can only be used for styles in your own resource files. You can’t use it to inherit android’s built-in styles. To reference built-in styles, such as TextAppearance, you must use the parent property.

 

Style properties

Now that you know how to define a style, you need to learn what type of style attributes are available under the

element. You’re probably already familiar with many existing ones, such as layout_width and textColor. Of course, there are many style attributes you can use.

 

The best place to find properties that can be applied to a given view control is the corresponding class reference, which lists all supported XML properties. For example, all the attributes listed in the table TextView XML Attributes can be applied to the TextView element (or its subclasses) in a style definition. One of the attributes listed in the reference is called android:inputType, so you can apply this attribute to the

element, as follows:

<EditText
    android:inputType="number"
    ... />
Copy the code

You can create a style for the EditText element that contains this property instead of the above:

<style name="Numbers"> <item name="android:inputType">number</item> ... </style> So that your layout XML can be styled like this:Copy the code
<EditText
    style="@style/Numbers"
    ... />
Copy the code

This simple example seems like a bit more work, but when you add more style attributes and take the ability to reuse styles in multiple places as a reference factor, your effort will be worth it.

 

For references to properties of all available styles, see R.ttr References. Remember that all view control objects do not accept all the same properties, so you can specify the style properties supported by the view control class in the normal reference diagram. However, if you apply a style to a view control that contains properties that are not supported, the view control will apply those properties that are supported and simply ignore the others.

 

Some style properties are not supported in view controls and can only be used as themes. Those style properties apply to all forms and cannot be used on any view controls. For example, some style properties can hide the title of an application, hide the status bar, or change the background of a form. Those types of style properties do not belong to any view control object. To find more properties that only apply to the theme theme, look at properties that start with Windows in r.atr references. For example, the windowNoTitle and windowBackground properties can only be applied to activities and applications. See the next section for more on “Applying styles to Theme.”

 

Note: In the

element, don’t forget to prefix the attribute name with Android:, which is a namespace, such as

.

 

Apply styles and themes to the UI

There are two ways to set a style:

  • Specify a style for a single view control, adding the style attribute to the view element in the XML layout file.
  • Specify a style for the entire activity or application, added to the <activity> or <application> node element in manifest.xmlAndroid: theme attribute.

When you apply a style to a single control in the layout, the properties defined in your style are applied to the view component. If your style is applied to a ViewGroup, none of its child control elements can inherit the style’s attributes, only the view element you specify directly can apply the attributes. However, you can still style all view elements in your application by theme.

 

To apply a theme, you must apply styles in manifest.xml for activity or aplication. When you do this, each Activity or aplication view element will apply the properties it supports in those styles. For example, if the CodeFont styles mentioned above are applied to an Activity, this is where all view elements that support text-style attributes will apply them. View elements that do not support these attributes will ignore them. If a view supports a subset of properties, it will only apply those properties.

 

Apply styles to view elements

Here’s how to set a style in an XML layout:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />
Copy the code

TextView will now have styles, as described by the properties defined by CodeFont. You can refer to the example above.

Note: Style styles do not need to use the Androidoi: namespace prefix.

 

Apply styles to your activity or application

To use styles on all your activities or applications, open androidmanifest.xml and modify the

tag to include the Android :theme attribute and specify a style name, such as:

<application android:theme="@style/CustomTheme">
Copy the code

If you want to use a style for an activity in your app, add android:theme to your

TAB.

Android comes with built-in resources so you can use these predefined styles without having to rewrite them yourself. For example, you can use the Dialog theme to make your Activity behave like a Dialog:

<activity android:theme="@android:style/Theme.Dialog">
Copy the code

Or if you want to make your background transparent, use a transparent theme:

<activity android:theme="@android:style/Theme.Translucent">
Copy the code

If you like a theme but want to use it at full speed, you can add it to the parent property of your custom theme to inherit it. For example, you can modify the traditional light theme and use your own colors, like this:

<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>
Copy the code

Note that the colors used above are provided in other resources, because the Android :windowBackground property only supports references from other resources, unlike the Android :colorBackground property, which can specify a color description text.

Now, in your Mnaifest file, you can use CustomTheme instead of theme. Light:

<activity android:theme="@style/CustomTheme">
Copy the code

 

Choose a platform-supported style as the base

Newer versions of Android offer additional styles for apps to use, and you may want to use them to run on those platforms while still being compatible with older versions. You can do this by customizing styles, using the “resource picker” to switch between different parent themes based on the platform version.

For example, here is a declaration of a custom style that is a simple standard platform default light theme. It may be placed in an XML file in the res/valeus folder (typically in res/values/styles.xml).

<style name="LightThemeSelector" parent="android:Theme.Light">
    ...
</style>
Copy the code

When running on Android 3.0(API level 11) or higher, you can make this style use the newer Holo style theme. You can place an optional declaration style to prevent XML files in the res/values-v11 folder, But let this style inherit the holo theme:

<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    ...
</style>
Copy the code

 

You can now use this theme like any other, and when running above Android 3.0, your app will automatically switch to a Holo-style theme.

You can find a standard list of properties for you to use in r.tyleable.theme.

For more information, such as themes and layouts, and switching resource file options based on platform version or device configuration, you can read Providing Resources.

 

Use platform styles and themes

The Android platform offers many styles and themes that you can use in your apps. You can find references in the r.style class. In order to use the style of the listed here, you can use the “point” replace all underlined integral style name, for example, you can use the “” @ android: style/Theme. NoTitleBar”. To use the Theme_NoTitleBar style.

 

R.styles references, however, are not well documented and do not fully describe styles, so looking at the actual source code for those styles and themes can give you a better understanding of the individual style attributes provided. For more style and theme references, you can see the source code below:

 

    • Android Styles (styles.xml)
    • Android Themes (themes.xml)

Those files will help you learn by example. For example, in the Android Theme source, you’ll find a declaration

 

For more information on the syntax of styles and themes in XML, see the Style Resource documentation.

 

For a reference to an available style property, you can use it to define a style or theme (such as “windowBackground” or “textAppearance “), which you can read in R.atr or the respective view class when you create a style.