Conhecendo Android Design Support v28
Android
0
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/materialdesignfeat-796x398.jpg)
Bottom Bar App
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/mio-design2Fassets2F17DSHC0GjYYNyflJpSB63M9KVZhQDQw2h2Fanatomy-fab-center.png)
<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.
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/mio-design2Fassets2F1jE77atbSz5gSZOwmVjo3dNUs0bLAJhES2Fusage-when-do-300x300.png)
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/mio-design2Fassets2F10Qk_VJHQ3TGxeQZA-R7GRtlNxPHkyI7j2Fanatomy-fab-right.png)
- 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
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/mio-design2Fassets2F1T0UVLDLgvcaAchhRhAT8irKXucOvoNr12Fbuttons-layout-do-06.png)
<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.
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/1__kVv8hWcu-Uo7pRrrwhSSQ.png)
- app:iconTint – Responsável por colorir o ícone da propriedade anterior.
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/1_mJhaV9sAovTdDD5hyLaJLw.png)
- app: iconPadding - Responsável por aplicar um espaçamento interno da propriedade ícone.
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/1_wBBRMPyvoqxjfb8fQT9VLg.png)
- app: additionalPaddingLeftForIcon - Define o preenchimento a ser aplicado à esquerda do ícone em uso no atributo app: icon
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/1_6aKHFx9FdS4v7-7alm9XJQ.png)
- 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
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/1_N5xuMffU2PmN42Z-gfSDJA.png)
- app: cornerRadius - Esta propriedade é responsável por definir bordas arredondadas nas extremidades do botão.
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/1_1VtdQ_0WsFkEqGT9duV3BA.png)
Chips
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/mio-design2Fassets2F1PAItZL1RXY_fWc8ZWFDJKqGRVV4OQwuy2Fpurpose-01-1.png)
<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
![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/mio-design2Fassets2F1VZTQ-Hzb1YUQF9xn1ovXnVkPV_3IVO3o2Fchips-types-input-660x420.png)
Chip Group
Utilizamos o componente Chip Group para garantir que os chips sejam agrupados corretamente.![](http://jamiltondamasceno.com.br/wp-content/uploads/2018/12/mio-design2Fassets2F1NkWb8ogGpf8D6cwXYN8tXTR5hvHWWIB12Fcomposition-05.png)
<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.