2. Not new, but undiscovered
2 of 28
Who is who
Pavel Petřek
Developer, speaker,
smartphones enthusiast
Inmite co-founder
Inmite
Smartphone developers (Android: Corkbin, OnTheRoad,
Lokola, SMS ticket, DMS and more)
Smart-web-apps based on Google APIs
3. Not new, but undiscovered
3 of 28
Agenda
Styles and themes
Life without PNGs
Q&A
5. Not new, but undiscovered
5 of 28
Let's start with Definitions
Style
A collection of properties that specify the look and format for a
View or window
Theme
A style applied to an entire Activity or application, rather than
an individual View
6. Not new, but undiscovered
6 of 28
Inline vs. Style vs. Theme
Stage 0: inline
Stage 1: style
Stage 2: theme
<TextView
android:id="@+id/row_validity_tv"
android:layout_width="wrap_content"
android:layout_height="?android:attr/listPreferredItemHeight"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold"
android:gravity="center_vertical"
android:layout_marginLeft="3dip"
android:text="@string/l_invalid"
android:textColor="@color/orange" />
<TextView
android:id="@+id/row_valid_to_hint_tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/l_valid_to_long"
android:layout_gravity="center_vertical"
android:gravity="right"
android:layout_weight="1" /> layout.xml
9. Not new, but undiscovered
9 of 28
Key benefits
Saves your time
Makes the code DRY (Do not Repeat Yourself)
→Separates the Look from UI structure is replacable
10. Not new, but undiscovered
10 of 28
Real world example (Corkbin)
Only one ImageView (and it's even shared)
4 widgets + window defined in theme
Benefit:
100 View definitions automatically styled
15 windows automatically styled
11. Not new, but undiscovered
11 of 28
Styles and inheritance
Explicit vs. Implicit (by name)
Plus
Saves a lot of copy-paste even for styling
Preserves much of the original
Minus
Various vendors provides various built-in resources
<style name="TextView" parent="@android:style/Widget.TextView">
<item name="android:textAppearance">@style/TextAppearance.Small</item>
</style>
<style name="TextView.shadow">
<item name="android:shadowColor">@color/black</item>
<item name="android:shadowDy">-1.0</item>
<item name="android:shadowRadius">1.0</item>
</style>
styles.xml
12. Not new, but undiscovered
12 of 28
When styles cannot help
Multiple inheritance
<style name="MyTextView" parent="@style/SomeTextView.Small" parent="@style/SomeTextView.Bold">
<item name="android:someOption">myOptionValue</item>
</style>
13. Not new, but undiscovered
13 of 28
When styles cannot help
Multiple inheritance
AlertDialog / ProgressDialog
loginDialog = new ProgressDialog(this);
loginDialog.setMessage(getString(R.string.l_logging));
loginDialog.setCancelable(false);
loginDialog.setIndeterminate(true);
loginDialog.setProgressStyle(R.style.my_color_progress);
loginDialog.setLabelStyle(R.style.my_progress_text_appearance);
14. Not new, but undiscovered
14 of 28
When styles cannot help
Multiple inheritance
AlertDialog / ProgressDialog
Dialog from Builder
AlertDialog f = new AlertDialog.Builder(this, R.drawable.my_supadupa_theme)
.setTitle(getText(R.string.l_error))
.setMessage(getText(R.string.msg_login_failed))
.setCancelable(true)
.setIcon(android.R.drawable.ic_dialog_alert)
.setPositiveButton(getText(R.string.l_ok), new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
})
.create();
15. Not new, but undiscovered
15 of 28
Agenda
Styles and themes
Life without PNGs
Q&A
16. Not new, but undiscovered
16 of 28
Where we use PNGs in app UI
app icons
action icons
window backgrounds
View component backgrounds (Button, EditText, ...)
17. Not new, but undiscovered
17 of 28
Where we use PNGs in app UI
app icons
action icons
window backgrounds
View component backgrounds (Button, EditText, …)
→Typical activity: 2 layouts x 3 DPIs a lot of PNGs
18. Not new, but undiscovered
18 of 28
Where we use PNGs in app UI
app icons
action icons
window backgrounds
View component backgrounds (Button, EditText, …)
→Typical activity: 2 layouts x 3 DPIs a lot of PNGs
19. Not new, but undiscovered
19 of 28
Shapes on the stage
Replace PNG with shape
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#88ffffff"
android:width="1px" />
<gradient android:startColor="#77111188"
android:centerColor="#88111155"
android:endColor="#99000000"
android:angle="-90" />
<corners android:radius="10dip" />
</shape>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#88000000"
android:width="1px" />
<solid android:color="#77555555" />
</shape>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#ff9999ee"
android:centerColor="#ffddddee"
android:endColor="#ffffffff"
android:angle="-90" />
</shape>
20. Not new, but undiscovered
20 of 28
What shapes do we have?
Rectange
Oval
Line
Ring
21. Not new, but undiscovered
21 of 28
9-patch vs. Shape
9-patch:
Round corners
Gradients
General stretchable areas
Built-in padding areas
Can explicitly use dither
Better support by SDK
Shape
Round corners
Gradients
Memory efficient
CPU efficient
22. Not new, but undiscovered
22 of 28
Real world example
c:geo – Geo-caching tool (by carnero_cc)
23. Not new, but undiscovered
23 of 28
Real world example
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#66000000" android:width="1px" />
<solid android:color="#11000000" />
</shape>
Skin purely based on Shapes
Two skins – light & dark
All DPIs covered
Plenty of time saved
my_drawable.xml
24. Not new, but undiscovered
24 of 28
Key messages
Styles
save your time and get you more flexibility
Themes
save more of your time and get you even more flexibility
Shapes (if smartly used)
saves your time and your phone's battery
25. Not new, but undiscovered
25 of 28
Agenda
Styles and themes
Life without PNGs
Q&A
