Presentation on Material Desing implementation in Android 5.0 and backporting to older versions. Code snippets included.

1. Implementacja
Material Design
by
na Android Lollipop i starszych

2. Sylwester Madej
CEO & Head Developer
@smdremedy
sylwester.madej@byoutline.com
byoutline.com
2

3. Uwaga: zawiera
śladowe ilości
kodu

4. Material...wow

5. Android done right

6. Co nowego?
●
Treść jest najważniejsza
●
Metafora warstw materiału (oś Z, cienie...)
●
Animacje mają za zadanie pokazać powiązania
●
Kolory w paletach mają swoje zadania

7. Adopcja 5.0
1,6% od premiery 25.06.2014 (Nexus OTA 12.11.2014)

8. Co z 98,4%
urządzeń?

9. AppCompat 21 – quick win
Nowy Toolbar w 5 min
android {android {
CompileSdkVersionCompileSdkVersion 2121
defaultConfig {defaultConfig {
TargetSdkVersionTargetSdkVersion 2121
}}
}}
dependencies {dependencies {
compile 'com.android.support:appcompat-v7:compile 'com.android.support:appcompat-v7:21.0.321.0.3''
}}
<style name="Theme.Pinafood" parent="<style name="Theme.Pinafood" parent="Theme.AppCompat.LightTheme.AppCompat.Light">">

10. Domyślny styl AppCompat.Light
Fajnie, ale jakoś tak smutno

11. Trochę życia...kolorowanie

12. Kontrolki obsługiwane przez AppCompat
EditText
Spinner
CheckBox
RadioButton
Switch
CheckedTextView
Reszta wymaga ręcznego stylowania lub użycia bibliotek
np. https://github.com/ZieIony/Carbon

13. ActionBarDrawerToggle
Zmiana v4 na v7 i usunąć grafikę

14. Własny Hamburger

15. Własny Toolbar
android.support.v7.widget.Toolbar – ViewGroup
Można tworzyć własne layouty, dowolnie rozbudowując i umieszczając Toolbar
setSuportActionBar(toolbar)
Problem:
„This Activity already has an action bar supplied by the window decor. Do not request
Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a
Toolbar instead.”
Rozwiązanie:
Zmienić styl na np. na Theme.AppCompat.Light.NoActionBar

16. Drawer na wierzchu
Pozycjonowanie Toolbara należy do nas

17. CardView
android.support.v7.widget.Toolbar – ViewGroup

18. CardView - problemy

19. RecyclerView

20. Nowe podejście do wyświetlania kolekcji
●
Zastępuje ListView, GridView, Gallery
●
Wymusza korzystanie z wzorca ViewHolder
●
Lepsza obsługa wielu typów elementów w jednym adapterze
LayoutManager:
LinearLayoutManager,
StaggeredGridLayoutManager,
GridLayoutManager

21. Zmiany w kodzie
android.support.v7.widget.RecyclerView zamiast ListView
Poza setAdapter() trzeba wywołać setLayoutManager()
setHasFixedSize(true) //optymalizacja wydajności

22. Gdzie jest OnItemClickListener?
OnItemClickListener jest problematyczny przy wielu typach elementów,
dlatego implementacja jest po naszej stronie.

23. SwipeRefreshLayout

24. Natywne podejście do Pull-to-refresh
●
Dodajemy layout
●
Ustawiamy listener
●
Możemy sobie pokolorować

25. Smaczki

26. Palette
Prosty sposób dopasowania kolorów do obrazów
Palette.generateAsync(bitmap, new PaletteListener());Palette.generateAsync(bitmap, new PaletteListener());

27. Automatyczne przejścia elementów
Działa tylko od API 21
Activity1:Activity1:
ActivityOptionsCompat.makeSceneTransitionAnimation( Pair<View, String>ActivityOptionsCompat.makeSceneTransitionAnimation( Pair<View, String>
//imageView, "SHARED_IMAGE"//imageView, "SHARED_IMAGE"
ActivityCompat.startActivity(this, intent, options .toBundle());ActivityCompat.startActivity(this, intent, options .toBundle());
Activity2:Activity2:
ViewCompat.setTransitionName(imageView, "SHARED_IMAGE" );ViewCompat.setTransitionName(imageView, "SHARED_IMAGE" );

28. Inne
●
Paralaksa i przewijanie – ObservableScrollView
●
StateListAnimator
●
Ripple effect

29. Pytania i wasze
doświadczenia?

30. Sylwester Madej
CEO & Head Developer
@smdremedy
sylwester.madej@byoutline.com
byoutline.com
3
0