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

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

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

Who knows CSS?

• CSS allows the separation of design from content.

• Promotes reusability

• Easier to maintain

Does Android support CSS?

• No

• However, android provides a similar philosophy with styles and themes.

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.

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

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

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>

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 nameattribute that uniquely identifies the style. The name attribute is required.

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.

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>

The name attribute specifies which property of the view you want to style. Any XML property supported by the View/ViewGroup is supported.

2

2A

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>

The value for the <item> specifies what value the property should have. The valuefor the item can be a keyword string, hex color, reference to another resource type,or other value depending on the style property.

2

2B

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"

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 parent attribute to inherit from styles defined by the Android Platform. The parent attribute 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.

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.

4. Inheriting from your styles

<style name="loginTheme.Warning"> <item name="android:textColor">#FF0000</item></style>

4A

1. 4A is the style you’re inheriting.2. 4B is the name of the new style you are creating.

4B

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.

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

Style Documentation

• Android Style and Theme Documentation

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.

Shape Drawables

• A declaratively defined and dynamically rendered graphical element

• Can used in any place where drawables are allowed, for instance for view backgrounds.

Types of Shapes

• Rectangles

• Ovals

• Line

• Ring

Shape Styles

• Fill

• Stroke

• Gradient

Shape Drawable Example

Shape Drawable Links

• Android Shape Drawable Documentation

• XML Drawables 3 Part Tutorial