O documento apresenta uma visão abrangente sobre o Material Design no desenvolvimento de aplicativos Android, detalhando novos elementos e comportamentos do Lollipop (API 21), incluindo temas, widgets e animações. Aborda ainda a usabilidade e a importância das transições visuais para uma experiência mais fluida e intuitiva ao usuário. Exemplos práticos de implementação de RecyclerView, CardView e animações de transição são fornecidos para ilustrar as capacidades do Material Design.

1. Material Design
Melhorando a experiência de seu App
Alisson Silva
Android Developer

2. Agenda
Setup (SDK)
Overview da API (Lollipop)
Novos comportamentos e interface do usuário (UI)
Material Design
Material Theme
Novos widgets
View Shadows
Animations

3. Antes de mais nada,
o objetivo!

4. Setup (SDK)
SDK Manager
última versão de SDK Tools e Platform-tools
SDK Android L (API 20, L Preview) -> Lollipop 5.0 (API 21)
build.grade (ou Manifest)
compileSdkVersion '21'
targetSdkVersion '21'
styles.xml
<style name="AppTheme" parent="android:Theme.Material">
...
</style>

5. Overview da API - (Lollipop)
Novos comportamentos
Nova Runtime: ART - a partir da L, será default
- melhorias na GC
- melhorias no suporte de debug

6. - Heads-up
Overview da API - (Lollipop)
Novos comportamentos e interface do usuário (UI)
Notifications
- Design

7. Overview da API - (Lollipop)
- Lockscreen
- Controle de segurança:
Notification.Builder.setVisibility()
VISIBILITY_PRIVATE
VISIBILITY_PUBLIC
VISIBILITY_SECRET

8. Overview da API - (Lollipop)
Interface do usuário (UI)
Suporte ao Material Design
- novo tema: Material Theme
- View shadows
- novos widgets - RecyclerView e CardView
- animação e efeitos de estilo de Drawable
- efeitos de transições de activity
- alteração das cores das barras do App (StatusBar e ActionBar)
WebView
- suporte à audio
- WebGL

9. Overview da API - (Lollipop)
Outros
- nova Camera API - permite melhorias na captura e processamento de imagens
- controle (facilitado na UI) de playback de media
- nova versão do OpenGL - alta performance de gráficos (games)

10. UI != UX
Usabilidade (ISO 9241)
eficiência / eficácia / satisfação
agilidade na viabilização do trabalho
obtenção dos resultados desejados
resultante do uso desse produto

11. Material Design
“You can create apps with Material Design that are visually dynamic and have UI
element transitions that feel natural to users”
Novo Guideline!
“Material Design is a comprehensive guide for visual, motion, and interaction
design across platforms and devices.”
http://www.google.com/design/spec

12. Material Design
Alguns exemplos:

13. Material Design
API Lollipop provê os seguintes elementos para construir Apps com Material
Design:
Novo tema - Material Theme
- novo estilo
styles.xml
<style name="AppTheme"
parent="android:Theme.Material">
...
</style>
@android:style/Theme.Material (dark version)
@android:style/Theme.Material.Light (light version)
@android:style/Theme.Material.Light.DarkActionBar

14. Material Design
Novo tema - Material Theme
- novo estilo
<!--ActionBar-->
<item name="android:colorPrimary">@color/primary</item>
<!--StatusBar-->
<item name="android:colorPrimaryDark">@color/primary_dark</item>
- alteração de cor nos widgets
<item name="android:colorAccent">@color/accent</item>
- alteração de cor no touch feedback nos botões
<item name="android:colorControlHighlight">@color/highlight</item>

15. Material Design
Novos widgets para views (complexas)
RecyclerView
- é uma versão mais avançada de ListView
- provê melhorias de performance e facilidade de uso
para views dinâmicas (recycling view)
- layout manager que reposiciona os itens (conteúdo
das views)
- é possível definir animações para as operações
comuns dos itens
- xml de layout
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

16. Material Design
RecyclerView
- Activity
mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
// cria o layout manager
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
// cria o adapter
mAdapter = new MyAdapter(myDataset);
mRecyclerView.setAdapter(mAdapter);

17. Material Design
RecyclerView
- Adapter
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private String[] mDataset;
public static class ViewHolder extends RecyclerView.ViewHolder {
public TextView mTextView;
public ViewHolder(TextView v) {
super(v);
mTextView = v;
}
}
...

18. Material Design
RecyclerView
- Adapter
...
// Cria novas Views (infla o layout do item da lista) (invocado pelo layout
manager)
@Override
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.my_text_view, parent, false);
// set tamanho, margem, paddings, layout parameters, click
...
ViewHolder vh = new ViewHolder(v);
return vh;
}
...

19. Material Design
RecyclerView
- Adapter
...
// Atualiza o conteúdo da View (invocado pelo layout manager)
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.mTextView.setText(mDataset[position]);
}
...
}

20. Material Design
Novos widgets para views (complexas)
CardView
- herda de FrameLayout e permite mostrar diversas informações, com um visual
consistente
- sombra (shadow) e cantos arredondados
- xml de layout
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardBackgroundColor="@color/card"
card_view:cardCornerRadius="4dp"
android:elevation="10dp"
android:background="@drawable/card_shadow">
<TextView
...
</android.support.v7.widget.CardView>

21. Material Design
Elevation e Shadow
Nova propriedade “Z” que representa a elevação da View:
- a ordem de desenho na tela - maior “Z”, mais “acima” das outras Views
- tamanho da sombra - maior “Z”, maior sombra
Shadow
android:elevation="2dp"
android:background="@drawable/myrect"
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
Elevation
v1.setElevation(0.0f);
v2.setElevation(1.0f);

22. Material Design
Elevation
v.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
view.setTranslationZ(1);
break;
case MotionEvent.ACTION_UP:
view.setTranslationZ(0);
break;
default:
return false;
}
return true;
}
});
Ou melhor ainda...

23. Material Design
Animations
“It encourages deeper exploration of an app: what will happen if I touch this?
And then this?”
Considerações:
- pensar em como a atenção do usuário deve ser direcionada, pensar em como
a animação pode atender à isso (Exemplo)
- transições entre as telas, oportunidades de criar conexões visuais entre
elementos (Exemplo1 e Exemplo2)
- quando iniciar uma animação, a “volta” deve ter a mesma duração / velocidade
(Exemplo)

24. Material Design
Animations
Touch Feedback
- Ripple + Reveal effect
Outro...
- Reveal effect
View myView = findViewById(R.id.my_view);
// centro do circulo
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
int finalRadius = myView.getWidth();
// startRadius -> 0
ValueAnimator anim = ViewAnimationUtils.createCircularReveal(myView,
cx, cy, 0, finalRadius);
anim.start();

25. Material Design
Animations
Activity Transitions
- enter transitions: determina como as Views entram em cena
- exit transitions: determina como as Views saem de cena
Transições suportadas
- explode: move as Views a partir do centro
- slide: move as Views a partir de um dos cantos
- fade: mostra / esconde as Views

26. Material Design
Animations
Activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setExitTransition(new Explode());
xml (styles.xml)
<style name="AppTheme" parent="android:Theme.Material">
<!-- enable window content transitions -->
<item name="android:windowContentTransitions">true</item>
<!-- specify enter and exit transitions -->
<item name="android:windowEnterTransition">@transition/slide</item>
<item name="android:windowExitTransition">@transition/explode</item>
</style>
slide.xml (res/transition)
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<slide/>
</transitionSet>

27. Material Design
Animations
Activity Transitions
- shared elements transitions: na
transição de duas Activities, anima
Views que são compartilhadas entre
elas
Transições suportadas
- changeTransform: anima mudanças
em escala e rotação das Views
- moveImage: anima mudanças no
tamanho para um ImageView

28. Material Design
Animations
xml (styles.xml)
<style name="AppTheme" parent="android:Theme.Material">
<!-- specify shared element transitions →
<item name="android:windowSharedElementEnterTransition">
@transition/move_image</item>
<item name="android:windowSharedElementExitTransition">
@transition/move_image</item>
...
</style>
move_image.xml (res/transition)
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<moveImage/>
</transitionSet>

29. Material Design
Animations
activity_animation.xml
<ImageView
android:id="@+id/image_view_animation2_logo"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/android_robot"
android:viewName="robo"/>
activity_animation_detail.xml
<ImageView
android:id="@+id/image_view_animation2_logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/android_robot"
android:viewName="robo"/>
Activity
Intent intent = new Intent(AminActivity.this, AnimDetailActivity.class);
ActivityOptions options =
ActivityOptions.makeSceneTransitionAnimation(AnimActivity.this, logo, "robo");
startActivity(intent, options.toBundle());

30. Obrigado!
Alisson Silva
alisson@ciandt.com