Android styling (style) and themes (theme)

reprint: HTTPS://GOLD.XITU.IO/POST/58441C48C59E0D0056A30BC2Styles and Themes

A style is a collection of properties that specify the appearance and formatting for a View or window. Styles can specify many properties, such as height, padding, font color, font size, background color, and so on. A style is defined in an XML resource that differs from the XML for the specified layout.

The styles in Android are similar to the cascading style sheets in web design-you can separate the design from the content.

For example, by using styles, you can put the following layout XML:

<TextView    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:textColor="#00FF00"    android:typeface="monospace"    android:text="@string/hello" />简化成这个样子：<TextView style="@style/CodeFont" android:text="@string/hello" />

All style-related properties in the layout XML have been removed and placed inside a style definition named Codefont, and then applied through the Style property. You will see a definition of that style later in this article.

A theme is a style that is applied to an entire Activity or app rather than to a single View, as shown in the previous example. When you apply a style as a theme, each view in the Activity or app will apply each of its supported style attributes. For example, you can apply the same Codefont style to the activity theme, and then all the text within that activity will have a green fixed-width font.

Defining styles

To create a set of styles, save an XML file in the res/values/directory of your project. You can specify the name of the XML file arbitrarily, but it must use the. xml extension and must be saved within the Res/values/folder.

The root node of the XML file must have resources.

For each style that you want to create, add a STYLE element to the file that has a Name property that uniquely identifies the style (the property is a required property). Then add an item element for each property of the style with the name of the declaration style property and the property value, which is a required property. Depending on the style property, the value of item can be a keyword string, a hexadecimal color value, a reference to another resource type, or another value. The following is a sample file that contains a single style:

<?xml version="1.0" encoding="Utf-8"?><Resources><StyleName="Codefont"Parent="@android: Style/textappearance.medium" > <ItemName="Android:layout_width" >fill_parent</item> < item name= "android:layout_height" > Wrap_content</item> <item name= "Android:textcolor" > #00FF00 </item> <item Span class= "hljs-attr" >name= "android:typeface" >monospace </item> </style></RESOURCES>         

Each subkey of the resources element is converted to an application resource object at compile time, which can be referenced by the value in the Name property of the style> element. The example style can be referenced from the XML layout in @style/codefont form (as shown in the introduction above).

The Parent property in the style element is an optional property that specifies the resource ID of another style that should be the source of the property inherited by this style. If you prefer, you can then replace these inherited style attributes.

Remember that defining styles in XML that you want to use as Activity or apply themes is exactly the same as defining a view style. Styles, such as those defined above, can be applied as a single view style, or as an entire Activity or application theme. The following article explains how to apply a style to a single view or how to apply a style as an applied theme.

Inherited

You can specify the style that should be the source of the property that your style inherits from by using the Parent property in the style element. You can use it to inherit the properties of an existing style, and then define only the properties that you want to change or add. You can inherit properties from styles that you create yourself or from built-in styles. (For information about inheriting properties from the styles defined on the Android platform, see Using platform styles and themes below.) For example, you can inherit the default text appearance of the Android platform and then modify it:

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

If you want to inherit properties from a self-defined style, you do not have to use the parent property, but instead simply add the name of the style you want to inherit into the name of the new style and separate it with a period. For example, to create a new style that inherits the Codefont style defined above, but sets the color to red, you can create this new style as follows:

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

Note that there is no parent property in the style tag, but because the Name property begins with the Codefont style name (which is a style you create), this style inherits all of the style properties of the style. This style then replaces the Android:textcolor property and sets the text to red. You can refer to this new style @style/codefont.red form.

You can continue such inheritance by using the period link name, regardless of the number of times. For example, you can expand codefont.red by using the following code:

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

This code inherits from the Codefont and codefont.red styles at the same time, and then adds the Android:textsize property.

Note: This method of inheriting by linking names only applies to styles defined by your own resources. You cannot inherit Android built-in styles in this way. To reference the built-in style (for example, textappearance), you must use the Parent property.

Style properties

Now that you understand how styles are defined, you need to know what type of style attributes (defined by the item element) can be used. You are probably familiar with some of them, such as Layout_width and TextColor. Of course, there are many other styling properties that you can use.

The corresponding class reference is the most convenient for finding properties that apply to a particular View, listing all supported XML attributes. For example, all of the properties listed in the TextView XML attribute table can be used in the style definition of the TextView element (or one of its subclasses). One of the properties listed in the reference is Android:inputtype, so if you normally place the Android:inputtype attribute in the EditText element, as follows:

<EditText    android:inputType="number"    ... />您就可以改为给包括该属性的 EditText 元素创建一个样式：<style name="Numbers">  <item name="android:inputType">number</item> ...</style>

This way your layout XML can now implement this style:

<EditText    style="@style/Numbers"    ... />

This simple example may seem like a lot more work, but if you add more style attributes and take into account the ability to reuse styles in a variety of places, you'll find that the payoff can be substantial.

For reference on all available styling properties, see R.attr Resources. Remember that all view objects still do not accept style properties, so you should normally refer to the specific view class for the supported style properties. However, if you apply a style view that does not support all style attributes, the view applies only those properties that are supported and ignores the other properties directly.

However, some style attributes are not supported by any View element and can only be applied as a theme. These style properties apply to the entire window and not to any type of View. For example, a theme's style properties can hide the app title, hide the status bar, or change the background of the window. These types of style properties do not belong to any View object. To discover these theme-only style properties, view the contents of the properties that begin with window in R.attr resources. For example, Windownotitle and Windowbackground are style properties that only work when the style is applied to an Activity or app in a themed form. See below for information on applying styles in a themed format.

Note: Don't forget to use the Android: namespace to prefix the property names in each item element.

例如：<item name="android:inputType">。

Apply styles and themes to the UI

There are two ways to set styles:

If you are applying a style to a single view, add the Style property to the view element in the layout XML.
Or, if you are applying styles to an entire activity or app, add the Android:theme attribute to the activity or application element in your Android manifest.
When you apply a style to a single view in a layout, the properties defined by the style are applied only to that view. If you apply a style to ViewGroup, the child View element will not inherit the style properties-only the element that you apply the style to directly applies its properties. However, you can apply styles to all View elements by applying a style as a theme.

To apply a style definition as a theme, you must apply the style to the Activity or app in the Android manifest. If you do this, the Activity or each View within the app will apply each of its supported properties. For example, if you apply the Codefont style from the previous example to an Activity, then all View elements that support these text style properties will also apply these properties. Any View that does not support these properties will ignore them. If a View supports only partial attributes, only those properties will be applied.

Apply a style to a view

The ways to style the views in an XML layout are as follows:

<

TextView    style="@style/CodeFont"    android:text="@string/hello" />现在该 TextView 将按照名为 CodeFont 的样式的定义设置样式（请参阅上文定义样式中的示例）。

Note: The Style property does not use the Android: namespace prefix.

Apply theme to Activity or app
To set a theme for all Activity for your app, open the Androidmanifest.xml file and application the tag with the Android:theme attribute with the style name. For example:

<application android:theme="@style/CustomTheme">如果您只想对应用中的一个 Activity 应用主题，则改为给 <activity> 标记添加 android:theme 属性。

Just as Android offers other built-in resources, there are a number of predefined topics that you can use to avoid writing on your own. For example, you can use the Dialog theme to give your Activity the appearance of a similar dialog box:

<activity android:theme="@android:style/Theme.Dialog">或者，如果您希望背景是透明的，则可使用 Translucent 主题：<activity android:theme="@android:style/Theme.Translucent">

If you prefer a topic, but want to make some adjustments, simply add the theme as the parent of your custom theme. For example, you can modify a traditional bright theme as follows, using your own color:

<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>

(Note that the color here needs to be provided as a separate resource because the Android:windowbackground property only supports references to another resource; unlike Android:colorbackground, it cannot be given a color literal.) ）

Now, use Customtheme instead of Theme.light in Android inventory:

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

Choose a theme based on the platform version
New versions of Android provide more topics for your app, and you might want to use these new themes while running on those platforms, while still being compatible with older versions. You can do this by customizing the theme, which uses resource selection to switch between different parent topics, depending on the platform version.

For example, the custom theme for the following statement is the standard platform default bright theme. It is located in an XML file (usually Res/values/styles.xml) below res/values:

<style name="LightThemeSelector" parent="android:Theme.Light">    ...</style>为了让该主题在应用运行在 Android 3.0（API 级别 11）或更高版本系统上时使用更新的全息主题，您可以在 res/values-v11 下的 XML 文件中加入一个替代主题声明，但将父主题设置为全息主题：<style name="LightThemeSelector" parent="android:Theme.Holo.Light">    ...</style>

Now use the theme as you would any other theme, and your app will automatically switch to a holographic theme when it's running on Android 3.0 or later systems.

R.styleable.theme provides a list of standard properties that you can use in a topic.

For more information about providing alternate resources, such as themes and layouts, based on the platform version or other device configurations, see providing resource documentation.

Working with platform styles and themes

The Android platform offers a huge collection of styles and themes for you to use in your app. You can find references to all available styles in the R.style class. To use the styles listed here, replace all underscores in the style name with a period. For example, you can apply the Theme_notitlebar theme using @android: Style/theme.notitlebar.

However, the R.style reference is not exhaustive and the styles are not fully documented, so viewing the actual source code for these styles and topics gives you a clearer idea of the style attributes provided by each style. See the following source code for more detailed Android style and topic reference:
Android Style (Styles.xml)
Android Theme (Themes.xml)

Android styling (style) and themes (theme)