Material Chef Enhanced

Apresentação sobre Material Design no DevFest São Paulo 2015.

Transcript

1. Material
3. Material
4. Material
5. Cadê o Material Design??
6. Material Chef Enhanced #MaterialChef @_rafaeltoledo
7. O Cozinheiro Rafael Toledo Desenvolvedor Android Concrete Solutions Cozinheiro Profissional Minha Casa www.rafaeltoledo.net #MaterialChef @_rafaeltoledo
8. Ingredientes compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1' compile 'com.android.support:cardview-v7:23.1.1' compile 'com.android.support:recyclerview-v7:23.1.1' #MaterialChef @_rafaeltoledo
9. Toolbar #MaterialChef @_rafaeltoledo
10. Toolbar <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/MaterialChef.AppBarOverlay" app:popupTheme="@style/MaterialChef.PopupOverlay" /> #MaterialChef @_rafaeltoledo
11. Toolbar - Primary Color #MaterialChef @_rafaeltoledo
12. Toolbar - Colors <color name="colorPrimary">#ffc107</color> <color name="colorPrimaryDark">#c99700</color> <color name="colorAccent">#607d8b</color> <style name="MaterialChef.Theme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> #MaterialChef @_rafaeltoledo
13. Toolbar - Toques do Chef - Primay Color: 500 - Primary Color Dark: 700 - setSupportActionBar(toolbar) - Paletas de exemplo: http://vai.la/ixCZ - Gerador de paleta: http://vai.la/ixD4 #MaterialChef @_rafaeltoledo
14. #MaterialChef @_rafaeltoledo TOOLBAR com muito estilo e visual consistente
15. CardView #MaterialChef @_rafaeltoledo
16. CardView (Receita Simples) - 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="@layout/seu_layout" /> </android.support.v7.widget.CardView> #MaterialChef @_rafaeltoledo
17. #MaterialChef @_rafaeltoledo CARDVIEW toque de Material ao nosso design
18. CoordinatorLayout #MaterialChef @_rafaeltoledo
19. CoordinatorLayout - É 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 ao SnackBar, etc. #MaterialChef @_rafaeltoledo
20. CoordinatorLayout <!-- Circule o seu Layout --> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> ... </android.support.design.widget.CoordinatorLayout> #MaterialChef @_rafaeltoledo
21. CoordinatorLayout <!-- 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|snap"/> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> #MaterialChef @_rafaeltoledo
22. CoordinatorLayout <!-- 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> #MaterialChef @_rafaeltoledo
23. #MaterialChef @_rafaeltoledo COORDINATOR LAYOUT com movimento e refinamento
24. FloatingActionButton #MaterialChef @_rafaeltoledo
25. FloatingActionButton - Representa a ação principal a ser realizada em uma tela - Possui um ícone e pode possuir sub-opções (ex.: Inbox) - Alternativa ao widget da Design Library: http://vai. la/ixXs #MaterialChef @_rafaeltoledo
26. FAB <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" /> #MaterialChef @_rafaeltoledo
27. #MaterialChef @_rafaeltoledo FLOATING ACTION BUTTON carinhosamente conhecido como FAB
28. SnackBar #MaterialChef @_rafaeltoledo
29. SnackBar - É um Material Toast. Pode conter uma ação. Snackbar.make(view, R.string.hello_world, Snackbar.LENGTH_LONG) .setAction(R.string.action, null) .show(); - Passando o FAB como parâmetro, estando dentro de um CoordinatorLayout, a animação ocorre de forma mágica* #MaterialChef @_rafaeltoledo
30. #MaterialChef @_rafaeltoledo SNACKBAR notificação com uma pitada de classe
31. NavigationView #MaterialChef @_rafaeltoledo
32. NavigationView - É a implementação refinada do já conhecido Navigation Drawer - Posiciona-se dentro de um DrawerLayout - efeito slide #MaterialChef @_rafaeltoledo
33. NavigationView - Opções criadas a partir de um resource de menu - Pode receber uma view para ser utilizada de header #MaterialChef @_rafaeltoledo
34. NavigationView <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> #MaterialChef @_rafaeltoledo
35. NavigationView (menu) <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> #MaterialChef @_rafaeltoledo
36. NavigationView (dica) - De acordo com as guidelines, a partir da API 21+, o NavigationView deve passar por trás da status bar <!-- values-v21/styles.xml --> <style name="MaterialChef.Theme" parent="Base.Theme"> <item name="android:windowDrawsSystemBarBackgrounds"> true </item> <item name="android:statusBarColor"> @android:color/transparent </item> </style> #MaterialChef @_rafaeltoledo
37. #MaterialChef @_rafaeltoledo NAVIGATION VIEW consistente, a navegação central do seu app
38. TabLayout #MaterialChef @_rafaeltoledo
39. TabLayout - Utilizada para separar conteúdos em abas - As abas podem ser adicionadas dinamicamente ou em conjunto com um ViewPager - Abas fixas ou roláveis #MaterialChef @_rafaeltoledo
40. TabLayout <!-- Declaração --> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" /> // Código Java tabLayout.setupWithViewPager(viewPager); // ou tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.x)); #MaterialChef @_rafaeltoledo
41. TabLayout public class Adapter extends PagerAdapter { ... @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return "Page 1"; ... } } } #MaterialChef @_rafaeltoledo
42. #MaterialChef @_rafaeltoledo TAB LAYOUT navegação secundária simples e objetiva
43. TextInputLayout #MaterialChef @_rafaeltoledo
44. TextInputLayout - Habilita a animação do hint de um EditText - Pode ser utilizado para exibir erros de validação - A partir da versão 23.1 da Design Library, pode também exibir contador de caracteres #MaterialChef @_rafaeltoledo
45. TextInputLayout <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> #MaterialChef @_rafaeltoledo
46. #MaterialChef @_rafaeltoledo TEXT INPUT LAYOUT entrada de texto com estilo
47. Raised Button #MaterialChef @_rafaeltoledo
48. Raised Button - É o mesmo componente que já utilizamos (Button), com um estilo da AppCompat - Automaticamente adiciona o Ripple Effect para versões 21+ #MaterialChef @_rafaeltoledo
49. Raised Button <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> #MaterialChef @_rafaeltoledo
50. Raised Button <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" /> #MaterialChef @_rafaeltoledo
51. #MaterialChef @_rafaeltoledo RAISED BUTTON sem complexidade, estiloso!
52. Dialog #MaterialChef @_rafaeltoledo
53. Dialog - É só mudar o import! // Antes import android.app.AlertDialog; // Agora import android.support.v7.app.AlertDialog; #MaterialChef @_rafaeltoledo
54. #MaterialChef @_rafaeltoledo MATERIAL DIALOG alertas sem sustos, sem inconsistências
55. Tipografia #MaterialChef @_rafaeltoledo
56. Tipografia - Sempre esteve aqui… desde a AppCompat 21 - Os estilos de texto possuem o prefixo TextAppearance.AppCompat #MaterialChef @_rafaeltoledo
57. Tipografia <TextView style="@style/TextAppearance.AppCompat.Display1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/app_name" /> #MaterialChef @_rafaeltoledo
58. Tipografia (dica) - Consistência de fontes entre as plataformas - Calligraphy: http://vai.la/iy2D - ...2.3: DroidSans - 3.0...4.4: Roboto - 5.0…: Roboto 1.2 #MaterialChef @_rafaeltoledo
59. #MaterialChef @_rafaeltoledo TIPOGRAFIA porque uma aparência agradável faz a diferença
60. Collapsing Toolbar #MaterialChef @_rafaeltoledo
61. Collapsing Toolbar - Excelente para uso em telas onde há um elemento gráfico em evidência - Transição da Toolbar de transparente para sólida, redimensionando o texto também - O único cuidado é quando as imagens podem fazer o texto e a navegação ilegíveis #MaterialChef @_rafaeltoledo
62. Collapsing Toolbar <!-- Circule o seu Layout --> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> ... </android.support.design.widget.CoordinatorLayout> #MaterialChef @_rafaeltoledo
63. Collapsing Toolbar <!-- Circule o seu Layout --> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> ... </android.support.design.widget.CoordinatorLayout> #MaterialChef @_rafaeltoledo
64. Collapsing Toolbar <!-- Coloque um AppBarLayout --> <android.support.design.widget.CoordinatorLayout> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> ... </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> #MaterialChef @_rafaeltoledo
65. Collapsing Toolbar <!-- Coloque um CollapsingToolbarLayout --> <android.support.design.widget.AppBarLayout> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> ... </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> #MaterialChef @_rafaeltoledo
66. Collapsing Toolbar <!-- Toolbar + ImageView --> <android.support.design.widget.AppBarLayout> <android.support.design.widget.CollapsingToolbarLayout> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar app:layout_collapseMode="pin" ... /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> #MaterialChef @_rafaeltoledo
67. Collapsing Toolbar <!-- Coloque um AppBarLayout --> <android.support.design.widget.CoordinatorLayout> <android.support.design.widget.AppBarLayout /> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <!-- Seu conteúdo aqui --> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout> #MaterialChef @_rafaeltoledo
68. Collapsing Toolbar <!-- Coloque um AppBarLayout --> <android.support.design.widget.CoordinatorLayout> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" /> <android.support.v4.widget.NestedScrollView /> <android.support.design.widget.FloatingActionButton ... app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout> #MaterialChef @_rafaeltoledo
69. #MaterialChef @_rafaeltoledo COLLAPSING TOOLBAR agora o negócio ficou sério!
70. Shared Element Transition #MaterialChef @_rafaeltoledo
71. Shared Element Transition - Material Design não é somente Cards e FABs… é MOVIMENTO! - Infelizmente, esse recurso só funciona no Android 5.0+ - Support Library nos ajuda a não ter que ficar escrevendo código feio! if (Build.VERSION.SDK_INT == ...NÃO! #MaterialChef @_rafaeltoledo
72. Shared Element Transition Pair<View, String> p1 = new Pair<>(v.findViewById(R.id.image), DetailActivity.EXTRA_IMAGE); ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, p1); Intent intent = new Intent(this, DetailActivity.class); ... ActivityCompat.startActivity(this, intent, options.toBundle()); #MaterialChef @_rafaeltoledo
73. Shared Element Transition ImageView imageView = (ImageView) findViewById(R.id.backdrop); imageView.setImageResource(image); ViewCompat.setTransitionName(imageView, EXTRA_IMAGE); #MaterialChef @_rafaeltoledo
74. #MaterialChef @_rafaeltoledo SHARED ELEMENT TRANSITION porque no mundo real as coisas se movimentam
75. Material Chef Concluído! #MaterialChef @_rafaeltoledo
76. Material Chef Vamos experimentar? #MaterialChef @_rafaeltoledo
77. Links - Cheesesquare: http://vai.la/iy6n - MaterializeYourApp: http://vai.la/iy6r - Plaid: http://vai.la/iy6z - Material Design Icons: http://vai.la/iy6v #MaterialChef @_rafaeltoledo
78. #MaterialChef @_rafaeltoledo Material Chef github.com/rafaeltoledo/material-chef