Material Chef - DevFest SP 2015

Material

Cadê o Material Design??

Material ChefEnhanced

#MaterialChef@_rafaeltoledo

O Cozinheiro

Rafael Toledo

Desenvolvedor AndroidConcrete Solutions

Cozinheiro ProfissionalMinha Casa

www.rafaeltoledo.net


Ingredientescompile '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'


Toolbar


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" />


Toolbar - Primary Color#MaterialChef@_rafaeltoledo

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>


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



TOOLBARcom muito estilo e visual consistente

CardView


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>



CARDVIEWtoque de Material ao nosso design

CoordinatorLayout


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.


CoordinatorLayout<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">

...

</android.support.design.widget.CoordinatorLayout>

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

CoordinatorLayout<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"/>


COORDINATOR LAYOUTcom movimento e refinamento

FloatingActionButton


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


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" />



FLOATING ACTION BUTTONcarinhosamente conhecido como FAB

SnackBar


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*



SNACKBARnotificação com uma pitada de classe

NavigationView


NavigationView- É a implementação refinada do já conhecido

Navigation Drawer

- Posiciona-se dentro de um DrawerLayout - efeito slide


NavigationView- Opções criadas a partir de um resource de menu

- Pode receber uma view para ser utilizada de header


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>


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>


NavigationView (dica)

- De acordo com as guidelines, a partir da API 21+, o NavigationView deve passar por trás da status bar

<style name="MaterialChef.Theme" parent="Base.Theme"> <item name="android:windowDrawsSystemBarBackgrounds"> true </item> <item name="android:statusBarColor"> @android:color/transparent </item></style>


NAVIGATION VIEWconsistente, a navegação central do seu app

TabLayout


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


TabLayout<android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" />

// Código JavatabLayout.setupWithViewPager(viewPager);// outabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.x));

TabLayoutpublic class Adapter extends PagerAdapter {

... @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return "Page 1"; ... } }}



TAB LAYOUTnavegação secundária simples e objetiva

TextInputLayout


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


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>



TEXT INPUT LAYOUTentrada de texto com estilo

Raised Button


Raised Button- É o mesmo componente que já utilizamos

(Button), com um estilo da AppCompat

- Automaticamente adiciona o Ripple Effect para versões 21+


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>


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" />



RAISED BUTTONsem complexidade, estiloso!

Dialog


Dialog- É só mudar o import!

// Antesimport android.app.AlertDialog;

// Agoraimport android.support.v7.app.AlertDialog;



MATERIAL DIALOGalertas sem sustos, sem inconsistências

Tipografia


Tipografia- Sempre esteve aqui… desde a AppCompat 21

- Os estilos de texto possuem o prefixo TextAppearance.AppCompat


Tipografia<TextView style="@style/TextAppearance.AppCompat.Display1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/app_name" />


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



TIPOGRAFIAporque uma aparência agradável faz a diferença

Collapsing Toolbar


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


Collapsing Toolbar<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">

...

Collapsing Toolbar<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>

Collapsing Toolbar  <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>

Collapsing Toolbar  <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>

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

</android.support.v4.widget.NestedScrollView></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>



COLLAPSING TOOLBARagora o negócio ficou sério!

Shared Element Transition


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!


Shared Element TransitionPair<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());


Shared Element TransitionImageView imageView = (ImageView) findViewById(R.id.backdrop);imageView.setImageResource(image);ViewCompat.setTransitionName(imageView, EXTRA_IMAGE);



SHARED ELEMENT TRANSITIONporque no mundo real as coisas se movimentam

Material ChefConcluído!


Material ChefVamos experimentar?


Links- Cheesesquare: http://vai.la/iy6n

- MaterializeYourApp: http://vai.la/iy6r

- Plaid: http://vai.la/iy6z

- Material Design Icons: http://vai.la/iy6v



Material Chefgithub.com/rafaeltoledo/material-chef

Material Chef - DevFest SP 2015

Technology

Transcript of Material Chef - DevFest SP 2015