Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Chef - Material Design no Android com ...

Rafael Toledo
September 19, 2015

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

Apresentado no GDG São José dos Campos

Rafael Toledo

September 19, 2015
Tweet

More Decks by Rafael Toledo

Other Decks in Programming

Transcript

  1. Cardápio - Toolbar - CardView - Coordinator Layout - Floating

    Action Button - SnackBar - Navigation Drawer - Tabs @_rafaeltoledo - Raised Buttons - Floating Label - Cards - Dialogs - Tipografia #GDGSJC
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. FloatingActionButton @_rafaeltoledo - Representa a ação principal a ser realizada

    na tela - Possui um ícone e pode possuir sub-opções (ex.: Inbox) #GDGSJC
  10. 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
  11. NavigationView - Risoto @_rafaeltoledo - É a implementação do já

    conhecido Navigation Drawer - Posiciona-se dentro de um DrawerLayout - efeito slide #GDGSJC
  12. NavigationView - Risoto @_rafaeltoledo - Opções criadas a partir de

    um resource de menu - Pode receber uma view para ser utilizada como header #GDGSJC
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. TabLayout - Receita @_rafaeltoledo public class Adapter extends PagerAdapter {

    ... @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return "Page 1"; ... } } } #GDGSJC
  19. TextInputLayout - Cobertura @_rafaeltoledo - Habilita a animação do hint

    de um EditText - Pode ser utilizado também para exibir erros de validação #GDGSJC
  20. 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
  21. 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
  22. 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
  23. 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
  24. Tipografia - Dica do Chef @_rafaeltoledo - Consistência de fonte

    entre as plataformas: - https://github.com/chrisjenx/Calligraphy #GDGSJC