Criar sombras e recortar visualizações

Experimente trabalhar com o Compose

O Jetpack Compose é o kit de ferramentas de UI recomendado para Android. Aprenda a trabalhar com temas no Compose.

Modifier.shadow() →

O Material Design introduz a elevação em elementos da interface. A elevação ajuda os usuários a entender a importância relativa de cada elemento e concentrar 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 Z mais altos lançam sombras maiores e mais suaves, além de ocultar visualizações com valores 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. Elas estão sujeitas a recortes padrão de visualização e são recortadas pelo elemento 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 mais informações, consulte Elevação no Material Design.

Atribuir elevação às visualizações

O valor Z para uma visualização tem dois componentes:

• Elevação: o componente estático
• Tradução: o componente dinâmico usado para animações

Z = elevation + translationZ

Os valores de Z são medidos em dp (pixels de densidade independente).

Para definir a elevação padrão de uma visualização (em repouso), 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 conversã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 de 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 as mudanças de estado acionam animações, como quando o usuário toca em um botão. Para mais informações, consulte Animar mudanças de estado de visualização com o StateListAnimator.

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.

Considere a seguinte 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, já 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, faça o seguinte:

1. Estenda a classe ViewOutlineProvider.
2. Substitua 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.

Visualizações de clipes

Com o recorte de visualizações, é possível mudar 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(). 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 no exemplo anterior, 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 de revelação.