O Material Design introduz a elevação em elementos da IU. A elevação ajuda os usuários a entender a importância relativa de cada elemento e concentrar a atenção deles nas tarefas à mão.
A elevação de uma visualização, representada pela propriedade Z, determina a aparência visual das sombras: visualizações com valores de Z mais altos lançam sombras maiores e mais suaves. Visualizações com valores de Z mais altos ocultam visualizações com valores de Z mais baixos, mas o valor de Z de uma visualização não afeta o tamanho dela.
As sombras são desenhadas pelo pai da visualização elevada e, por isso, estão sujeitas a recortes padrão de visualização, recortadas pelo pai por padrão.
A elevação também é útil para criar animações em que os widgets se elevam temporariamente sobre o plano de visualização ao realizar alguma ação.
Para ver mais informações sobre elevação no Material Design, consulte Objetos no espaço 3D (link em inglês).
Atribuir elevação a visualizações
O valor de Z para uma visualização tem dois componentes:
- Elevação: o componente estático.
- Conversão: o componente dinâmico usado para animações.
Z = elevation + translationZ
Figura 1: Sombras para diferentes elevações de visualização.
Para definir a elevação padrão de uma visualização (em repouso), use o atributo android:elevation do 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 conversão de uma visualização, use o método View.setTranslationZ().
Os novos métodos ViewPropertyAnimator.z() e ViewPropertyAnimator.translationZ() permitem animar facilmente a elevação de visualizações. Para ver mais informações, consulte a referência de API para ViewPropertyAnimator e o guia do desenvolvedor Animação de propriedade.
Você também pode usar um StateListAnimator para especificar essas animações de um modo declarativo. Isso é especialmente útil para casos em que o estado muda as animações de acionamento, como quando um usuário pressiona um botão. Para ver mais informações, consulte Mudanças de estado de visualização da animação.
Os valores de Z são medidos em dp (pixels de densidade independente).
Personalizar sombras e contornos de visualizações
Os limites de um drawable do plano de fundo da 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.
Analise esta visualização, 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 bordas arredondadas, uma vez que o drawable de plano de fundo 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 seu código:
- Amplie a classe
ViewOutlineProvider. - Modifique 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 bordas arredondadas usando os métodos na classe Outline. O fornecedor de contorno padrão para visualizações recebe o contorno do plano de fundo da visualização. Para evitar que uma visualização lance uma sombra, defina o fornecedor de contorno dela como null.
Recortar visualizações
Recortar visualizações permite mudar facilmente a forma de uma visualização. Você pode recortar visualizações para ter consistência com outros elementos de design ou para mudar a forma de uma visualização em resposta à interação do usuário.
Você pode recortar uma visualização na área do contorno usando o método View.setClipToOutline() ou o atributo android:clipToOutline. Somente contornos retangulares, circulares e retangulares arredondados 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 drawable como o plano de fundo da visualização (conforme mostrado acima) e chame o método View.setClipToOutline().
O recorte de visualizações é uma operação dispendiosa, por isso, não anime a forma que você usa para recortar uma visualização. Para atingir esse efeito, use a animação Efeito de revelação.