O Material Design introduz a elevação para elementos da interface. A elevação ajuda os usuários a entender a importância relativa de cada elemento e focar a atenção na tarefa atual.
A elevação de uma visualização, representada pela propriedade Z, determina a aparência visual da sombra. Visualizações com valores de Z mais altos têm sombras maiores e mais suaves e ocultam visualizações com valores de Z mais baixos. No entanto, o valor Z de uma visualização não afeta o tamanho dela.
As sombras são desenhadas pelo pai da visualização elevada. Eles estão sujeitos ao recorte de visualização padrão e são recortados pelo pai por padrão.
A elevação também é útil para criar animações em que os widgets se elevam temporariamente acima do plano de visualização ao realizar ações.
Para saber mais, consulte Elevação no Material Design (link em inglês).
Atribuir elevação às visualizações
O valor Z para uma visualização tem dois componentes:
- Elevação: o componente estático
- Translação: o componente dinâmico usado para animações.
Z = elevation + translationZ
Os valores Z são medidos em dp (pixels de densidade independente).
Para definir a elevação padrão (em repouso) de uma visualização, use o
atributo android:elevation
no layout XML. Para definir a elevação
de uma visualização no código de uma atividade, use o
método
View.setElevation()
.
Para definir a movimentação de uma visualização, use o
método
View.setTranslationZ()
.
Os métodos
ViewPropertyAnimator.z()
e
ViewPropertyAnimator.translationZ()
permitem animar a elevação das visualizações. Para mais informações, consulte a
referência da API para
ViewPropertyAnimator
e o guia para desenvolvedores sobre animação
da propriedade.
Você também pode usar um
StateListAnimator
para especificar essas animações de maneira declarativa. Isso é especialmente útil nos
casos em que o estado muda as animações de acionamento, como quando o usuário toca em um botão.
Para saber mais, consulte
Animar mudanças de estado
da visualização usando StateListAnimator.
Personalizar sombras e contornos da visualização
Os limites de um drawable de segundo plano de uma visualização determinam a forma padrão da sombra. Contornos representam a forma externa de um objeto gráfico e definem a área de ondulação para o feedback de toque.
Considere a seguinte visualização, que é definida com um drawable de segundo plano:
<TextView android:id="@+id/myview" ... android:elevation="2dp" android:background="@drawable/myrect" />
O drawable do plano de fundo é definido como um retângulo com bordas arredondadas:
<!-- res/drawable/myrect.xml --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#42000000" /> <corners android:radius="5dp" /> </shape>
A visualização lança uma sombra com cantos arredondados, já que o drawable de segundo plano define o contorno da visualização. Fornecer um contorno personalizado modifica a forma padrão de uma sombra da visualização.
Para definir um contorno personalizado para uma visualização no código, faça o seguinte:
- Estenda a classe
ViewOutlineProvider
. - Substitua o
método
getOutline()
. - Atribua o novo fornecedor de contorno à visualização com o
método
View.setOutlineProvider()
.
Você pode criar contornos ovais e retangulares com cantos arredondados usando os
métodos na
classe
Outline
. O fornecedor de contorno padrão para visualizações recebe o contorno do
segundo plano da visualização. Para evitar que uma visualização lance uma sombra, defina o
provedor de contorno dela como null
.
Visualizações de clipes
O recorte de visualizações permite mudar a forma de uma visualização. É possível recortar visualizações para
manter a consistência com outros elementos de design ou para mudar a forma de uma visualização
em resposta à entrada do usuário. É possível recortar uma visualização na área do contorno usando o
método
View.setClipToOutline()
. Somente contornos, círculos e retângulos redondos são compatíveis
com recorte, conforme determinado pelo
método
Outline.canClip()
.
Para recortar uma visualização na forma de um drawable, defina-o como o
segundo plano da visualização, conforme mostrado no exemplo anterior, e chame
o método View.setClipToOutline()
.
O recorte de visualizações é uma operação cara, por isso, não anime a forma que você usa para recortar uma visualização. Para conseguir esse efeito, use a animação de revelação.