MDC-104 Android: componentes avançados do Material Design (Kotlin)

Os componentes do Material Design (MDC, na sigla em inglês) ajudam os desenvolvedores a implementar o Material Design. Criados por uma equipe de engenheiros e designers de UX do Google, os MDC oferecem dezenas de componentes de interface bonitos e funcionais disponíveis para Android, iOS, Web e Flutter. material.io/develop

No codelab MDC-103, você personalizou a cor, a elevação e a tipografia dos Componentes do Material Design (MDC) para criar o estilo do app.

Um componente do sistema do Material Design realiza um conjunto de tarefas predefinidas e tem características específicas, como um botão. No entanto, um botão é mais do que apenas uma maneira de um usuário realizar uma ação. Ele também é uma expressão visual de forma, tamanho e cor que indica aos usuários que ele é interativo e que acontecerá algo quando os usuários clicarem ou tocarem nele.

As diretrizes do Material Design descrevem os componentes do ponto de vista de um designer. Elas descrevem uma grande variedade de funções básicas disponíveis nas plataformas, além dos elementos anatômicos que fazem parte de cada componente. Por exemplo, um pano de fundo contém uma camada de fundo e o conteúdo dela, uma camada em primeiro plano e o conteúdo dela, regras de movimento e opções de exibição. Cada um desses componentes pode ser personalizado conforme as necessidades, os casos de uso e o conteúdo de cada app. Essas partes são, na maioria, visualizações, controles e funções tradicionais do SDK da plataforma.

Embora as diretrizes do Material Design mencionem muitos componentes, nem todos são bons candidatos para serem reutilizados no código e, portanto, não podem ser encontrados nos MDC. Você pode criar essas experiências por conta própria para dar um estilo personalizado ao app. Tudo isso usando um código tradicional.

O que você vai criar

Neste codelab, você vai adicionar um pano de fundo ao Shrine. Ele vai filtrar os produtos mostrados na grade assimétrica por categoria. Você vai usar:

• Forma
• Movimento
• Classes tradicionais do SDK do Android

Este é o último de quatro codelabs que ensinam você a criar um app para um produto conhecido como Shrine. Recomendamos que você siga todos os codelabs na ordem correta para realizar as tarefas passo a passo. Os codelabs relacionados podem ser encontrados em: MDC-101: noções básicas dos componentes do Material Design (MDC). MDC-102: estrutura e layout do Material Design. MDC-103: temas do Material Design usando cor, forma, elevação e tipo.

Componentes do MDC-Android neste codelab

• Forma

O que é necessário

• Conhecimento básico de desenvolvimento para Android.
• Android Studio (faça o download aqui, caso ainda não tenha feito)
• Um dispositivo ou emulador Android (disponível no Android Studio)
• O exemplo de código (confira a próxima etapa)

Como você classificaria seu nível de experiência na criação de apps Android?

Iniciante Intermediário Proficiente

Está continuando do MDC-103?

Se você concluiu o MDC-103, o código para este codelab já está pronto. Pule para a etapa 3.

Está começando do zero?

Faça o download do app inicial do codelab

Fazer o download do app inicial

O app inicial está localizado no diretório material-components-android-codelabs-104-starter/kotlin. cd para esse diretório antes de começar.

... ou clone-o do GitHub

Para clonar este codelab do GitHub, execute estes comandos:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 104-starter

Para receber mais ajuda, consulte Como clonar um repositório do GitHub.

Carregar o código inicial no Android Studio

1. Quando o assistente de configuração for concluído e a janela Welcome to Android Studio for exibida, clique em Open an existing Android Studio project. Acesse o diretório em que você instalou o exemplo de código e selecione kotlin -> shrine (ou pesquise shrine no computador) para abrir o projeto Shipping.
2. Aguarde um pouco enquanto o Android Studio cria e sincroniza o projeto, conforme mostrado nos indicadores de atividade na parte inferior da janela.
3. Como o SDK do Android ou as ferramentas de compilação não estão presentes, o Android Studio poderá encontrar alguns erros de compilação. Veja um exemplo a seguir. Siga as instruções no Android Studio para instalar/atualizar essas ferramentas e sincronizar o projeto.

Adicionar dependências do projeto

O projeto precisa de uma dependência na biblioteca de suporte do MDC Android. Provavelmente, o exemplo de código transferido por download já tem essa dependência listada, mas é recomendável seguir as etapas abaixo para garantir.

1. Navegue até o arquivo build.gradle do módulo app e confira se o bloco dependencies inclui uma dependência do MDC Android:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Opcional) Se necessário, edite o arquivo build.gradle para adicionar as seguintes dependências e sincronizar o projeto.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Executar o app inicial

Confira se a configuração do build à esquerda do botão Executar / Reproduzir é app. Pressione o botão verde Run / Play para criar e executar o app. Na janela Select Deployment Target, se você já tiver um dispositivo Android listado entre os dispositivos disponíveis, avance para a etapa 8. Caso contrário, clique em Create New Virtual Device. Na tela Select Hardware, selecione um smartphone, como o Pixel 2, e clique em Next. Na tela System Image, selecione uma versão recente do Android, de preferência o nível da API mais alto. Se ele não estiver instalado, clique no link Download exibido e faça o download. Clique em Next. Na tela Android Virtual Device (AVD), deixe as configurações como estão e clique em Finish. Selecione um dispositivo Android na caixa de diálogo de destino de implantação. Clique em OK. O Android Studio cria o app, faz a implantação e o abre automaticamente no dispositivo de destino.

Se não for possível adicionar a dependência ou executar o app, resolva os problemas do ambiente para desenvolvedores antes de continuar.

Se você receber um erro INSTALL_FAILED_INVALID_APK ao criar, tente fazer uma Build -> Clean Project no Android Studio.

Pronto. O app Shrine vai aparecer em execução no seu dispositivo.

Um pano de fundo é a superfície mais distante de um app, aparecendo atrás de todos os outros conteúdos e componentes. Ele é composto por duas superfícies: uma camada de fundo, que exibe ações e filtros, e uma camada em primeiro plano, que mostra o conteúdo. Você pode usar um pano de fundo para exibir informações e ações interativas, como filtros de navegação ou conteúdo.

Ocultar o conteúdo da grade

Em shr_product_grid_fragment.xml, adicione o atributo android:visibility="gone" ao seu NestedScrollView para remover temporariamente o conteúdo do produto:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:visibility="gone"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Vamos instalar um pano de fundo nessa região. Para evitar mostrar uma divisão entre a barra de apps da parte de cima e o conteúdo do menu que aparece no plano de fundo, vamos deixar o plano de fundo com a mesma cor da barra de apps da parte de cima.

Em shr_product_grid_fragment.xml, adicione o seguinte como o primeiro elemento na sua raiz FrameLayout, antes do AppBarLayout:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

Em styles.xml, inclua o seguinte:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

Muito bem! Você adicionou um plano de fundo incrível à interface do Shrine. Em seguida, vamos adicionar um menu.

Adicionar o menu

Um menu é basicamente uma lista de botões de texto. Vamos adicionar um aqui.

Crie um arquivo de layout chamado shr_backdrop.xml no diretório res -> layout e adicione o seguinte:

shr_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_featured_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_apartment_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_accessories_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_shoes_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_tops_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_bottoms_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_dresses_label" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_account_label" />

</merge>

Adicione essa lista ao LinearLayout que você acabou de adicionar em shr_product_grid_fragment.xml usando uma tag <include>:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

Crie e execute. A tela inicial ficará assim:

Agora já configuramos o plano de fundo. Vamos trazer de volta o conteúdo que ocultamos antes.

Antes de fazermos qualquer mudança no Shrine neste codelab, o conteúdo principal do produto estava localizado na superfície mais distante. Ao adicionar um pano de fundo, esse conteúdo fica mais destacado porque aparece na frente dele.

Adicionar uma nova camada

Precisamos mostrar a camada da grade de produtos novamente. Remova o atributo android:visibility="gone" do seu NestedScrollView:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Vamos estilizar a camada da frente com um entalhe no canto superior esquerdo. O Material Design se refere a esse tipo de personalização como uma forma. As superfícies do Material Design podem ser mostradas em diferentes formas. As formas dão ênfase e estilo às superfícies e podem ser usadas para expressar o branding. As formas do Material Design podem ter bordas e arestas curvas ou inclinadas para qualquer um dos lados. Elas podem ser simétricas ou irregulares.

Adicionar uma forma

Modifique o formato da grade. Fornecemos um plano de fundo de forma personalizada, mas ele só aparece corretamente no Android Marshmallow e versões mais recentes. Podemos definir o plano de fundo shr_product_grid_background_shape no seu NestedScrollView apenas para o Android Marshmallow e versões mais recentes. Primeiro, adicione um id ao seu NestedScrollView para que possamos fazer referência a ele no código, da seguinte maneira:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:id="@+id/product_grid"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Em seguida, defina o plano de fundo de maneira programática em ProductGridFragment.kt. Adicione a seguinte lógica para definir o plano de fundo no final de onCreateView(), antes da instrução de retorno:

ProductGridFragment.kt

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
       view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}

Por fim, vamos atualizar o recurso de cor productGridBackgroundColor (também usado pelo plano de fundo de forma personalizada) da seguinte maneira:

colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

Crie e execute:

Definimos um formato estilizado personalizado para a superfície principal do Shrine. Devido à elevação da superfície, os usuários podem perceber que há algo por trás da camada branca. Vamos adicionar movimento para que os usuários possam ver o que está lá: o menu.

Movimentos são uma forma de dar vida ao app. O movimento pode ser grande e dramático, sutil e minimalista ou algo intermediário. O tipo de movimento usado precisa ser adequado à situação. Os movimentos aplicados a ações frequentes e repetidas precisam ser sutis para que não desperdicem tempo demais. Outras situações, como a primeira vez que um usuário abre um app, podem ser mais chamativas e ajudar a orientar o usuário sobre o uso do app.

Adicionar um movimento de revelação ao botão de menu

O movimento é a forma na frente se movendo para baixo. Já fornecemos um listener de clique para você que vai realizar a animação de tradução da página em NavigationIconClickListener.kt. Podemos definir esse listener de clique no onCreateView() de ProductGridFragement, na seção responsável por configurar a barra de ferramentas. Adicione a seguinte linha para definir o listener de clique no ícone de menu da barra de ferramentas:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

A seção agora vai ficar assim:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

Crie e execute. Pressione o botão de menu:

Pressionar o ícone do menu de navegação novamente vai ocultá-lo.

Ajustar o movimento da camada em primeiro plano

O movimento é uma ótima maneira de expressar sua marca. Vamos ver como fica a animação de revelação usando uma curva de tempo diferente.

Atualize seu listener de clique em ProductGridFragment.kt para transmitir um interpolador ao listener de clique do ícone de navegação, da seguinte forma:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))

Isso cria um efeito diferente, não é?

A iconografia da marca também se aplica aos ícones conhecidos. Vamos personalizar o ícone de revelação e mesclá-lo ao nosso título para criar um visual exclusivo para a marca.

Mudar o ícone do botão de menu

Mude o botão de menu para mostrar um ícone com um design de diamante. Atualize a barra de ferramentas em shr_product_grid_fragment.xml para usar um novo ícone de marca que fornecemos para você (shr_branded_menu) e defina os atributos app:contentInsetStart e android:padding para que a barra de ferramentas corresponda melhor às especificações do designer:

shr_product_grid_fragment.xml

<androidx.appcompat.widget.Toolbar
   android:id="@+id/app_bar"
   style="@style/Widget.Shrine.Toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:paddingStart="12dp"
   android:paddingLeft="12dp"
   android:paddingEnd="12dp"
   android:paddingRight="12dp"
   app:contentInsetStart="0dp"
   app:navigationIcon="@drawable/shr_branded_menu"
   app:title="@string/shr_app_name" />

Vamos atualizar novamente nosso listener de clique em onCreateView() em ProductGridFragment.kt para incluir elementos gráficos para a barra de ferramentas quando o menu estiver aberto e fechado, da seguinte maneira:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
       activity!!,
       view.product_grid,
       AccelerateDecelerateInterpolator(),
       ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
       ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close icon

Crie e execute:

Legal! Quando o plano de fundo pode ser revelado, o ícone de menu em forma de losango é exibido. Quando o menu pode ser ocultado, um ícone de fechar é exibido.

Nesses quatro codelabs, você viu como usar os componentes do Material Design para criar experiências do usuário únicas e elegantes que expressam a personalidade e o estilo de uma marca.

Para acessar o app MDC 104 concluído, faça o download do codelab finalizado ou confira 104-complete com o Git: git checkout 104-complete.

É possível testar sua versão do app em relação ao app dessa ramificação.

Próximas etapas

Este codelab, o MDC-104, encerra essa sequência de codelabs. Para conhecer mais componentes no MDC-Android, acesse o catálogo de componentes do MDC-Android.

Para um desafio extra com este codelab, modifique o aplicativo Shrine para mudar as imagens de produtos mostradas quando uma categoria é selecionada no menu de plano de fundo.

Para saber como conectar esse app ao Firebase para ter um back-end ativo, consulte o codelab do Firebase para Android.

Este codelab exigiu esforço e tempo normais para ser concluído

Concordo totalmente Concordo Não concordo nem discordo Discordo Discordo totalmente

Quero continuar usando componentes do Material Design no futuro

Concordo totalmente Concordo Não concordo nem discordo Discordo Discordo totalmente