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 library● ActionBarSherlock

ActionBarSherlock

● backportuje ActionBar na Android 2.x● nahrazuje nativní ActionBar na Android 3.x● nyní ve verzi 4.2.0

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, 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)

ActionBar – kde začít

● http://developer.android.com/guide/topics/ui/actionbar.html

● http://jgilfelt.github.com/android-actionbarstylegenerator

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'

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()● setDisplayShowHomeEnabled()● setDisplayShowTitleEnabled()● setDisplayUseLogoEnabled()● setHomeButtonEnabled()

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ělo mít transparent pozadí

– nedělat stavy s barevným pozadím

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

homeAsUpIndicator

● 16dip x 16dip● lze použít jiný rozměr● ideálně jen přebarvit defaultní ikonu● šířka ovlivňuje odsazení ikony/loga zleva

homeAsUpIndicator

● šířka ovlivňuje odsazení ikony/loga zleva● ikona/logo částečně zprava překrývá

homeAsUpIndicator● mdpi – 3px, hdpi – 5px, xhdpi - 7px

homeAsUpIndicator

● šířka ovlivňuje odsazení ikony/loga zleva● ikona/logo částečně zprava překrývá

homeAsUpIndicator● mdpi – 3px, hdpi – 5px, xhdpi - 7px

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 (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

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 transparentní pozadí

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 overflow ikony

Action overflow button

● zobrazen, pokud nema telefon HW menu tlačítko

● v předchozí verzi ABS existovalo téma .ForceOverflow

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 ani barvy v drawable selectoru

Action overflow menu

● text

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)

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 mohou zkolabovat do list navigation

● nelze vynutit umístění ani formu

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 existovat společně

List navigation

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

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● (android:)searchViewCloseIcon● (android:)searchViewSearchIcon● (android:)searchViewGoIcon● (android:)searchViewVoiceIcon

THE END