1 of 51

Programação para Dispositivos Móveis: Material Design

Guilherme Antonio Borges

guilhermeborges.pf@gmail.com

2 of 51

Conteúdo de hoje

  • Criando layouts com Material Design em apps Android
    • Compatibilidade com versões anteriores
    • Tema Material
    • Elevação de views
    • Ripple
    • Float Action Button
    • Navegation Drawer Design
    • CardView
    • RecyclerView
    • Efeito de Revelação
    • Animações com item compartilhado entre duas atividades

2

https://material.io/guidelines/material-design/whats-new.html#whats-new-previous-updates

​

3 of 51

Conteúdo de hoje

  • Criando layouts com Material Design em apps Android
    • Compatibilidade com versões anteriores
    • Tema Material
    • Elevação de Views
    • Ripple
    • Float Action Button
    • Navegation Drawer Design
    • CardView
    • RecyclerView
    • Efeito de Revelação
    • Animações com item compartilhado entre duas atividades

3

https://material.io/guidelines/material-design/whats-new.html#whats-new-previous-updates

​

4 of 51

Introdução Material Design

  • Material Design
    • Introduzido com a versão 5.0 do Android (Lollipop)

​

    • Proporciona um guia completo sobre como implementar o visual, animações e interação entre os componentes de um layout

​

      • São recomendações comuns para tornar os usuários mais familiarizados com os layouts de novas aplicações

​

      • Proporciona uma visão harmônica dos elementos na tela

​

4

5 of 51

Material Design: Exemplos de Guias

5

6 of 51

Material Design: Exemplos de Guias

6

7 of 51

Material Design: Exemplos de Guias

7

8 of 51

Material Design

  • Material Design

​

    • Propõem oferecer um design consistentes para aplicações em diversos dispositivos:
      • Smartphones e Tablets (Android)
      • Óculos (Google Glass)
      • TVs (Android TV)
      • Wearables (Android Wear)
      • Carros (Android Auto)

​

8

9 of 51

Material Design

9

10 of 51

Compatibilidade com Versões Anteriores

  • Compatibilidade:
    • O Material Design foi proposto a partir da versão 5.0

​

    • Versões anteriores do Android podem utilizar esses recursos usando as bibliotecas de compatibilidade

​

​

​

​

      • Caso necessário é possível fazer customizações via código:

10

dependencies {

implementation 'com.android.support:appcompat-v7:26.1.0'

...

}

// O Android 5.0 ou superior�if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){� // Pode executar uma nova API�} else {� // Implementa determinada funcionalidade de outra maneira�}

11 of 51

Tema Material

  • As dependências são especificados no Gradle da App para aplicações com versões menores que a versão 5.0

11

12 of 51

Configurando o Tema Material

  • Para configurar o tema é necessário configurar o arquivo styles.css para herdar alguns dos temas abaixo:
    • android:/Theme.Material
    • android:/Theme.Material.Light
    • android:/Theme.Material.Light.DarkActionBar

​

  • Nota: Caso esteja usando o tema AppCompat, que é compatível com todas as versões do Android, usar no lugar um dos temas abaixo:
    • Theme.AppCompat
    • Theme.AppCompat.Light
    • Theme.AppCompat.Light.DarkActionBar

​

12

13 of 51

Configurando o Tema Material

13

Arquivo: /app/res/values/syles.xml

​

<resources>�� <!-- Base application theme. -->� <style

name="AppTheme"

parent="Theme.AppCompat.Light.DarkActionBar">� <!-- Customize your theme here. -->� <item name="colorPrimary">@color/colorPrimary</item>� <item name="colorPrimaryDark">@color/colorPrimaryDark</item>� <item name="colorAccent">@color/colorAccent</item>� </style>�

<style name="AppTheme.NoActionBar">� <item name="windowActionBar">false</item>� <item name="windowNoTitle">true</item>� </style>��</resources>

14 of 51

Configurando o Tema Material

14

Arquivo: /app/res/values/syles.xml

​

<resources>�� <!-- Base application theme. -->� <style

name="AppTheme"

parent="Theme.AppCompat.Light.DarkActionBar">� <!-- Customize your theme here. -->� <item name="colorPrimary">@color/colorPrimary</item>� <item name="colorPrimaryDark">@color/colorPrimaryDark</item>� <item name="colorAccent">@color/colorAccent</item>� </style>�

<style name="AppTheme.NoActionBar">� <item name="windowActionBar">false</item>� <item name="windowNoTitle">true</item>� </style>��</resources>

Os arquivos styles.xml e as configurações são geradas automaticamente se durante a criação do projeto a aplicação for criada usando o tema material

15 of 51

Configurando o Tema Material

15

Arquivo: /app/res/values/syles.xml

​

<resources>�� <!-- Base application theme. -->� <style

name="AppTheme"

parent="Theme.AppCompat.Light.DarkActionBar">� <!-- Customize your theme here. -->� <item name="colorPrimary">@color/colorPrimary</item>� <item name="colorPrimaryDark">@color/colorPrimaryDark</item>� <item name="colorAccent">@color/colorAccent</item>� </style>�

<style name="AppTheme.NoActionBar">� <item name="windowActionBar">false</item>� <item name="windowNoTitle">true</item>� </style>��</resources>

Cores são definidas no arquivo colors.xml

Arquivo: /app/res/values/colors.xml

​

<?xml version="1.0" encoding="utf-8"?>�<resources>� <color name="colorPrimary">#26a69a</color>� <color name="colorPrimaryDark">#303f9f</color>� <color name="colorAccent">#FF4081</color>�</resources>

16 of 51

Paleta de Cores

  • Cores dos temas usados por padrão são definidas pelos nomes:
    • colorPrimary
    • textColorPrimary
    • colorPrimaryDark
    • windowBackground
    • navigationBarColor

​

​

    • Mais sobre cores, link:

16

https://material.io/guidelines/style/color.html#color-color-palette

17 of 51

Elevação de Views

  • Elevação de Views
    • recurso usado para elevar as views na superfície, aumentando ou diminuindo a sombra sobre elas

​

    • é um dos conceitos pilar do Material Design pois os elementos visuais são construídos e aplicados sobre camadas que se sobrepõem

17

18 of 51

Exemplo o impacto da elevação views

18

19 of 51

Elevação de views

  • O atributo usado na elevação possui como nome android:elevation ou semelhante

19

<android.support.v7.widget.CardView� android:id="@+id/card1"� android:layout_width="match_parent"� android:layout_height="40dp"� android:layout_marginLeft="32dp"� android:layout_marginRight="32dp"� android:layout_marginTop="32dp"� app:cardElevation="8dp" />��<android.support.v7.widget.CardView� android:id="@+id/card2"� android:layout_width="match_parent"� android:layout_height="40dp"� android:layout_marginLeft="32dp"� android:layout_marginRight="32dp"� android:layout_marginTop="32dp"� app:cardElevation="3dp" />

20 of 51

Elevação de views

  • Cada View possui um valor recomendado de quanto o efeito de elevação pode ser exibido

20

https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android

​

Elevação (DP)

Componente

16 dp

Nav drawer

Modal bottom Sheet

12 dp

Floating action button (FAB - pressed)

8 dp

Card View (when picked up)

Raised button (pressed state)

6 dp

Floating action button (FAB)

Snackbar

2 dp

Card View

21 of 51

Floating Action Button (FAB)

  • Floating Action Button
    • Consiste em um botão flutuante que deve ser utilizado para conter a ação mais importante da tela
    • Recomenda-se ter a cor mais chamativa
      • Alterada no item colorAssent do arquivo style.css

​

    • Costuma ser referido pela sigla FAB

​

21

22 of 51

Exemplo de FAB

22

Arquivo: /app/res/layout/activity_testa_fab.xml

​

<?xml version="1.0" encoding="utf-8"?>�<android.support.design.widget.CoordinatorLayout� xmlns:android="http://schemas.android.com/apk/res/android"� xmlns:app="http://schemas.android.com/apk/res-auto"� android:layout_width="match_parent"� android:layout_height="match_parent">�� <include layout="@layout/conteudo_tela_testa_fab"/>�� <android.support.design.widget.FloatingActionButton� android:id="@+id/fab"� android:layout_width="wrap_content"� android:layout_height="wrap_content"� android:layout_gravity="bottom|end"� android:layout_margin="16dp"� app:backgroundTint="@color/colorAccent"� app:elevation="8dp"� app:fabSize="normal"� app:srcCompat="@android:drawable/ic_dialog_email" />

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

23 of 51

Exemplo de FAB

23

Arquivo: /app/res/layout/activity_testa_fab.xml

​

<?xml version="1.0" encoding="utf-8"?>�<android.support.design.widget.CoordinatorLayout� xmlns:android="http://schemas.android.com/apk/res/android"� xmlns:app="http://schemas.android.com/apk/res-auto"� android:layout_width="match_parent"� android:layout_height="match_parent">�� <include layout="@layout/conteudo_tela_testa_fab"/>�� <android.support.design.widget.FloatingActionButton� android:id="@+id/fab"� android:layout_width="wrap_content"� android:layout_height="wrap_content"� android:layout_gravity="bottom|end"� android:layout_margin="16dp"� app:backgroundTint="@color/colorAccent"� app:elevation="8dp"� app:fabSize="normal"� app:srcCompat="@android:drawable/ic_dialog_email" />

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

24 of 51

Exemplo de FAB

24

Arquivo: /app/res/layout/activity_testa_fab.xml

​

<?xml version="1.0" encoding="utf-8"?>�<android.support.design.widget.CoordinatorLayout� xmlns:android="http://schemas.android.com/apk/res/android"� xmlns:app="http://schemas.android.com/apk/res-auto"� android:layout_width="match_parent"� android:layout_height="match_parent">�� <include layout="@layout/conteudo_tela_testa_fab"/>�� <android.support.design.widget.FloatingActionButton� android:id="@+id/fab"� android:layout_width="wrap_content"� android:layout_height="wrap_content"� android:layout_gravity="bottom|end"� android:layout_margin="16dp"� app:backgroundTint="@color/colorAccent"� app:elevation="8dp"� app:fabSize="normal"� app:srcCompat="@android:drawable/ic_dialog_email" />

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

O conteúdo da tela fica em arquivo separado:

/app/res/layout/conteudo_tela_testa_fab.xml

​

Facilita reuso de código!

25 of 51

Exemplo de ação com FAB em Java

25

public class FloatActivity extends AppCompatActivity {�� @Override� protected void onCreate(Bundle savedInstanceState) {� super.onCreate(savedInstanceState);� setContentView(R.layout.activity_testa_fab);�� FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);� fab.setOnClickListener(new View.OnClickListener() {� @Override� public void onClick(View view) {� // código da ação aqui!� }� });� }��}

26 of 51

Exemplo de ação com FAB em Java

26

public class FloatActivity extends AppCompatActivity {�� @Override� protected void onCreate(Bundle savedInstanceState) {� super.onCreate(savedInstanceState);� setContentView(R.layout.activity_testa_fab);�� FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);� fab.setOnClickListener(new View.OnClickListener() {� @Override� public void onClick(View view) {� // código da ação aqui!� }� });� }��}

27 of 51

Card View

  • Card View
    • É uma caixa/container com borda e elevação usado para colocar e organizar outras Views

​

    • Pode conter Views dentro dele

​

    • Recomendado utilizar ele sempre que for preciso separar determinados elementos
      • Bastante usado para listagens e grids

​

    • O principal proposito é seguir boas práticas de design proporcionando uma interface consistente e harmônica em todas as plantadeiras do Android

​

​

​

27

28 of 51

Exemplos de Card View

28

29 of 51

Card View

  • Adicionar dependência no arquivo /app/build.grandle

​

​

​

​

29

dependencies {� ...� implementation 'com.android.support:cardview-v7:26.1.0'�}

<?xml version="1.0" encoding="utf-8"?>�<LinearLayout� xmlns:android="http://schemas.android.com/apk/res/android"� xmlns:card_view="http://schemas.android.com/apk/res-auto"� android:layout_width="match_parent"� android:layout_height="match_parent">�� <android.support.v7.widget.CardView� android:layout_width="match_parent"� android:layout_height="100dp"� android:layout_marginEnd="8dp"� android:layout_marginStart="8dp"� android:layout_marginTop="8dp"� card_view:cardBackgroundColor="@color/cardview_light_background"� card_view:cardElevation="3dp"� card_view:contentPadding="6dp">�� <TextView� android:id="@+id/textView2"� android:layout_width="wrap_content"� android:layout_height="wrap_content"� android:layout_gravity="center"� android:text="Hello World" />� </android.support.v7.widget.CardView>��</LinearLayout>

30 of 51

Card View

  • Adicionar dependência no arquivo /app/build.grandle

​

​

​

​

30

dependencies {� ...� implementation 'com.android.support:cardview-v7:26.1.0'�}

<?xml version="1.0" encoding="utf-8"?>�<LinearLayout� xmlns:android="http://schemas.android.com/apk/res/android"� xmlns:card_view="http://schemas.android.com/apk/res-auto"� android:layout_width="match_parent"� android:layout_height="match_parent">�� <android.support.v7.widget.CardView� android:layout_width="match_parent"� android:layout_height="100dp"� android:layout_marginEnd="8dp"� android:layout_marginStart="8dp"� android:layout_marginTop="8dp"� card_view:cardBackgroundColor="@color/cardview_light_background"� card_view:cardElevation="3dp"� card_view:contentPadding="6dp">�� <TextView� android:id="@+id/textView2"� android:layout_width="wrap_content"� android:layout_height="wrap_content"� android:layout_gravity="center"� android:text="Hello World" />� </android.support.v7.widget.CardView>��</LinearLayout>

31 of 51

Card View

  • Adicionar dependência no arquivo /app/build.grandle

​

​

​

​

31

dependencies {� ...� implementation 'com.android.support:cardview-v7:26.1.0'�}

<?xml version="1.0" encoding="utf-8"?>�<LinearLayout� xmlns:android="http://schemas.android.com/apk/res/android"� xmlns:card_view="http://schemas.android.com/apk/res-auto"� android:layout_width="match_parent"� android:layout_height="match_parent">�� <android.support.v7.widget.CardView� android:layout_width="match_parent"� android:layout_height="100dp"� android:layout_marginEnd="8dp"� android:layout_marginStart="8dp"� android:layout_marginTop="8dp"� card_view:cardBackgroundColor="@color/cardview_light_background"� card_view:cardElevation="3dp"� card_view:contentPadding="6dp">�� <TextView� android:id="@+id/textView2"� android:layout_width="wrap_content"� android:layout_height="wrap_content"� android:layout_gravity="center"� android:text="Hello World" />� </android.support.v7.widget.CardView>��</LinearLayout>

32 of 51

Exercícios Parte 1

Exercícios Baseados nos exemplos.

32

33 of 51

Exercício 1: Menu

  • 1) Considere o layout abaixo de um aplicação de IMC. Remodele a tela de menu para usar Material Design.
    • OBS.: Usar ao menos o CardView

33

Id: btnNavegador

Id: btnIMC

Id: btnSair

Sem ID

Id: txtUltimoResultadoDeIMC

34 of 51

Exercício 2: Tela do Formulário de IMC

  • 2) Remodele a tela de IMC abaixo para usar o Material Design. Cálculo do IMC (imc = peso / (altura * altura))
    • OBS.: Deve usar ao menos o Float Action Button
    • Implementar e executar!

​

34

Id: edtPeso

Id: edtAltura

Id: btnCalcular

35 of 51

RecyclerView

35

36 of 51

RecyclerView

  • RecyclerView
    • Criado para substituir o ListView como View padrão para exibição de listas
      • Mais flexível e otimizado

​

    • Algumas funcionalidades:
      • Suporte a animações ao adicionar ou remover elementos da lista

​

      • Controle automático da reutilização das views (padrão ViewHolder)

​

      • Permite alterar o gerenciador de layout para renderizar as views como listas, grids, ou outra forma customizada

​

​

36

37 of 51

Padrão ViewHolder

  • ViewHolder
    • Padrão de projeto para reaproveitamento de elementos visuais
      • Sem o padrão, para cada elemento uma lista de, por exemplo, 1000 linhas, uma View seria instanciada, sendo que somente 10 Views poderiam ser vistas.
        • Isso iria ocupar memória desnecessariamente

​

    • Benefícios:
      • Otimiza a memória
      • Deixa a rolagem da lista fluida

​

    • No ListView esse padrão deve ser implementado manualmente pelo programador, no RecyclerView esse padrão vem nativo.

37

38 of 51

RecyclerView

  • LayoutManagers
    • o RecyclerView não sabe desenhar na tela, assim, ele necessita de alguma subclasse de LayoutManager

​

  • Subclasses de LayoutManager:
    • LinearLayoutManager
      • Organiza as views na vertical ou horizontal, semelhante ao ListView
    • GridLayoutManager
      • Organiza as views em um grid
    • StaggeredGridLayoutManager
      • Organiza as views em um grid que suporta as orientações vertical e horizontal

38

39 of 51

Usando RecyclerView

  • Adicionar dependência no arquivo /app/build.grandle

​

39

dependencies {� ...

implementation 'com.android.support:recyclerview-v7:26.1.0'�}

Arquivo: /app/res/layout/activity_recycler_view.xml

​

<?xml version="1.0" encoding="utf-8"?>�<LinearLayout� xmlns:android="http://schemas.android.com/apk/res/android"� android:layout_width="match_parent"� android:layout_height="match_parent">�� <android.support.v7.widget.RecyclerView� android:id="@+id/recyclerView"� android:layout_width="match_parent"� android:layout_height="wrap_content" />�</LinearLayout>

40 of 51

RecyclerView: LinearLayoutManager

40

public class RecyclerViewActivity extends AppCompatActivity {� private RecyclerView recyclerView;� private String[] valores = {"Um","Dois","Três","Quatro",...,"Dezesseis"};� @Override� public void onCreate( Bundle savedInstanceState) {� super.onCreate(savedInstanceState);� setContentView(R.layout.activity_recycler_view);�� // RecyclerView� recyclerView = (RecyclerView) findViewById(R.id.recyclerView);� recyclerView.setLayoutManager(new LinearLayoutManager(this));� recyclerView.setItemAnimator(new DefaultItemAnimator());� recyclerView.setHasFixedSize(true);� // Valores e Adapter� recyclerView.setAdapter(new LineAdapter<String>(this,valores));� }�}

41 of 51

RecyclerView: LinearLayoutManager

41

public class RecyclerViewActivity extends AppCompatActivity {� private RecyclerView recyclerView;� private String[] valores = {"Um","Dois","Três","Quatro",...,"Dezesseis"};� @Override� public void onCreate( Bundle savedInstanceState) {� super.onCreate(savedInstanceState);� setContentView(R.layout.activity_recycler_view);�� // RecyclerView� recyclerView = (RecyclerView) findViewById(R.id.recyclerView);� recyclerView.setLayoutManager(new LinearLayoutManager(this));� recyclerView.setItemAnimator(new DefaultItemAnimator());� recyclerView.setHasFixedSize(true);� // Valores e Adapter� recyclerView.setAdapter(new LineAdapter<String>(this,valores));� }�}

42 of 51

RecyclerView: LinearLayoutManager

42

public class RecyclerViewActivity extends AppCompatActivity {� private RecyclerView recyclerView;� private String[] valores = {"Um","Dois","Três","Quatro",...,"Dezesseis"};� @Override� public void onCreate( Bundle savedInstanceState) {� super.onCreate(savedInstanceState);� setContentView(R.layout.activity_recycler_view);�� // RecyclerView� recyclerView = (RecyclerView) findViewById(R.id.recyclerView);� recyclerView.setLayoutManager(new LinearLayoutManager(this));� recyclerView.setItemAnimator(new DefaultItemAnimator());� recyclerView.setHasFixedSize(true);� // Valores e Adapter� recyclerView.setAdapter(new LineAdapter<String>(this,valores));� }�}

Permite Adicionar Animações

43 of 51

RecyclerView: LinearLayoutManager

43

public class RecyclerViewActivity extends AppCompatActivity {� private RecyclerView recyclerView;� private String[] valores = {"Um","Dois","Três","Quatro",...,"Dezesseis"};� @Override� public void onCreate( Bundle savedInstanceState) {� super.onCreate(savedInstanceState);� setContentView(R.layout.activity_recycler_view);�� // RecyclerView� recyclerView = (RecyclerView) findViewById(R.id.recyclerView);� recyclerView.setLayoutManager(new LinearLayoutManager(this));� recyclerView.setItemAnimator(new DefaultItemAnimator());� recyclerView.setHasFixedSize(true);� // Valores e Adapter� recyclerView.setAdapter(new LineAdapter<String>(this,valores));� }�}

Diferente do ListView o RecyclerView não possui adaptadores padrão.

​

Necessário criar adaptador!

44 of 51

Template de Linha

  • Template de Linha

44

<?xml version="1.0" encoding="utf-8"?>�<android.support.constraint.ConstraintLayout� xmlns:android="http://schemas.android.com/apk/res/android"� xmlns:app="http://schemas.android.com/apk/res-auto"� xmlns:tools="http://schemas.android.com/tools"� android:layout_width="match_parent"� android:layout_height="wrap_content">�� <TextView� android:id="@+id/txtConteudo"� android:layout_width="wrap_content"� android:layout_height="28dp"� android:layout_marginStart="8dp"� android:layout_marginTop="8dp"� android:text="TextView"� app:layout_constraintStart_toStartOf="parent"� app:layout_constraintTop_toTopOf="parent" />�� <ImageButton� android:id="@+id/btnAdicionar"� android:layout_width="wrap_content"� android:layout_height="wrap_content"� android:layout_marginEnd="24dp"� android:layout_marginTop="8dp"� android:background="@color/cardview_shadow_end_color"� app:layout_constraintEnd_toStartOf="@+id/btnExcluir"� app:layout_constraintTop_toTopOf="parent"� app:srcCompat="@drawable/ic_add_gray_24dp" />�� <ImageButton� android:id="@+id/btnExcluir"� android:layout_width="wrap_content"� android:layout_height="wrap_content"� android:layout_marginEnd="16dp"� android:layout_marginTop="8dp"� android:background="@color/cardview_shadow_end_color"� app:layout_constraintEnd_toEndOf="parent"� app:layout_constraintTop_toTopOf="parent"� app:srcCompat="@drawable/ic_delete_gray_24dp" />��</android.support.constraint.ConstraintLayout>

45 of 51

Adaptador: Container de dados da linha

45

public class LineHolder extends RecyclerView.ViewHolder {�� public TextView title;� public ImageButton moreButton;� public ImageButton deleteButton;�� public LineHolder(View itemView) {� super(itemView);� title = (TextView) itemView.findViewById(R.id.txtConteudo);� moreButton = (ImageButton) itemView.findViewById(R.id.btnAdicionar);� deleteButton = (ImageButton) itemView.findViewById(R.id.btnExcluir);� }�}

46 of 51

Adaptador

46

public class LineAdapter<UserModel> extends RecyclerView.Adapter<LineHolder> {� private final List<UserModel> list;� private final Context context;� public LineAdapter(Context context, UserModel[] valores) {� this.context = context;� list = new ArrayList<>();� for (UserModel a : valores) {� list.add(a);� }� }�� @Override� public LineHolder onCreateViewHolder(ViewGroup parent, int viewType) {� return new LineHolder(LayoutInflater.from(context)� .inflate(R.layout.linha_recycler_view, parent, false));� }� @Override� public void onBindViewHolder(LineHolder holder, int position) {� holder.title.setText(list.get(position).toString());� holder.moreButton.setOnClickListener(new View.OnClickListener() {� @Override� public void onClick(View v) {� // faz algo� }� });� holder.deleteButton.setOnClickListener(new View.OnClickListener() {� @Override� public void onClick(View v) {� // faz algo� }� });� }� @Override� public int getItemCount() {� return list != null ? list.size() : 0;� }�}

47 of 51

Resultado Final

47

48 of 51

Referências

48

49 of 51

Referências

  • LECHETA, Ricardo R. Google Android-5ª Edição: Aprenda a criar aplicações para dispositivos móveis com o Android SDK. Novatec Editora, 2015.

​

  • LEE, V; SCHENEIDER, H.; SCHELL, R. Aplicações móveis: arquitetura, projeto e desenvolvimento. São Paulo: Pearson Education: Makron Books, 2015.

​

  • MONTEIRO, João Bosco. Google Android: crie aplicações para celulares e tablets. São Paulo, SP: Casa do código, 2016.

​

49

50 of 51

Fontes adicionais

  •  Android Developers, site oficial

 

  • Material Design, site oficial:
    • https://material.io/

​

  • Ambos com muitos exemplos, instruções e tutoriais para auxiliar na construção de telas e aplicações.

50

51 of 51

Programação para �dispositivos móveis

Guilherme Antonio Borges

guilhermeborges.pf@gmail.com