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

1. Stylování ActionBaru
Tomáš Kypta
@TomasKypta

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. ActionBarSherlock
● backportuje ActionBar na Android 2.x
● nahrazuje nativní ActionBar na Android 3.x
● nyní ve verzi 4.2.0

4. ActionBar
1. main action bar
2. top action bar
3. bottom action bar

5. ActionBar

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. ActionBar – kde začít
● http://developer.android.com/guide/topics/ui/actionbar.html
● http://jgilfelt.github.com/android-actionbarstylegenerator

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. ActionBar
● vypnutí ActionBaru
● nelze pak zapnout v kódu

10. ActionBar - overlay

11. ActionBar - výška
● portrait - 48dp
● landscape - 40dp
● sw600dp - 56dp
● raději neměnit

12. Home Layout
● složen z:
– icon/logo
– title & subtitle
– homeAsUpIndicator
● nelze vyměnit

13. Home Layout

14. Home Layout

15. Home Layout
● části lze vypnout

16. Home Layout

17. Home Layout – z kódu
● setDisplayOptions()
● setDisplayHomeAsUpEnabled()
● setDisplayShowCustomEnabled()
● setDisplayShowHomeEnabled()
● setDisplayShowTitleEnabled()
● setDisplayUseLogoEnabled()
● setHomeButtonEnabled()

18. Icon/Logo
● defaultně se zobrazuje ikona aplikace
● lze zobrazit jakoukoliv ikonu/obrázek
● setIcon(), setLogo()

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. 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. 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. homeAsUpIndicator
● šířka ovlivňuje odsazení ikony/loga zleva
● ikona/logo částečně zprava překrývá
homeAsUpIndicator
● mdpi – 3px, hdpi – 5px, xhdpi - 7px

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. homeAsUpIndicator
● měl by mít transparent pozadí
● nedělat stavy s barevným pozadím

25. Title
● default hodnota z android:label z manifestu
● lze měnit v kódu
● raději nepoužívat android:label=””

26. Subtitle
● text se nastavuje v kódu

27. Menu

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. Menu
● může ovlivnit zobrazení titulku
● ikona a homeAsUpIndicator neovlivněny
● overflow ikona ovlivněna

30. Action button
● defaultní background je ?attr/actionBarItemBackground
● ikona má celou výšku AB
● ikony by měly mít transparentní pozadí

31. Action button - actionLayout
● menu resource item může mít vlastní layout
● background je třeba nastavit v layoutu

32. Action button - actionViewClass
● menu resource item může být definován
nějakým widgetem

33. Action button - collapseActionView
● actionView lze rozbalit – zabere celou šířku
kromě homeAsUpIndicatoru, ikony a overflow
ikony

34. Action overflow button
● zobrazen, pokud nema telefon HW menu
tlačítko
● v předchozí verzi ABS existovalo téma
.ForceOverflow

35. Action overflow button

36. Action overflow button

37. Action overflow button
● defaultní background je ?attr/actionBarItemBackground
● ideálně pouze přebarvit defaultní ikonu

38. Action overflow menu
● pozadí

39. Action overfow menu
● item selector
● pozor – nastaví se pro každý spinner
dropdown
● nepoužívat color selector ani barvy v
drawable selectoru

40. Action overflow menu
● text

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. Indeterminate Progress

43. Progress

44. Custom view
● lze i v kódu
setCustomView(R.layout.custom);

45. Custom view
● natazeni na cely AB (schova i title)

46. Stín pod ActionBarem
● res/values
● res/values-v14

47. Split ActionBar
● defaultně vypnuto
● nebo v <application>
● umísťuje se sem menu

48. Split ActionBar

49. Split ActionBar
● expandovaná action views jsou roztažena v
hlavním actionbaru

50. Taby
● vytvářeny v kódu
● setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)
● můžou obsahovat text, ikonu, custom view

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. Taby

53. Taby – stacked action bar
●

54. Taby – TabBar
● TabBar background

55. Taby
● tab background

56. Taby - text

57. List navigation
● created in code
● setNavigationMode(ActionBar.NAVIGATION_MODE_LIST)
● taby a list menu nemohou existovat společně

58. List navigation

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. ActionMode
● context menu
● nahrazení of plovoucího menu
● implementováno action barem
● může být split action mode

61. ActionMode

62. ActionMode - background

63. ActionMode

64. ActionMode

65. SearchView
(android:)searchDropdownBackground
● (android:)searchViewTextField
● (android:)searchViewTextFieldRight
● (android:)searchViewCloseIcon
● (android:)searchViewSearchIcon
● (android:)searchViewGoIcon
● (android:)searchViewVoiceIcon

66. THE END