Coding with Style -- and Theme
by Georgi Markov
neofonie mobile GmbH
talk a bit about myself (15 sec. max)
maybe throw in a joke to catch people's attention
Thank you for your time!
Don't hesitate to contact me.
Even if you have questions.
This presentation is licensed under Creative Commons Attribution 3.0 and can be found at:
georgi@neofonie.de
1.
What are styles?
2.
What are themes?
3.
When to use them?
Agenda
is a collection of attributes
is applied to view(s) as a unit
can inherit from another style
can be used in layout XMLs
is defined in res/values
A style...
<LinearLayout>

  <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textColor="#c33"
            android:textStyle="bold|italic"
            android:text="@string/warning" />

  <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textColor="#333"
            android:text="@string/description" />

</LinearLayout>
<LinearLayout>

  <TextView style="@style/SpecialText"
            android:text="@string/warning"  />

  <TextView style="@style/DefaultText"
            android:text="@string/description" />

</LinearLayout>
<resources>
  <style name="DefaultText">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">#333</item>
  </style>

  <style name="SpecialText" parent="DefaultText">
    <item name="android:textColor">#c33</item>
    <item name="android:textStyle">bold|italic</item>
  </style>
</resources>
is a collection of attributes
is applied to activities
can inherit from another theme
can be used in manifest XML
is defined in res/values
A theme...
<manifest ...>
  <application android:icon="@drawable/icon"
                       android:label="@string/app_name"
                       android:theme="@style/Theme">
    <activity ...>
      ...
    </activity>
  </application>
</manifest> 
<resources>
  <style name="Widget.ListView" parent="android:Widget.ListView">
    <item name="android:listSelector">@drawable/list_selector_background</item>
    <item name="android:scrollbars">none</item>
  </style>

  <style name="WindowTitleBackground">
    <item name="android:background">@drawable/title_bar</item>
  </style>

  <style name="WindowTitle">
    <item name="android:singleLine">true</item>
    <item name="android:textAppearance">@style/WindowTitleText</item>
    <item name="android:shadowColor">#B000</item>
    <item name="android:shadowRadius">3</item>
  </style>

  <style name="WindowTitleText">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">#fff</item>
    <item name="android:textStyle">bold</item>
  </style>
</resources>
<resources>
  <style name="Theme" parent="android:Theme.Light">
    <item name="android:windowTitleStyle">@style/WindowTitle</item>
    <item name="android:windowTitleSize">30dp</item>
    <item name="android:windowTitleBackgroundStyle">
                          @style/WindowTitleBackground</item>
    <item name="android:listViewStyle">@style/Widget.ListView</item>
  </style>
</resources>
centralize view appearance
reduce code base
separate presentation from structure
Use Styles to...
customize the appearance of your activities
provide alternative default styles
further reduce code size
provide alternative "skins" for your app
provide default styles for custom widgets
Use themes to...
4.
Tips & Tricks
Google Maps API key
just put it in your base theme.
You need two Themes loaded
at the same time?
You have 2 Contexts loaded all the time - use them!
http://creativecommons.org/licenses/by/3.0/
You have a full-screen opaque view?
<style name="Theme.NoBackground" parent="android:Theme">
  <item name="android:windowBackground">@null</item>
</style>
<style name="Theme" parent="...">
...
<item name="android:apiKey">@string/api_key_debug</item>
...
prezi: http://tinyurl.com/style-theme-slides
code: http://tinyurl.com/style-theme-zip
apk:   http://tinyurl.com/style-theme-apk
onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  LayoutInflater inflaterDefault = LayoutInflater.from(this);

  getApplication().setTheme(R.style.Theme_Alternative);
  LayoutInflater inflaterAlternative = LayoutInflater.from(getApplicaion());
  ...
}
Add defaults for layout_width and layout_height.
<style name="Theme" parent="android:Theme.Light">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
...
</style>
Want to write even less xml code?
How do they relate?
the layout XML (if any)
the style applied directly to a widget (if any)
the theme applied to the context used when inflating the widget.
The framework will read attributes in this order: