Styles and Themes in Android (Styles and Themes)

Style, which is a set of properties that specify shapes and formatting for a View or form (window). The properties that a style can specify include height, padding, font color, font size, background color, and so on. A style is defined in an XML resource file that is separate from the XML resource file that sets the layout.

The design philosophy of the Android style is similar to CSS (cascading style sheets) in web design, which is to isolate the design from the content.

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

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

Simplified into:

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

All properties are linked to a style that is detached from the layout file and placed in a CodeFont label definition that is called, and then style applied to the layout using attributes. In the following section, we will learn the style definition of the label.

The theme (theme) is applied to the entire activity or app (application), rather than just a single view (as in the example above). When a style is used as a theme, all view in activity or application will apply each of the style attributes it supports. For example, you can apply CodeFont a style as a subject of activity, and then all the text contained in the activity will be a green monospace font.

First, define the style

In order to create a style set, res/values a new XML file needs to be created in the directory of your project. This XML file can be arbitrarily named, but will be .xml extended and saved in a res/values folder. The root node of this XML file must be <resources> .

For each style you create, you need to add an element with a unique name attribute (this attribute is required) to the <style> file. Then add elements for each style attribute, <item> using the name attribute (which is required) to declare the style attribute, and write the corresponding value in the label. This value can be a string, a hexadecimal color value, a reference to another resource type, or other values that depend on the style attribute. Here is an example of a single style:

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

Each <resources> child element is converted into an application resource object when it is compiled, and <style> is referenced through the attributes of the element name . The style in the example can be called as an @style/CodeFont XML layout (as shown in the introduction above).

　　<style>The attribute of the element parent is optional, which describes the ID of another style (the current style inherits the property from it). If you want, you can override the parent style's properties.

Keep in mind that the style that defines the theme that is used as activity or application in XML is the same as the style used for the view. As defined above, a style can be applied to either a single view or to the entire activity or application. How to use it, we'll discuss it later.

Ii. Succession (inheritance)

　　<style>The attributes of the element parent require you to indicate which style you want to inherit the property from. You can use it to inherit properties from an existing style, and then define only the properties that you want to change or add. Style can inherit from a style that you create yourself, or you can inherit from the built-in style of the platform. (This is discussed in more detail below) For example, you can inherit the default text appearance from the Android platform (text appearance) and then modify it.

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

If you want to inherit from a custom style, you don't have to use parent attributes. Instead, you can prefix the new style with the name of the parent style, using the English dot number "." Separated. For example, to create a new style that inherits from the style defined above CodeFont , the color changes to red, which you can write like this:

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

One point to note is that <style> there is no attribute in the tag parent , but because the name property CodeFont starts with the style name, the style inherits CodeFont all the properties of the style. The new style overrides the android:textColor property, which makes the text red. You can do @style/CodeFont.Red this by using this new style.

You can inherit multiple times like this by changing the name. For example, you can extend the CodeFont.Red font to make it larger:

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

This way CodeFont , the style and style are inherited CodeFont.Red and attributes are added android:textSize .

Tip: This technique takes effect only in the style that you define. You can not use it in Android built-in styles. Reference the built-in style, for example TextAppearance , you must use parent attributes.

Three, style attributes (style properties)

Now that you know how the style is defined, you also need to learn <item> what style attributes are in the element. You may be familiar with some of the attributes, such as Layout_width and TextColor. However, there are more properties you can use.

The best place to find properties that apply to a particular view is to find the appropriate class reference document (class reference), which lists all the supported XML attributes. For example, all properties that are listed in the TextView XML attributes table can be used as a style definition for the TextView element (or its subclasses). The column is in one of the properties, android:inputType so you can write the attributes locally in the <EditText> element android:inputType , just like this:

<EditText    android:inputType="number"    ... />

Instead, you can EditText create a style for the elements to contain these attributes:

<style name="Numbers">  <item name="android:inputType">number</item>  ...</style>

Your XML layout can then implement this style:

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

This simple example looks redundant, but when you add more style attributes and make it possible to reuse the style in different places, the payoff is huge.

To know all the available style attributes, you can see here r.attr. You have to keep in mind that not all view objects accept the same style property, so you should refer to the style attributes supported by a particular view class. However, when you apply a style to the view, and the view does not support all the style attributes, the view applies only those attributes that are supported and ignores the others that are not supported.

Some style properties do not support any view, but can only be used as theme. These style properties apply to the entire form and not to any type of view. For example, a style property specifically for theme can hide the app title, hide the status bar, or change the background of the form. These style properties do not belong to any of the view objects. In order to find these theme-specific style attributes, you can see the R.attr window properties that begin with the. For example, windowNoTitle and windowBackground is a style property that takes effect only when the style is applied to the activity or application theme. Take a look at the next section to learn how to apply a style to theme.

Tip: Don't forget to <item> prefix each element with android: a namespace. For example:<item name="android:inputType">

Iv. applying styles and themes to the UI

There are two ways to set style:

• For a single view, you can add style attributes to a view element in the XML layout;

• Or, for the entire activity or application, you can add android:theme attributes to or elements from an android manifest file activity application .

  When you apply a style to a single layout View , the attributes defined in the style are applied only to this View . If a style is applied to one ViewGroup , then the children in it View will not inherit these styles--only the elements that you apply the style directly to will apply the attributes in the style. However, you can use the same style for all elements by using the style as a theme View .

In order to apply a style definition as a theme, you must Activity use that style for or in the Android manifest file application . each view in the activity or application will then be applied to each of the style attributes that they support. For example, after you apply the above mentioned CodeFont style to one Activity , all elements that support the Text style feature will be View applied. Anything that does not support this feature will View ignore them. If there is a View feature that only supports the part, then it will only apply that part of the feature.

Apply a style to the view

Here's an example of how to set a style for a view in an XML layout:

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

Now, this TextView applies a CodeFont style called (see the example above).

Tip: The style attribute does not need to be prefixed with a android: namespace.

Apply a theme to activity or application

To set a theme for all the activity in your app, you need to open the AndroidManifest.xml file, edit the <application> tag, write the android:theme attribute, and use the style name as its value. For example:

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

If you want to set a theme for only one activity in your app, you just need to change the label above <activity> .

Just as Android offers other built-in resources, in order to reduce the hassle of developers, it also provides the need for predefined topics for you to use. For example, you can use Dialog themes to make your activity look like a dialog box:

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

Or if you want to make the background transparent, you can use translucent theme:

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

If you like a whole, but want to tweak it, you just have to use it as a parent topic for your custom theme ( parent ). For example, you can modify the default light theme to use your own style:

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

(Hint: The color here needs to mention a separate resource.) Because the Android:windowbackground property only supports references to another resource, unlike Android:colorbackground, it cannot be set by a hexadecimal color value)

Now use Customtheme instead of Theme.light on Android manifest

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

Select a platform-based version of the theme

The new version of Android has additional themes that can be used in your app for compatibility with older versions. You can use the resource selector to switch from a different parent topic to a custom theme for compatibility purposes based on the current version.
For example, here is a custom declaration for the default light theme of the standard platform, written in res/values an XML file under the folder (typically res/values/styles.xml )

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

In order for the application to run on Android 3.0 (API level 11) or later to use the new holographic theme, you can place an XML file on the topic Alternative declaration res/values-v11 , the parent topic to be changed to a holographic theme:

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

Now use this theme just like any of your other, if running your application on Android3.0 or later will automatically switch to holographic theme.
There is a standard property sheet that shows the properties that you can use in the theme, which you can find in R.styleable.theme.
For more information on providing alternative resources, such as themes and layouts based on platform version or other device configuration, refer to the providing resources documentation.

V. Using platform styles and themes

The Android platform provides a large set of styles and themes that you can use in your app. You can find a reference to all the available styles in the R.style class. To use a style from the list, replace all underscores in the style name with a period (? ）。 For example, you can "@android:style/Theme.NoTitleBar" apply a Theme.NoTitleBar theme.
　　
However, the R.style reference is not fully documented, it does not completely describe these styles, so looking at the source code of these styles and themes will give you a better view of the style features they provide. The following can be seen:
　　
-Android Styles (Styles.xml)
-Android Themes (Themes.xml)

These files will help you learn through examples. For example, in the Android themes source code, you will find a <style name="Theme.Dialog"> declaration. In this definition, you will see all the dialogs used to style the calls from the Android framework.

More about styles and topics of grammar, common sytle Resource.
For a reference to style attributes that can be used to define styles and themes (for example, "Windowsbackground" or "textappearance"), see R.attr or the view class for which you want to create a style.

Styles and Themes in Android (Styles and Themes)