Material Chef - Material Design no Android com a Design Library & cia.

Apresentado no GDG São José dos Campos

Transcript

1. Material Rafael Toledo Concrete Solutions @_rafaeltoledo #GDGSJC
2. Cardápio - Toolbar - CardView - Coordinator Layout - Floating Action Button - SnackBar - Navigation Drawer - Tabs @_rafaeltoledo - Raised Buttons - Floating Label - Cards - Dialogs - Tipografia #GDGSJC
3. Ingredientes compile 'com.android.support:appcompat-v7:23.0.1' compile 'com.android.support:design:23.0.1' compile 'com.android.support:cardview-v7:23.0.1' // E o seu 'tumperô' @_rafaeltoledo #GDGSJC
4. Toolbar @_rafaeltoledo #GDGSJC
5. @_rafaeltoledo Toolbar ActionBar... #GDGSJC
6. Toolbar - Receita @_rafaeltoledo <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/AppTheme.AppBarOverlay" app:popupTheme="@style/AppTheme.PopupOverlay" /> #GDGSJC
7. Toolbar - Overlay? @_rafaeltoledo <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/> <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /> #GDGSJC
8. Toolbar - Primary Color? @_rafaeltoledo #GDGSJC
9. Toolbar - Colors @_rafaeltoledo <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> #GDGSJC
10. Toolbar - Toques do Chef @_rafaeltoledo - Primary color: 500, Primary color dark: 700 - setSupportActionBar(toolbar); - https://www.google.com/design/spec/style/color. html#color-color-palette - http://mcg.mbitson.com/ #GDGSJC
11. Toolbar @_rafaeltoledo pronto, chef! #GDGSJC
12. CardView @_rafaeltoledo #GDGSJC
13. CardView - Receita Simples @_rafaeltoledo - FrameLayout gourmet - Basta colocar seu conteúdo dentro dele <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" app:cardUseCompatPadding="true"> <include layout="@android:layout/simple_list_item_2" /> </android.support.v7.widget.CardView> #GDGSJC
14. CardView @_rafaeltoledo pronto, chef! #GDGSJC
15. Coordinator Layout @_rafaeltoledo #GDGSJC
16. CoordinatorLayout - quase Curry @_rafaeltoledo - É ele quem faz a mágica acontecer - Garante que um componente responda ao comportamento de outro - Receitas comuns: Toolbar ocultável, Floating Action Button respondendo a SnackBar, etc. #GDGSJC
17. CoordinatorLayout - Receita @_rafaeltoledo <!-- Circule o seu Layout --> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> ... </android.support.design.widget.CoordinatorLayout> #GDGSJC
18. CoordinatorLayout - Receita @_rafaeltoledo <!-- Coloque a Toolbar dentro de um AppBarLayout --> <android.support.design.widget.CoordinatorLayout> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar ... app:layout_scrollFlags="scroll|enterAlways" /> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> #GDGSJC
19. CoordinatorLayout - Receita @_rafaeltoledo <!-- Configure o emissor de eventos --> <android.support.design.widget.CoordinatorLayout> <android.support.design.widget.AppBarLayout> <android.support.v7.widget.Toolbar /> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView ... app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout> #GDGSJC
20. CoordinatorLayout @_rafaeltoledo pronto, chef! #GDGSJC
21. FloatingActionButton @_rafaeltoledo #GDGSJC
22. FloatingActionButton @_rafaeltoledo - Representa a ação principal a ser realizada na tela - Possui um ícone e pode possuir sub-opções (ex.: Inbox) #GDGSJC
23. FloatingActionButton - Receita @_rafaeltoledo <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_done_white_24dp" /> #GDGSJC
24. FloatingActionButton @_rafaeltoledo pronto, chef! #GDGSJC
25. SnackBar @_rafaeltoledo #GDGSJC
26. SnackBar - Torrada com Geléia @_rafaeltoledo - É simplesmente um "Material Toast" Snackbar.make(view, R.string.hello_world, Snackbar.LENGTH_LONG) .show(); - Passando o FAB como parâmetro, pelo fato do CoordinatorLayout, a animação acontece de forma mágica! #GDGSJC
27. SnackBar @_rafaeltoledo pronto, chef! #GDGSJC
28. NavigationView @_rafaeltoledo #GDGSJC
29. NavigationView - Risoto @_rafaeltoledo - É a implementação do já conhecido Navigation Drawer - Posiciona-se dentro de um DrawerLayout - efeito slide #GDGSJC
30. NavigationView - Risoto @_rafaeltoledo - Opções criadas a partir de um resource de menu - Pode receber uma view para ser utilizada como header #GDGSJC
31. NavigationView - Receita @_rafaeltoledo <android.support.v4.widget.DrawerLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> ... <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/header_nav" app:menu="@menu/nav_content" /> </android.support.v4.widget.DrawerLayout> #GDGSJC
32. NavigationView - Receita @_rafaeltoledo <menu> <group android:checkableBehavior="single"> <item android:id="@+id/nav_home" android:icon="@drawable/ic_dashboard" android:title="Home" /> ... </group> <item android:title="Sub items"> <menu> <item android:icon="@drawable/ic_dashboard" android:title="Sub item 1" /> </menu> </item> </menu> #GDGSJC
33. NavigationView - Dica do Chef @_rafaeltoledo - API 21+, o NavigationView deve passar por trás da status bar <!-- values-v21/styles.xml --> <style name="AppTheme" parent="Base.Theme"> <item name="android:windowDrawsSystemBarBackgrounds"> true </item> <item name="android:statusBarColor"> @android:color/transparent </item> </style> #GDGSJC
34. NavigationView @_rafaeltoledo pronto, chef! #GDGSJC
35. TabLayout @_rafaeltoledo #GDGSJC
36. TabLayout - Pizza Qualquer Hora @_rafaeltoledo - Utilizada para separar conteúdos em abas - As abas podem ser adicionadas dinamicamente ou em conjunto com um ViewPager - Abas fixas ou roláveis #GDGSJC
37. TabLayout - Receita @_rafaeltoledo <!-- Declaração --> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" /> // Código Java mTabLayout.setupWithViewPager(mViewPager); // ou mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.x)); #GDGSJC
38. TabLayout - Receita @_rafaeltoledo public class Adapter extends PagerAdapter { ... @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return "Page 1"; ... } } } #GDGSJC
39. TabLayout @_rafaeltoledo pronto, chef! #GDGSJC
40. TextInputLayout @_rafaeltoledo #GDGSJC
41. TextInputLayout - Cobertura @_rafaeltoledo - Habilita a animação do hint de um EditText - Pode ser utilizado também para exibir erros de validação #GDGSJC
42. TextInputLayout - Receita @_rafaeltoledo <android.support.design.widget.TextInputLayout android:id="@+id/message_wrapper" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/message" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/hello_world" /> </android.support.design.widget.TextInputLayout> #GDGSJC
43. TextInputLayout @_rafaeltoledo pronto, chef! #GDGSJC
44. Raised Button @_rafaeltoledo #GDGSJC
45. Raised Button @_rafaeltoledo - É o mesmo componente que já utilizamos, com um estilo herdado da AppCompat - Automaticamente adiciona o Ripple Effect para versões 21+ #GDGSJC
46. Raised Button - Receita @_rafaeltoledo <style name="AppTheme.Button.Primary" parent="Base.Widget.AppCompat.Button"> <item name="colorButtonNormal">@color/colorPrimary</item> <item name="android:textColor">@android:color/white</item> </style> #GDGSJC
47. Raised Button - Receita @_rafaeltoledo <Button android:id="@+id/show_message" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello_world" android:theme="@style/AppTheme.Button.Primary" /> #GDGSJC
48. Button @_rafaeltoledo pronto, chef! #GDGSJC
49. Dialog @_rafaeltoledo #GDGSJC
50. Dialog - é só mudar o tumperô @_rafaeltoledo - Basta mudar o import do Dialog antigo: // Antes import android.app.AlertDialog; // Agora import android.support.v7.app.AlertDialog; #GDGSJC
51. Dialog @_rafaeltoledo pronto, chef! #GDGSJC
52. Tipografia @_rafaeltoledo #GDGSJC
53. Tipografia - Sempre esteve aqui... @_rafaeltoledo - Os estilos já compõem a AppCompat desde a sua versão 21. - Os estilos de texto possuem o prefixo TextAppearance.AppCompat #GDGSJC
54. Tipografia - Receita @_rafaeltoledo <TextView style="@style/TextAppearance.AppCompat.Display1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/app_name" /> #GDGSJC
55. Tipografia - Dica do Chef @_rafaeltoledo - Consistência de fonte entre as plataformas: - https://github.com/chrisjenx/Calligraphy #GDGSJC
56. Tipografia @_rafaeltoledo pronto, chef! #GDGSJC
57. Material @_rafaeltoledo Prova Concluída! #GDGSJC
58. Material @_rafaeltoledo Vamos experimentar? #GDGSJC
59. Links @_rafaeltoledo - github.com/chrisbanes/cheesesquare - github.com/antoniolg/MaterializeYourApp - github.com/google/material-design-icons - google.com/design/spec/material-design/introduction.html #GDGSJC
60. Material Rafael Toledo Concrete Solutions @_rafaeltoledo github.com/rafaeltoledo/material-chef #GDGSJC