Android - Styles and Themes

<blockquote > <p >A<b >style</b>resource defines the format and look for a UI. A style can be applied to an individual View (from within a layout file) or to an entire Activity or application (from within the manifest file).</p> </blockquote> <h2 >Defining Styles</h2> <p >A style is defined in an XML resource that is separate from the XML that specifies the layout. This XML file resides under<b >res/values/</b>directory of your project and will have<b >&lt;resources&gt;</b>as the root node which is mandatory for the style file. The name of the XML file is arbitrary, but it must use the .xml extension.</p> <p >You can define multiple styles per file using<b >&lt;style&gt;</b>tag but each style will have its name that uniquely identifies the style. Android style attributes are set using<b >&lt;item&gt;</b>tag as shown below &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="pun" >&lt;?</span><span class="pln" >xml version</span><span class="pun" >=</span><span class="str" >&quot;1.0&quot;</span><span class="pln" > encoding</span><span class="pun" >=</span><span class="str" >&quot;utf-8&quot;</span><span class="pun" >?&gt;</span><span class="pln" > </span><span class="tag" >&lt;resources&gt;</span><span class="pln" > </span><span class="tag" >&lt;style</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;CustomFontStyle&quot;</span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:layout_width&quot;</span><span class="tag" >&gt;</span><span class="pln" >fill_parent</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:layout_height&quot;</span><span class="tag" >&gt;</span><span class="pln" >wrap_content</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:capitalize&quot;</span><span class="tag" >&gt;</span><span class="pln" >characters</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:typeface&quot;</span><span class="tag" >&gt;</span><span class="pln" >monospace</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:textSize&quot;</span><span class="tag" >&gt;</span><span class="pln" >12pt</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:textColor&quot;</span><span class="tag" >&gt;</span><span class="pln" >#00FF00</span><span class="tag" >&lt;/item&gt;</span><span class="pln" >/&gt; </span><span class="tag" >&lt;/style&gt;</span><span class="pln" > </span><span class="tag" >&lt;/resources&gt;</span></pre> <blockquote >The value for the &lt;item&gt; can be a keyword string, a hex color, a reference to another resource type, or other value depending on the style property.</blockquote> <h2 >Using Styles</h2> <p >Once your style is defined, you can use it in your XML Layout file using<b >style</b>attribute as follows &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="pun" >&lt;?</span><span class="pln" >xml version</span><span class="pun" >=</span><span class="str" >&quot;1.0&quot;</span><span class="pln" > encoding</span><span class="pun" >=</span><span class="str" >&quot;utf-8&quot;</span><span class="pun" >?&gt;</span><span class="pln" > </span><span class="tag" >&lt;LinearLayout</span><span class="pln" > </span><span class="atn" >xmlns:android</span><span class="pun" >=</span><span class="atv" >&quot;http://schemas.android.com/apk/res/android&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;fill_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;fill_parent&quot;</span><span class="pln" > </span><span class="atn" >android:orientation</span><span class="pun" >=</span><span class="atv" >&quot;vertical&quot;</span><span class="pln" > </span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;TextView</span><span class="pln" > </span><span class="atn" >android:id</span><span class="pun" >=</span><span class="atv" >&quot;@+id/text_id&quot;</span><span class="pln" > </span><span class="atn" >style</span><span class="pun" >=</span><span class="atv" >&quot;</span><span class="lit" >@style</span><span class="pun" >/</span><span class="typ" >CustomFontStyle</span><span class="atv" >&quot;</span><span class="pln" > </span><span class="atn" >android:text</span><span class="pun" >=</span><span class="atv" >&quot;@string/hello_world&quot;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/LinearLayout&gt;</span></pre> <p >To understand the concept related to Android Style, you can check<a href="http://www.tutorialspoint.com/android/android_style_demo_example.htm" >Style Demo Example</a>.</p> <h2 >Style Inheritance</h2> <p >Android supports style Inheritance in very much similar way as cascading style sheet in web design. You can use this to inherit properties from an existing style and then define only the properties that you want to change or add.</p> <p >To implement a custom theme create or edit MyAndroidApp/res/values/themes.xml and add the following &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;resources&gt;</span><span class="pln" > ... </span><span class="tag" >&lt;style</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;MyCustomTheme&quot;</span><span class="pln" > </span><span class="atn" >parent</span><span class="pun" >=</span><span class="atv" >&quot;android:style/Theme&quot;</span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:textColorPrimary&quot;</span><span class="tag" >&gt;</span><span class="pln" >#ffff0000</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;/style&gt;</span><span class="pln" > ... </span><span class="tag" >&lt;/resources&gt;</span></pre> <p >In your AndroidManifest.xml apply the theme to the activities you want to style &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;activity</span><span class="pln" > </span><span class="atn" >android:name</span><span class="pun" >=</span><span class="atv" >&quot;com.myapp.MyActivity&quot;</span><span class="pln" > ... </span><span class="atn" >android:theme</span><span class="pun" >=</span><span class="atv" >&quot;@style/MyCustomTheme&quot;</span><span class="pln" > </span><span class="tag" >/&gt;</span></pre> <p >Your new theme will be applied to your activity, and text is now bright red.</p> <p><img alt="Theme" src="http://www.tutorialspoint.com/android/images/them1.jpg" /></p> <h2 >Applying Colors to Theme Attributes</h2> <p >Your color resource can then be applied to some theme attributes, such as the window background and the primary text color, by adding<item >elements to your custom theme. These attributes are defined in your styles.xml file. For example, to apply the custom color to the window background, add the following two<item >elements to your custom theme, defined in MyAndroidApp/res/values/styles.xml file &minus;</item></item></p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;resources&gt;</span><span class="pln" > ... </span><span class="tag" >&lt;style</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;MyCustomTheme&quot;</span><span class="pln" > ...</span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:windowBackground&quot;</span><span class="tag" >&gt;</span><span class="pln" >@color/my_custom_color</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:colorBackgroundCacheHint&quot;</span><span class="tag" >&gt;</span><span class="pln" >@color/my_custom_color</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;/style&gt;</span><span class="pln" > ... </span><span class="tag" >&lt;/resources&gt;</span></pre> <p><img alt="Theme" src="http://www.tutorialspoint.com/android/images/them2.jpg" /></p> <h2 >Using a Custom Nine-Patch With Buttons</h2> <p >A nine-patch drawable is a special kind of image which can be scaled in width and height while maintaining its visual integrity. Nine-patches are the most common way to specify the appearance of Android buttons, though any drawable type can be used.</p> <p><img alt="Nine Patch Button" src="http://www.tutorialspoint.com/android/images/them3.jpg" /></p> <h4 align="center" >A SAMPLE OF NINE-PATCH BUTTON</h4> <h3 >Steps to create Nine-Patch Buttons</h3> <ul class="list" > <li >Save this bitmap as /res/drawable/my_nine_patch.9.png</li> <li >Define a new style</li> <li >Apply the new button style to the buttonStyle attribute of your custom theme</li> </ul> <h4 >DEFINE A NEW STYLE</h4> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;resources&gt;</span><span class="pln" > ... </span><span class="tag" >&lt;style</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;MyCustomButton&quot;</span><span class="pln" > </span><span class="atn" >parent</span><span class="pun" >=</span><span class="atv" >&quot;android:Widget.Button&quot;</span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;android:background&quot;</span><span class="tag" >&gt;</span><span class="pln" >@drawable/my_nine_patch</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;/style&gt;</span><span class="pln" > ... </span><span class="tag" >&lt;/resources&gt;</span></pre> <h4 >APPLY THE THEME</h4> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;resources&gt;</span><span class="pln" > ... </span><span class="tag" >&lt;style</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;MyCustomTheme&quot;</span><span class="pln" > </span><span class="atn" >parent</span><span class="pun" >=</span><span class="atv" >...</span><span class="tag" >&gt;</span><span class="pln" > </span><span class="pun" >...</span><span class="pln" > </span><span class="pun" >&lt;</span><span class="pln" >item name</span><span class="pun" >=</span><span class="str" >&quot;android:buttonStyle&quot;</span><span class="pun" >&gt;</span><span class="lit" >@style</span><span class="pun" >/</span><span class="typ" >MyCustomButton</span><span class="pun" >&lt;/</span><span class="pln" >item</span><span class="pun" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;/style&gt;</span><span class="pln" > ... </span><span class="tag" >&lt;/resources&gt;</span></pre> <p><img alt="Theme" src="http://www.tutorialspoint.com/android/images/them4.jpg" /></p> <h2 >Android Themes</h2> <p >Hope you understood the concept of Style, so now let&#39;s try to understand what is a<b >Theme</b>. A theme is nothing but an Android style applied to an entire Activity or application, rather than an individual View.</p> <p >Thus, when a style is applied as a theme, every<b >View</b>in the Activity or application will apply each style property that it supports. For example, you can apply the same<b >CustomFontStyle</b>style as a theme for an Activity and then all text inside that<b >Activity</b>will have green monospace font.</p> <p >To set a theme for all the activities of your application, open the<b >AndroidManifest.xml</b>file and edit the<b >&lt;application&gt;</b>tag to include the<b >android:theme</b>attribute with the style name. For example &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;application</span><span class="pln" > </span><span class="atn" >android:theme</span><span class="pun" >=</span><span class="atv" >&quot;@style/CustomFontStyle&quot;</span><span class="tag" >&gt;</span></pre> <p >But if you want a theme applied to just one Activity in your application, then add the android:theme attribute to the &lt;activity&gt; tag only. For example &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;activity</span><span class="pln" > </span><span class="atn" >android:theme</span><span class="pun" >=</span><span class="atv" >&quot;@style/CustomFontStyle&quot;</span><span class="tag" >&gt;</span></pre> <p >There are number of default themes defined by Android which you can use directly or inherit them using<b >parent</b>attribute as follows &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;style</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;CustomTheme&quot;</span><span class="pln" > </span><span class="atn" >parent</span><span class="pun" >=</span><span class="atv" >&quot;android:Theme.Light&quot;</span><span class="tag" >&gt;</span><span class="pln" > </span><span class="pun" >...</span><span class="pln" > </span><span class="tag" >&lt;/style&gt;</span></pre> <p >To understand the concept related to Android Theme, you can check<a href="http://www.tutorialspoint.com/android/android_theme_demo_example.htm" >Theme Demo Example</a>.</p> <h2 >Styling the colour palette</h2> <p >The layout design can implementable based on them based colours, for example as following design is designed based on them colour(blue)</p> <p><img alt="Theme" src="http://www.tutorialspoint.com/android/images/them5.jpg" /></p> <p >Above layout has designed based on style.xml file,Which has placed at<b >res/values/</b></p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;resource&gt;</span><span class="pln" > </span><span class="tag" >&lt;style</span><span class="pln" > </span><span class="atn" >name</span><span class="pun" >=</span><span class="atv" >&quot;AppTheme&quot;</span><span class="pln" > </span><span class="atn" >parent</span><span class="pun" >=</span><span class="atv" >&quot;android:Theme.Material&quot;</span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pln" > </span><span class="pun" >=</span><span class="atv" >&quot;android:color/primary&quot;</span><span class="tag" >&gt;</span><span class="pln" >@color/primary</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pln" > </span><span class="pun" >=</span><span class="atv" >&quot;android:color/primaryDark&quot;</span><span class="tag" >&gt;</span><span class="pln" >@color/primary_dark</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;item</span><span class="pln" > </span><span class="atn" >name</span><span class="pln" > </span><span class="pun" >=</span><span class="atv" >&quot;android:colorAccent/primary&quot;</span><span class="tag" >&gt;</span><span class="pln" >@color/accent</span><span class="tag" >&lt;/item&gt;</span><span class="pln" > </span><span class="tag" >&lt;/style&gt;</span><span class="pln" > </span><span class="tag" >&lt;resource&gt;</span><span class="pln" > </span></pre> <h2 >Default Styles &amp; Themes</h2> <p >The Android platform provides a large collection of styles and themes that you can use in your applications. You can find a reference of all available styles in the<b >R.style</b>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 with &quot;@android:style/Theme.NoTitleBar&quot;. You can see the following source code for Android styles and themes &minus;</p> <ul class="list" > <li > <p ><a href="https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/styles.xml" rel="nofollow" target="_blank">Android Styles (styles.xml)</a></p> </li> <li > <p ><a href="https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/themes.xml" rel="nofollow" target="_blank">Android Themes (themes.xml)</a></p> </li> </ul>
RangeTime:0.007222s
RangeMem:223.55 KB
返回顶部 留言