Stylování ActionBaru    Tomáš Kypta      @TomasKypta
ActionBar ●   přidán v Androidu 3.0 (API level 11) ●   další rozšíření v Androidu 4.0 (API level 14) ●   není v support li...
ActionBarSherlock ●   backportuje ActionBar na Android 2.x ●   nahrazuje nativní ActionBar na Android 3.x ●   nyní ve verz...
ActionBar 1. main action bar 2. top action bar 3. bottom action bar
ActionBar
Základ ●   tmavé a světlé téma         –   definují default styly pro všechny UI prvky ●   Theme.Sherlock (Theme.Holo, The...
ActionBar – kde začít●   http://developer.android.com/guide/topics/ui/actionbar.html●   http://jgilfelt.github.com/android...
ActionBar - styly ●   matoucí, co kde má být nastaveno ●   celkové stylování definováno několika     položkami v tématu   ...
ActionBar ●   vypnutí ActionBaru ●   nelze pak zapnout v kódu
ActionBar - overlay
ActionBar - výška ●   portrait - 48dp ●   landscape - 40dp ●   sw600dp - 56dp ●   raději neměnit
Home Layout ●   složen z:         –   icon/logo         –   title & subtitle         –   homeAsUpIndicator ●   nelze vyměnit
Home Layout
Home Layout
Home Layout ●   části lze vypnout
Home Layout
Home Layout – z kódu ●   setDisplayOptions() ●   setDisplayHomeAsUpEnabled() ●   setDisplayShowCustomEnabled() ●   setDisp...
Icon/Logo ●   defaultně se zobrazuje ikona aplikace ●   lze zobrazit jakoukoliv ikonu/obrázek ●   setIcon(), setLogo()
Icon/Logo ●   4dip top & bottom margin         –   nelze změnit ●   designer si toho musí být vědom         –   logo by mě...
Icon/Logo background ●   nelze použít color selector - crash ●   společné pozadí pro homeAsUpIndicator a     ikonu/logo ● ...
homeAsUpIndicator ●   16dip x 16dip ●   lze použít jiný rozměr ●   ideálně jen přebarvit defaultní ikonu ●   šířka ovlivňu...
homeAsUpIndicator ●   šířka ovlivňuje odsazení ikony/loga zleva ●   ikona/logo částečně zprava překrývá     homeAsUpIndica...
homeAsUpIndicator ●   šířka ovlivňuje odsazení ikony/loga zleva ●   ikona/logo částečně zprava překrývá     homeAsUpIndica...
homeAsUpIndicator ●   měl by mít transparent pozadí ●   nedělat stavy s barevným pozadím
Title ●   default hodnota z android:label z manifestu ●   lze měnit v kódu ●   raději nepoužívat android:label=””
Subtitle ●   text se nastavuje v kódu
Menu
Menu●   položky menu umísťované do AB●   atribut android:showAsAction       –   always – položka se přidá vždy do AB      ...
Menu●   může ovlivnit zobrazení titulku●   ikona a homeAsUpIndicator neovlivněny●   overflow ikona ovlivněna
Action button ●   defaultní background je ?attr/actionBarItemBackground ●   ikona má celou výšku AB ●   ikony by měly mít ...
Action button - actionLayout ●   menu resource item může mít vlastní layout ●   background je třeba nastavit v layoutu
Action button - actionViewClass ●   menu resource item může být definován     nějakým widgetem
Action button - collapseActionView●   actionView lze rozbalit – zabere celou šířku    kromě homeAsUpIndicatoru, ikony a ov...
Action overflow button ●   zobrazen, pokud nema telefon HW menu     tlačítko ●   v předchozí verzi ABS existovalo téma    ...
Action overflow button
Action overflow button
Action overflow button ●   defaultní background je ?attr/actionBarItemBackground ●   ideálně pouze přebarvit defaultní ikonu
Action overflow menu ●   pozadí
Action overfow menu ●   item selector ●   pozor – nastaví se pro každý spinner     dropdown ●   nepoužívat color selector ...
Action overflow menu ●   text
ProgressBar●   inditerminateProgress & progress zabudovány v    AB●   requestWindowFeature(Window.FEATURE_INDETERMINATE_  ...
Indeterminate Progress
Progress
Custom view ●   lze i v kódu     setCustomView(R.layout.custom);
Custom view ●   natazeni na cely AB (schova i title)
Stín pod ActionBarem ●   res/values ●   res/values-v14
Split ActionBar ●   defaultně vypnuto ●   nebo v <application> ●   umísťuje se sem menu
Split ActionBar
Split ActionBar ●   expandovaná action views jsou roztažena v     hlavním actionbaru
Taby ●   vytvářeny v kódu ●   setNavigationMode(ActionBar.NAVIGATION_MODE_TABS) ●   můžou obsahovat text, ikonu, custom view
Taby ●   podle dostupného místa vytvořeny v hlavním     action baru nebo stacked action baru ●   pokud není dost místa moh...
Taby
Taby – stacked action bar ●
Taby – TabBar ●   TabBar background
Taby ●   tab background
Taby - text
List navigation ●   created in code ●   setNavigationMode(ActionBar.NAVIGATION_MODE_LIST) ●   taby a list menu nemohou exi...
List navigation
List navigation ●   list selector – lze nastavit společně s overflow      menu ●   nebo nutné vytvořit v layoutu položek ●...
ActionMode ●   context menu ●   nahrazení of plovoucího menu ●   implementováno action barem ●   může být split action mode
ActionMode
ActionMode - background
ActionMode
ActionMode
SearchView     (android:)searchDropdownBackground ●   (android:)searchViewTextField ●   (android:)searchViewTextFieldRight...
THE END
Upcoming SlideShare
Loading in …5
×

Stylování ActionBaru

1,474 views

Published on

Lecture on Android ActionBar styling. At aDev Meetup #2 FIT ČVUT Prague.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,474
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Stylování ActionBaru

  1. 1. Stylování ActionBaru Tomáš Kypta @TomasKypta
  2. 2. ActionBar ● přidán v Androidu 3.0 (API level 11) ● další rozšíření v Androidu 4.0 (API level 14) ● není v support library ● ActionBarSherlock
  3. 3. ActionBarSherlock ● backportuje ActionBar na Android 2.x ● nahrazuje nativní ActionBar na Android 3.x ● nyní ve verzi 4.2.0
  4. 4. ActionBar 1. main action bar 2. top action bar 3. bottom action bar
  5. 5. ActionBar
  6. 6. Základ ● tmavé a světlé téma – definují default styly pro všechny UI prvky ● Theme.Sherlock (Theme.Holo, Theme) ● Theme.Sherlock.Light (Theme.Holo.Light, Theme.Light) ● kombinace tmavého a světlého tématu ● Theme.Sherlock.Light.DarkActionBar (Theme.Holo.Light.DarkActionBar)
  7. 7. ActionBar – kde začít● http://developer.android.com/guide/topics/ui/actionbar.html● http://jgilfelt.github.com/android-actionbarstylegenerator
  8. 8. ActionBar - styly ● matoucí, co kde má být nastaveno ● celkové stylování definováno několika položkami v tématu – některé položky obsahují kompexní styly ● pro ActionBarSherlock je třeba položky (většinou) zduplikovat bez namespace android
  9. 9. ActionBar ● vypnutí ActionBaru ● nelze pak zapnout v kódu
  10. 10. ActionBar - overlay
  11. 11. ActionBar - výška ● portrait - 48dp ● landscape - 40dp ● sw600dp - 56dp ● raději neměnit
  12. 12. Home Layout ● složen z: – icon/logo – title & subtitle – homeAsUpIndicator ● nelze vyměnit
  13. 13. Home Layout
  14. 14. Home Layout
  15. 15. Home Layout ● části lze vypnout
  16. 16. Home Layout
  17. 17. Home Layout – z kódu ● setDisplayOptions() ● setDisplayHomeAsUpEnabled() ● setDisplayShowCustomEnabled() ● setDisplayShowHomeEnabled() ● setDisplayShowTitleEnabled() ● setDisplayUseLogoEnabled() ● setHomeButtonEnabled()
  18. 18. Icon/Logo ● defaultně se zobrazuje ikona aplikace ● lze zobrazit jakoukoliv ikonu/obrázek ● setIcon(), setLogo()
  19. 19. Icon/Logo ● 4dip top & bottom margin – nelze změnit ● designer si toho musí být vědom – logo by mělo mít transparent pozadí – nedělat stavy s barevným pozadím
  20. 20. Icon/Logo background ● nelze použít color selector - crash ● společné pozadí pro homeAsUpIndicator a ikonu/logo ● na celou výšku ActionBaru ● použije se i pro další prvky v ActionBaru
  21. 21. homeAsUpIndicator ● 16dip x 16dip ● lze použít jiný rozměr ● ideálně jen přebarvit defaultní ikonu ● šířka ovlivňuje odsazení ikony/loga zleva
  22. 22. homeAsUpIndicator ● šířka ovlivňuje odsazení ikony/loga zleva ● ikona/logo částečně zprava překrývá homeAsUpIndicator ● mdpi – 3px, hdpi – 5px, xhdpi - 7px
  23. 23. homeAsUpIndicator ● šířka ovlivňuje odsazení ikony/loga zleva ● ikona/logo částečně zprava překrývá homeAsUpIndicator ● mdpi – 3px, hdpi – 5px, xhdpi - 7px
  24. 24. homeAsUpIndicator ● měl by mít transparent pozadí ● nedělat stavy s barevným pozadím
  25. 25. Title ● default hodnota z android:label z manifestu ● lze měnit v kódu ● raději nepoužívat android:label=””
  26. 26. Subtitle ● text se nastavuje v kódu
  27. 27. Menu
  28. 28. Menu● položky menu umísťované do AB● atribut android:showAsAction – always – položka se přidá vždy do AB (nemusí se vejít) – ifRoom – podle místa se buď přidá do AB nebo do overflow menu – never – vždy v overflow menu – withText – snaží se zobrazit ikonu s textem – collapseActionView – položka má view, které kolabuje do normální položky menu
  29. 29. Menu● může ovlivnit zobrazení titulku● ikona a homeAsUpIndicator neovlivněny● overflow ikona ovlivněna
  30. 30. Action button ● defaultní background je ?attr/actionBarItemBackground ● ikona má celou výšku AB ● ikony by měly mít transparentní pozadí
  31. 31. Action button - actionLayout ● menu resource item může mít vlastní layout ● background je třeba nastavit v layoutu
  32. 32. Action button - actionViewClass ● menu resource item může být definován nějakým widgetem
  33. 33. Action button - collapseActionView● actionView lze rozbalit – zabere celou šířku kromě homeAsUpIndicatoru, ikony a overflow ikony
  34. 34. Action overflow button ● zobrazen, pokud nema telefon HW menu tlačítko ● v předchozí verzi ABS existovalo téma .ForceOverflow
  35. 35. Action overflow button
  36. 36. Action overflow button
  37. 37. Action overflow button ● defaultní background je ?attr/actionBarItemBackground ● ideálně pouze přebarvit defaultní ikonu
  38. 38. Action overflow menu ● pozadí
  39. 39. Action overfow menu ● item selector ● pozor – nastaví se pro každý spinner dropdown ● nepoužívat color selector ani barvy v drawable selectoru
  40. 40. Action overflow menu ● text
  41. 41. ProgressBar● inditerminateProgress & progress zabudovány v AB● requestWindowFeature(Window.FEATURE_INDETERMINATE_ PROGRESS)● requestWindowFeature(Window.FEATURE_PROGRESS)● setSupportProgressBarIndeterminateVisibility(true)● setSupportProgress(progressValue) - hodnota od 0 do 10000● setSupportProgressBarVisibility(true)
  42. 42. Indeterminate Progress
  43. 43. Progress
  44. 44. Custom view ● lze i v kódu setCustomView(R.layout.custom);
  45. 45. Custom view ● natazeni na cely AB (schova i title)
  46. 46. Stín pod ActionBarem ● res/values ● res/values-v14
  47. 47. Split ActionBar ● defaultně vypnuto ● nebo v <application> ● umísťuje se sem menu
  48. 48. Split ActionBar
  49. 49. Split ActionBar ● expandovaná action views jsou roztažena v hlavním actionbaru
  50. 50. Taby ● vytvářeny v kódu ● setNavigationMode(ActionBar.NAVIGATION_MODE_TABS) ● můžou obsahovat text, ikonu, custom view
  51. 51. Taby ● podle dostupného místa vytvořeny v hlavním action baru nebo stacked action baru ● pokud není dost místa mohou zkolabovat do list navigation ● nelze vynutit umístění ani formu
  52. 52. Taby
  53. 53. Taby – stacked action bar ●
  54. 54. Taby – TabBar ● TabBar background
  55. 55. Taby ● tab background
  56. 56. Taby - text
  57. 57. List navigation ● created in code ● setNavigationMode(ActionBar.NAVIGATION_MODE_LIST) ● taby a list menu nemohou existovat společně
  58. 58. List navigation
  59. 59. List navigation ● list selector – lze nastavit společně s overflow menu ● nebo nutné vytvořit v layoutu položek ● dobré stejně vyřešit i text ● nefunguje, pokud vzniklo z tabu
  60. 60. ActionMode ● context menu ● nahrazení of plovoucího menu ● implementováno action barem ● může být split action mode
  61. 61. ActionMode
  62. 62. ActionMode - background
  63. 63. ActionMode
  64. 64. ActionMode
  65. 65. SearchView (android:)searchDropdownBackground ● (android:)searchViewTextField ● (android:)searchViewTextFieldRight ● (android:)searchViewCloseIcon ● (android:)searchViewSearchIcon ● (android:)searchViewGoIcon ● (android:)searchViewVoiceIcon
  66. 66. THE END

×