Android Design Support Library

Pedro Francisco de Sousa Neto

Pedro Francisco de Sousa Neto

• Máxima Sistemas
• Freelancer
• "Por conta"

​

​

Sabe programar na plataforma Android? �App publicado na Google Play ou no github? �Me avise, a Máxima Sistemas está contratando! ;)

• Contato semanal com...
• Android
• GIT
• Java EE
• Angular
• Oracle Database
• JavaScript
• HTML
• CSS
• PHP
• MySQL
• E o que vier pela frente :P

Roteiro

O que vamos ver:

• Material Design
• Toolbar*
• Gradle*
• Componentes da nova biblioteca de design;
• Muitas GIFs animadas;
• Código;
• Dicas;
• Projetos relacionados ao tema.

O que NÃO vamos ver:

• "Coisas de designer";

Material Design

Vídeo rápido!

Toolbar

Toolbar

• Não faz parte da library de design
• Faz parte da library appcompat-v7
• Pode ser considerada a nova Action Bar
• Será abordada em alguns componentes da biblioteca de design

​

​

compile 'com.android.support:appcompat-v7:23.0.1'

​

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:theme="@style/ThemeOverlay.AppCompat.Dark" />

​

Toolbar sendo utilizada em um layout (XML)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

​

<include layout="@layout/toolbar" />

​

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<!-- Conteúdo -->

</RelativeLayout>

</LinearLayout>

Configurando a Toolbar no Java

public void setupToolbar(String titulo, String subtitulo) {

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

toolbar.setTitle(titulo);

toolbar.setSubtitle(subtitulo);

setSupportActionBar(toolbar); // Ativando a retrocompatiblidade

}

https://developer.android.com/reference/android/support/v7/widget/Toolbar.html

Configurando o Gradle

Agora sim, Design Support Library!

• Adicione a biblioteca nas suas dependências do gradle:�compile 'com.android.support:design:23.0.1'�
• Coloque o gradle pra sincronizar.�
• Tá pronto!

http://android-developers.blogspot.com.br/2015/05/android-design-support-library.html

Exemplo: Arquivo gradle do app - Parte 1

apply plugin: 'com.android.application'

​

android {

compileSdkVersion 23

buildToolsVersion "23.0.1"

​

defaultConfig {

applicationId "br.buscape.app"

minSdkVersion 9

targetSdkVersion 23

versionCode 1

versionName "1.0"

}

​

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

}

[...]

Exemplo: Arquivo gradle do app - Parte 2

[...]

​

packagingOptions {

exclude 'META-INF/LICENSE.txt'

exclude 'META-INF/NOTICE.txt'

}

​

}

​

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:appcompat-v7:23.0.1'

compile 'com.android.support:design:23.0.1'

}

Componentes Visuais

TextInputLayout

<android.support.design.widget.TextInputLayout� android:layout_width="match_parent"

android:layout_height="wrap_content">

​

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="@string/username"/>

​

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

http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

NavigationView

<android.support.design.widget.NavigationView

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

app:headerLayout="@layout/drawer_header"

app:menu="@menu/drawer"/>

NavigationView - app:headerLayout

Geralmente é utilizado como um "cabeçalho" dos itens de navegação, para exibir dados sobre o usuário. Possui o seu próprio XML.

http://developer.android.com/reference/android/support/design/widget/NavigationView.html

NavigationView - app:menu

Dica: A primeira tela do seu app, corresponde ao primeiro item? Se sim, já deixe ele checado como "true", assim o usuário não ficará perdido quando abrir o menu pela primeira vez.

#inflate #programmatically

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<group android:checkableBehavior="single">

​

<item

android:id="@+id/home"

android:checked="true"

android:icon="@drawable/ic_home"

app:title="@string/home"/>

​

<item

android:id="@+id/favourite"

android:icon="@drawable/ic_favourite"

app:title="@string/favourite"/>

​

</group>

</menu>

NavigationView - sub header

<item� android:id="@+id/navigation_subheader"� android:title="@string/app">� <menu>� <item� android:id="@+id/navigation_sub_item_1"� android:icon="@drawable/ic_detran"� android:title="@string/inicio"/>� <!-- <item� android:id="@+id/navigation_sub_item_2"� android:icon="@drawable/ic_detran"� android:title="@string/segunda_opcao"/> -->� </menu>�</item>

https://play.google.com/store/apps/details?id=br.delon.detran

FloatingActionButton (FAB)

<android.support.design.widget.FloatingActionButton� android:id="@+id/fab"� android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ic_edit"

app:fabSize="normal"/>

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

FloatingActionButton (FAB)

• extends ImageView
• Propriedades
• backgroundTint: Cor do background do FAB;
• fabSize: normal (56dp) ou mini (40dp);
• borderWidth: "grossura da borda";
• rippleColor: Cor do ripple effect.�
• backgroundTint, por default, é colorAccent;
• rippleColor, por default, é colorControlHighlight;
• Dica: Se o seu FAB ficar estranho em outras �versões do android, defina o borderWidth como 0.

TabLayout

• TabLayout estende a classe HorizontalScrollView�
• As abas estendem a classe TabLayout.Tab.

TabLayout

private void setupTablayout() {� tabLayout = (TabLayout) findViewById(R.id.tabLayout);� tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);� tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));� tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));� tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));� tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));� }

http://developer.android.com/reference/android/support/design/widget/TabLayout.html

SnackBar

• Mais bonito que o Toast;
• Pode conter ações;
• Possui uma animação mais agradável;
• As mensagens não são sobrepostas;
• Pode sofrer dismiss através do swipe.

http://developer.android.com/reference/android/support/design/widget/Snackbar.html

SnackBar

Snackbar.make(coordinatorLayout,

"Fácil igual o Toast",

Snackbar.LENGTH_LONG)

.show();

​

​

Toast.makeText(context,

"Eu sou feio",

Toast.LENGTH_LONG)

.show();

Basta passar a view parent, a mensagem e o tempo de duração por parâmetro.

​

Não sabe quem é a view parent?�findViewById(android.R.id.content)

​

Quer adicionar um evento? Depois do make coloque:

.setAction(R.string.desfazer, clickListener)

CoordinatorLayout

É um FrameLayout que "sabe" como as suas Views internas devem se comportar. É o grande agente por trás dos efeitos.

Um bom exemplo de comportamento, segundo a documentação da View SnackBar, é o dismiss com swipe, que só funciona com o uso do CoordinatorLayout.

<android.support.design.widget.CoordinatorLayout>

Com CoordinatorLayout

Sem CoordinatorLayout

http://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

AppBarLayout

• Estende a classe LinearLayout, com a orientação vertical já setada.
• Implementa diversas features do material design, como conceitos e gestos.
• A toolbar contida no AppBarLayout deve declarar a propriedade layout_scrollFlags para que determinados gestos sejam "combinados" com o CoordinatorLayout.

​

Vejam os exemplos da propriedade layout_scrollFlags no próximo slide.

http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

enterAlways enterAlwaysCollapsed exitUntilCollapse

CollapsingToolbarLayout

Adicionando a Toolbar diretamente no AppBarLayout dá o acesso ao layout_scrollFlags, mas não dá o controle de como elementos distintos irão reagir quando a toolbar for "contraída". Para isto, existe o elemento CollapsingToolbarLayout.

​

Na GIF do próximo slide, observem que o evento de scroll, não estará controlando somente a toolbar, mas também o FAB.

http://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html

CollapsingToolbarLayout

<android.support.design.widget.AppBarLayout

android:layout_height="192dp"

android:layout_width="match_parent">

<android.support.design.widget.CollapsingToolbarLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

<android.support.v7.widget.Toolbar

android:layout_height="?attr/actionBarSize"

android:layout_width="match_parent"

app:layout_collapseMode="pin"/>

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

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

Projetos com Material Design

Os links estão no final do slide!

Uma notícia interessante!

Quentinha, é de ontem!

Post da Google, 23 de setembro de 2015

Fontes

• https://github.com/frogermcs/InstaMaterial
• https://github.com/oli107/material-range-bar
• https://github.com/florent37/MaterialLeanBack
• https://www.youtube.com/watch?v=Xtu7ZOQScrI
• https://www.google.com/design/spec/style/color.html
• https://www.google.com/design/spec/material-design/introduction.html
• https://medium.com/google-developers/introducing-material-design-lite-3ce67098c031
• http://hmkcode.com/material-design-app-android-design-support-library-appcompat/
• https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout
• https://medium.com/ribot-labs/exploring-the-new-android-design-support-library-b7cda56d2c32
• https://lab.getbase.com/introduction-to-coordinator-layout-on-android/
• https://plus.google.com/+DesenvolvedoresGoogle/posts/6FyBi1K4fEH

Meu contato + Apresentação

​

www.pedrofsn.com.br

Dúvidas?