Criar sombras e recortar visualizações

Teste o Compose

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

Modifier.shadow() →

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:

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 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.