Há pouco tempo tivemos o lançamento da Android Support Design v28 que foi lançada no dia 21 de Setembro de 2018, esta atualização trouxe algumas mudanças nos componentes que conhecíamos no material design. Abaixo iremos explorar quais são as mudanças que esta API nos trouxe.

Bottom Bar App

Agora temos a presença de uma Barra Inferior chamada Bottom Bar App, facilitando a experiência do usuário comparada a barra de ferramentas padrão. Abaixo código simples de implementação da Bottom Bar App. 
<android.support.design.bottomappbar.BottomAppBar
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="bottom"
   app:backgroundTint="@color/colorPrimary"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
   app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
Como podemos ver na imagem acima, o Bottom Bar inclui uma barra de menu que pode ser adicionada com a linha abaixo. 
bottom_app_bar.replaceMenu (R.menu.main)
Além disso, a Bottom Bar permite que nós anexamos um FAB junto a ele, este pode ser alinhado tanto ao centro quanto a direita, existem algumas propriedades que irá nos ajudar com a personalização da barra.
  • app: fabAlignmentMode: Define que o FAB está anexado na barra inferior, como vimos acima ela pode ser posicionada tanto ao lado direito quanto ao centro.
FAB Center
FAB End
  • app: fabCradleVerticalOffset  - Declara o deslocamento vertical a ser usado para a fab anexada. Por padrão, isso é 0dp:
  • app: backgroundTint  - Propriedade responsável por aplicar uma cor ao plano de fundo da exibição. Se você deseja definir a cor de fundo da vista, isso deve ser usado sobre o atributo android: background. Isso garantirá que o tema da exibição permaneça estável.

Material Button

 
O Material Button é um componente que já nos trás o visual de implementação voltado para o Material Design, ou seja a grande diferença deste botão para os padrões é que este nos permite fácil personalização sem muitas limitações. Para adicionarmos o Material Button, podemos acrescentar o código abaixo. 
<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />
Assim como vimos no Bottom Bar App, o Material Button também trás uma série de atributos interessantes para personalizarmos o estilo.
  • app:icon – Com esta propriedade você poderá facilmente adicionar um ícone no início do botão.
  • app:iconTint – Responsável por colorir o ícone da propriedade anterior.
  • app: iconPadding  - Responsável por aplicar um espaçamento interno da propriedade ícone.
  • app: additionalPaddingLeftForIcon  - Define o preenchimento a ser aplicado à esquerda do ícone em uso no atributo app: icon
  • app: rippleColor  -  Define a cor do efeito ripple do botão (efeito ondulação exibido ao clicar no botão)
  • app: backgroundTint  - Define a cor do background do botão. Se você deseja alterar a cor de fundo do botão, use este atributo em vez de fundo para evitar quebrar o estilo do botão
  • app: backgroundTintMode  -  Define o modo a ser usado para a tonalidade de fundo
  • app: strokeColor  - Define a cor da linha ao redor do botão
  • app: strokeWidth  - Define a largura a ser usada para o linha do botão
  • app: cornerRadius  - Esta propriedade é responsável por definir bordas arredondadas nas extremidades do botão.

Chips

O componente Chips, representa a entidade de um bloco pequeno, como por exemplo uma exibição de contato, como podemos ver na imagem acima. Este componente pode ser organizado em ChipGroup, que podem ser agrupados em uma única linha horizontal, vejamos como funciona sua implementação. Utilizamos o atributo chipText para definir o texto de nosso componente. 
<com.google.android.material.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"/>
Além disso, você tem acesso a várias propriedades para personalização do componente.
  • app: checkable  - Usado para declarar se o chip pode ser alternado como selecionado / não selecionado. Se desativada, a verificação se comportará da mesma maneira que um botão
  • app: chipIcon  - Usado para exibir um ícone dentro do chip
  • app: closeIcon  - Usado para exibir um ícone de fechamento dentro do chip
Chip utilizando chipIcon e closeIcon

Chip Group

Utilizamos o componente Chip Group para garantir que os chips sejam agrupados corretamente.
Agrupando com Chip Group
Para isso, precisamos criar uma estrutura ChipGroup e relacionar o Chip dentro dele, como no exemplo abaixo. 

  <android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="This" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="is" />


</android.support.design.chip.ChipGroup>
Aparentemente, você terá impressão que os Chips estão quase grudados, mas isso é possível personalizar através de algumas propriedades.
  • app: chipSpacing  - Adiciona espaçamento ao eixo horizontal e vertical
  • app: chipSpacingHorizontal  - Adiciona espaçamento ao eixo horizontal
  • app: chipSpacingVertical  - Adiciona espaçamento ao eixo vertical.

Material CardView

Assim como vimos em Material Button, nós também já conhecíamos o CardView de outras versões anteriores, a diferença é que no Material Design atualizado foi disponibilizado o Material CardView que nos permite implementar o CardView já no estilo pré-personalizado. O Material CardView pode ser implementado da seguinte forma. 
<com.google.android.material.card.MaterialCardView
    style="@style/Widget.MaterialComponents.CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/mtrl_card_spacing"
    android:layout_marginTop="@dimen/mtrl_card_spacing"
    android:layout_marginRight="@dimen/mtrl_card_spacing"
    android:minHeight="200dp">

  <!-- conteúdo do card -->

</com.google.android.material.card.MaterialCardView>
Além disso você poderá personalizar o CardView com as seguintes propriedades.
  • app: strokeColor  - Define a cor da linha ao redor do CardView
  • app: strokeWidth  – Define a largura da linha definida anteriormente.

Considerações finais

Vimos que esta atualização, além de trazer uma repaginada ao Material Design, também trouxe facilidade na implementação de alguns componentes como botões e cards, agora é possível alcançar resultados satisfatórios de personalização com poucas linhas de códigos, um grande exemplo disso é que antes era necessário criar um arquivo drawable.xml para arredondar bordas de um botão, e agora já é possível fazer essa personalização diretamente na propriedade cornerRadius. Implementar esses recursos em um novo aplicativo será incrível, mas é interessante lembrar que precisamos de compatibilidade para dispositivos anteriores, portanto é bom ficar atento a biblioteca de suporte.