themes.jd revision 076357b8567458d4b6dfdcf839ef751634cd2bfb
1page.title=Applying Styles and Themes 2parent.title=User Interface 3parent.link=index.html 4@jd:body 5 6<div id="qv-wrapper"> 7<div id="qv"> 8 <h2>In this document</h2> 9 <ol> 10 <li><a href="#styles">Styles</a></li> 11 <li><a href="#themes">Themes</a> 12 <ol> 13 <li><a href="#inTheManifest">Set the theme in the manifest</a></li> 14 <li><a href="#fromTheApp">Set the theme from the application</a></li> 15 </ol> 16 </li> 17 </ol> 18 <h2>See also</h2> 19 <ol> 20 <li><a href="{@docRoot}guide/topics/resources/available-resources.html#stylesandthemes">Style and Theme Resources</a></li> 21 </ol> 22</div> 23</div> 24 25<p>When designing your application, you can use <em>styles</em> and <em>themes</em> to apply uniform formatting to its various screens and UI elements. 26 27<ul> 28 <li>A style is a set of one or more formatting attributes that you can apply as a unit to single elements in your layout XML file(s). For example, you could define a style that specifies a certain text size and color, then apply it to instances of a certain type of View element.</li> 29 <li>A theme is a set of one or more formatting attributes that you can apply as a unit to all activities in an application or just a single activity. For example, you could define a theme that sets specific colors for the window frame and the panel foreground and background, and sets text sizes and colors for menus, then apply it to the activities of your application.</li> 30</ul> 31 32<p>Styles and themes are resources. Android provides some default style and theme resources that you can use, or you can declare your own custom style and theme resources.</p> 33 34<p>To create custom styles and themes:</p> 35<ol> 36 <li>Create a file named <code>styles.xml</code> in the your application's <code>res/values</code> directory. Add a root <code><resources></code> node.</li> 37 <li>For each style or theme, add a <code><style></code> element with a unique <code>name</code> and, optionally, a <code>parent</code> attribute. 38 The name is used for referencing these styles later, and the parent indicates what style resource to inherit from.</li> 39 <li>Inside the <code>style</code> element, declare format values in one or more <code><item></code> element. 40 Each <code>item</code> identifies its style property with a <code>name</code> attribute and defines its style value inside the element.</li> 41 <li>You can then reference the custom resources from other XML resources, your manifest or application code.</li> 42</ol> 43 44 45<h2 id="styles">Styles</h2> 46 47<p>Here's an example declaration of a style: </p> 48 49<pre> 50<?xml version="1.0" encoding="utf-8"?> 51<resources> 52 <style name="SpecialText" parent="@style/Text"> 53 <item name="android:textSize">18sp</item> 54 <item name="android:textColor">#008</item> 55 </style> 56</resources> 57</pre> 58 59<p>As shown, you can use <code><item></code> elements to set specific formatting values for the style. 60The <code>name</code> attribute in the <code>item</code> can refer to a standard string, a hex color value, 61or a reference to any other resource type.</p> 62 63<p>Note the <code>parent</code> attribute in the <code>style</code> element. This attribute lets you specify a resource from which the current style will inherit values. The style can inherit from any type of resource that contains the style(s) you want. In general, your styles should always inherit (directly or indirectly) from a standard Android style resource. This way, you only have to define the values that you want to change.</p> 64 65<p>Here's how you would reference the custom style from an XML layout, in this case, for an EditText element:</p> 66 67<pre> 68<EditText id="@+id/text1" 69 style="@style/SpecialText" 70 android:layout_width="fill_parent" 71 android:layout_height="wrap_content" 72 android:text="Hello, World!" /> 73</pre> 74 75<p>Now this EditText widget will be styled as defined by the <code>style</code> example above.</p> 76 77 78<h2 id="themes">Themes</h2> 79 80<p>Just like styles, themes are also declared in XML <code><style></code> elements, and are referenced in the same manner. 81The difference is that you can add a theme style only to <code><application></code> and <code><activity></code> elements — 82they cannot be applied to individual views in the layout.</p> 83 84<p>Here's an example declaration of a theme:</p> 85 86<pre> 87<?xml version="1.0" encoding="utf-8"?> 88<resources> 89 <style name="CustomTheme"> 90 <item name="android:windowNoTitle">true</item> 91 <item name="windowFrame">@drawable/screen_frame</item> 92 <item name="windowBackground">@drawable/screen_background_white</item> 93 <item name="panelForegroundColor">#FF000000</item> 94 <item name="panelBackgroundColor">#FFFFFFFF</item> 95 <item name="panelTextColor">?panelForegroundColor</item> 96 <item name="panelTextSize">14</item> 97 <item name="menuItemTextColor">?panelTextColor</item> 98 <item name="menuItemTextSize">?panelTextSize</item> 99 </style> 100</resources> 101</pre> 102 103<p>Notice the use of the at-symbol (@) and the question-mark (?) to reference resources. 104The at-symbol indicates that we're referencing a resource previously defined elsewhere (which may be from 105this project or from the Android framework). 106The question-mark indicates that we're referencing a resource value in the currently loaded theme. This 107is done by referring to a specific <code><item></code> by its <code>name</code> value. (E.g., 108<em>panelTextColor</em> uses the same color assigned to <em>panelForegroundColor</em>, defined beforehand.) 109This technique can be used only in XML resources. 110</p> 111 112<h3 id="inTheManifest">Set the theme in the manifest</h3> 113<p>To set this theme for all the activites of your application, open the AndroidManifest.xml file and 114edit the <code><application></code> tag to include the <code>android:theme</code> attribute with the 115theme name:</p> 116 117<pre> 118<application android:theme="@style/CustomTheme"> 119</pre> 120 121<p>If you want the theme applied to just one Activity in your application, then add the theme 122attribute to the <code><activity></code> tag, instead.</p> 123 124<p>Just as Android provides other built-in resources, there are several themes that you swap in 125without having to write one yourself. For example, you can use the Dialog theme to make your Activity 126appear like a dialog box. In the manifest, reference an Android theme like so:</p> 127 128<pre> 129<activity android:theme="@android:style/Theme.Dialog"> 130</pre> 131 132<p>If you like a theme, but want to slightly tweak it, just add the theme as the <code>parent</code> of your custom theme. 133For example, we'll modify the <code>Theme.Dialog</code> theme. First, we need to import the parent of the 134<code>Dialog</code> theme: <code>Theme</code>. At the top of the <code>resources</code>, add:</p> 135<pre> 136<style name="Theme" parent="@android:Theme"> 137 <!-- no modification --> 138</style> 139</pre> 140<p>Now create a a new theme with <code>Theme.Dialog</code> as the parent:</p> 141<pre> 142<style name="CustomDialogTheme" parent="@android:style/Theme.Dialog"> 143</pre> 144<p>There it is. We've inherited the Dialog theme, so we can adjust its styles as we like. 145So, for each item in the Dialog theme that we want to override, we re-define the value under this style and 146then use <var>CustomDialogTheme</var> instead of the <var>Theme.Dialog</var>.</p> 147 148<h3 id="fromTheApp">Set the theme from the application</h3> 149<p>You can also load a theme for an Activity programmatically, if needed. 150To do so, use the {@link android.app.Activity#setTheme(int) setTheme()} 151method. Note that, when doing so, you must be sure to set the theme <em>before</em> 152instantiating any Views in the context, for example, before calling 153setContentView(View) or inflate(int, ViewGroup). This ensures that 154the system applies the same theme for all of your UI screens. Here's an example:</p> 155 156<pre> 157 protected void onCreate(Bundle icicle) { 158 super.onCreate(icicle); 159 ... 160 setTheme(android.R.style.Theme_Light); 161 setContentView(R.layout.linear_layout_3); 162} 163</pre> 164 165<p>If you are considering loading a theme programmatically for the main 166screen of your application, note that the theme would not be applied 167in any animations the system would use to show the activity, which 168would take place before your application starts. In most cases, if 169you want to apply a theme to your main screen, doing so in XML 170 is a better approach. </p> 171 172<p>For detailed information about custom styles and themes and referencing them from your application, see 173<a href="{@docRoot}guide/topics/resources/available-resources.html#stylesandthemes">Style 174and Theme Resources</a>.</p> 175 176<p>For information about default themes and styles available, see {@link android.R.style}.</p> 177 178 179 180 181 182 183