Your SlideShare is downloading. ×
Google Developer Day 2010 - Prague - Styles in Android
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Google Developer Day 2010 - Prague - Styles in Android

3,354
views

Published on

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,354
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Android: Styles What's not New, but is Undiscovered for many Praha, Nov 16th 2010 Pavel Petřek CTO
  • 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
  • 4. Not new, but undiscovered 4 of 28
  • 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
  • 7. Not new, but undiscovered 7 of 28 Inline vs. Style vs. Theme Stage 0: inline Stage 1: style Stage 2: theme <EditText android:id="@+id/login_email_et" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0" android:hint="E-mail" android:inputType="textEmailAddress" android:textAppearance="@style/TextAppearance.Medium.Inverse" /> <EditText android:id="@+id/login_password_et" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0" android:hint="Password" android:inputType="textPassword" android:textAppearance="@style/TextAppearance.Medium.Inverse" android:imeOptions="actionGo" /> <style name="TextAppearance"> <item name="android:typeface">serif</item> <item name="android:textSize">16.0sp</item> <item name="android:textStyle">normal</item> <item name="android:textColor">@color/black</item> <item name="android:textColorHighlight">#ffff9200</item> <item name="android:textColorHint">@color/gray</item> <item name="android:textColorLink">#ff5c5cff</item> </style> <style name="TextAppearance.Medium"> <item name="android:textSize">14.0sp</item> </style> <style name="TextAppearance.Medium.Inverse"> <item name="android:textColor">@color/white</item> <item name="android:textColorHint">@color/gray</item> </style> styles.xml layout.xml
  • 8. Not new, but undiscovered 8 of 28 Inline vs. Style vs. Theme Stage 0: inline Stage 1: style Stage 2: theme <Button android:id="@+id/login_forget_bt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.5" android:text="@string/l_forget_password" /> <Button android:id="@+id/login_login_bt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/l_login" /> <style name="Button" parent="@android:style/Widget.Button"> <item name="android:background">@drawable/button</item> <item name="android:textAppearance">@style/TextAppearance.Small</item> <item name="android:padding">15dip</item> <item name="android:textColor">@color/button_text_color</item> </style> <style name="MyTheme" parent="@android:style/Theme.NoTitleBar"> <item name="android:buttonStyle">@style/Button</item> </style> layout.xml themes.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
  • 26. Not new, but undiscovered 26 of 28 Q & A
  • 27. Not new, but undiscovered 27 of 28 References http://developer.android.com/guide/topics/ui/themes.html http://developer.android.com/guide/topics/resources/drawab le-resource.html#Shape https://github.com/carnero/c-geo/tree/master/res/ http://groups.google.com/ http://www.google.com/ http://www.stackoverflow.com/
  • 28. Not new, but undiscovered 28 of 28 Thanks for your attention Pavel Petřek pavel@inmite.eu http://www.inmite.eu/ http://twitter.com/pavelpetrek