1 / 27

Styles and Themes

Styles and Themes. Tell me about this XML snippet. < TextView android:id = "@+id/name" android:layout_width = "0dp" android:layout_height = " wrap_content " android:layout_weight = ".5" android:paddingLeft = "5dp" android:background = "#AAFF0000"

noe
Télécharger la présentation

Styles and Themes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Styles and Themes

  2. Tell me about this XML snippet <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />

  3. Notice any problems? <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />

  4. What if I want to change the bg color? <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />

  5. Who knows CSS? • CSS allows the separation of design from content. • Promotes reusability • Easier to maintain

  6. Does Android support CSS? • No • However, android provides a similar philosophy with styles and themes.

  7. Android Styles • A style is a collection of properties that specify look and format for a View. • Styles can specify width, height, font color, font size, background color, etc. • Styles are defined in a separate XML resource to separate layout from style.

  8. What a difference style can make <TextView android:id="@+id/name" style="@style/loginTextTheme" /> <TextView android:id="@+id/serial" style="@style/loginTextTheme" />

  9. O Style Where Art Thou • Place your styles in a new xml file in your res/values directory • Typically the file is called styles.xml

  10. Defining Styles <style name="loginTheme" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">0dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_weight">.5</item> <item name="android:paddingLeft">5dp</item> <item name="android:background">#AAFF0000</item> <item name="android:drawableLeft">@drawable/seven_up</item> </style>

  11. 1. Add a <style> element <style name="loginTheme" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">0dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_weight">.5</item> <item name="android:paddingLeft">5dp</item> <item name="android:background">#AAFF0000</item> <item name="android:drawableLeft">@drawable/seven_up</item> </style> 1 For each style you want to create, add a <style> element with a name attribute that uniquely identifies the style. The name attribute is required.

  12. 2. Specify style properties <style name="loginTheme" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">0dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_weight">.5</item> <item name="android:paddingLeft">5dp</item> <item name="android:background">#AAFF0000</item> <item name="android:drawableLeft">@drawable/seven_up</item> </style> 2 Define each style property using a <item> element.

  13. 2A. Specify property name <style name="loginTheme" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">0dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_weight">.5</item> <item name="android:paddingLeft">5dp</item> <item name="android:background">#AAFF0000</item> <item name="android:drawableLeft">@drawable/seven_up</item> </style> 2 2A The name attribute specifies which property of the view you want to style. Any XML property supported by the View/ViewGroup is supported.

  14. 2B. Specify property value <style name="loginTheme" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">0dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_weight">.5</item> <item name="android:paddingLeft">5dp</item> <item name="android:background">#AAFF0000</item> <item name="android:drawableLeft">@drawable/seven_up</item> </style> 2 2B The value for the <item> specifies what value the property should have. The value for the item can be a keyword string, hex color, reference to another resource type, or other value depending on the style property.

  15. Accessing the Style • The style can be referenced in XML layout resources by specifying a style attribute with a value equal to the desired style name. style="@style/loginTextTheme"

  16. 3. Inheriting Platform Styles <style name="loginTheme" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">0dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_weight">.5</item> <item name="android:paddingLeft">5dp</item> <item name="android:background">#AAFF0000</item> <item name="android:drawableLeft">@drawable/seven_up</item> </style> 3 Use the parentattribute to inherit from styles defined by the Android Platform. The parentattribute is optional. Unfortunately, Platform styles aren’t well documented so you’ll have to dig around in source code to really understand what they look like. See here for details.

  17. 4. Inheriting from your own styles <style name="loginTheme.Warning"> <item name="android:textColor">#FF0000</item> </style> 4 Prefix the new style name with the style name you would like to inherit from separated by a period. This example inherits everything defined in the loginTheme and simply adds a text color property of red.

  18. 4. Inheriting from your styles <style name="loginTheme.Warning"> <item name="android:textColor">#FF0000</item> </style> 4A 4B 4A is the style you’re inheriting. 4B is the name of the new style you are creating.

  19. 4. Inheriting from your styles <style name="loginTheme.Warning"> <item name="android:textColor">#FF0000</item> </style> All attributes that are redefined in your style will overwrite any attributes of the same name that were defined in the parent style.

  20. Inapplicable Styles • If you define attributes in a style and then apply the style to a view that doesn’t have these attributes, the style will silently fail but you won’t see an error. • It’s up to the developer to design and apply styles in a meaningful way

  21. Style Documentation • Android Style and Theme Documentation

  22. Themes • Themes are styles that are applied to an entire application or activity. • If you know how to do styles then Themes are easy. • See documentation here.

  23. Shape Drawables • A declaratively defined and dynamically rendered graphical element • Can used in any place where drawables are allowed, for instance for view backgrounds.

  24. Types of Shapes • Rectangles • Ovals • Line • Ring

  25. Shape Styles • Fill • Stroke • Gradient

  26. Shape Drawable Example

  27. Shape Drawable Links • Android Shape Drawable Documentation • XML Drawables 3 Part Tutorial

More Related