Criar sombras e recortar visualizações

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:

  1. Amplie a classe ViewOutlineProvider.
  2. Modifique o método getOutline().
  3. 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.