O feedback de toque no Android é obrigatório sempre que o usuário clica no item ou botão com efeito cascata ao clicar no mesmo, dá confiança ao usuário de que o botão foi clicado para que ele possa aguardar a próxima interação do aplicativo. Portanto, neste artigo, vamos discutir que tipo de ondulação pode ser implementado e onde pode ser usado. Dê uma olhada na imagem a seguir para ter uma ideia sobre a discussão.

Efeito ondulação no botão Android

Etapas para implementar as ondulações do botão (feedbacks de toque) no Android

Etapa 1: Criar um projeto de atividade vazio

Etapa 2: Trabalhar com o arquivo activity_main.xml

  • No layout principal do aplicativo, existem 4 TextViews que foram implementados. um para o feedback de toque padrão com borda, o segundo é para o feedback de toque padrão sem borda, o terceiro é para feedback de toque personalizado com borda, o quarto é para o feedback de toque personalizado sem borda.
  • Invoque o código a seguir para implementar a IU.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--default touch feedback with border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Ripple With Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
    <!--default touch feedback without border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Ripple Without Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
    <!--custom touch feedback with border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:foregroundGravity="bottom"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Custom Ripple With Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
    <!--custom touch feedback without border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Custom Ripple Without Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
</LinearLayout>

IU de saída: 

Efeito ondulação no botão Android

Etapa 3: Ripples padrão no Android

  • A ondulação padrão no Android para os botões ou botões de texto pode ser obtida com as tags:
  • android: background = ”? android: attr / selectableItemBackground”: isso cria um efeito de ondulação com a borda.
  • android: background = ”? android: attr / selectableItemBackgroundBorderless”: isso cria um efeito cascata sem borda.

Observação: essas tags precisam ser definidas em TextView.

  • Para implementar os dois efeitos de ondulação padrão no android, invoque o seguinte código dentro do arquivo activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--default touch feedback with border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Ripple With Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
    <!--default touch feedback without border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Ripple Without Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
    <!--custom touch feedback with border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:foregroundGravity="bottom"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Custom Ripple With Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
    <!--custom touch feedback without border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Custom Ripple Without Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
</LinearLayout>

Saída: Executar no emulador

Etapa 4: adicionar layouts personalizados

  • Eles precisam ser implementados na pasta drawable. Após a implementação, eles precisam ser definidos como plano de fundo para esses botões de texto.
  • Para adicionar os layouts, clique com o botão direito na pasta drawable> novo> Arquivo de recursos Drawable.
  • O primeiro layout é custom_bordered_ripple.xml e invoca o código a seguir dentro dele.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent">
  
    <!--this creates the mask with the ripple effect-->
    <item
        android:id="@+id/mask"
        android:drawable="@android:color/white" />
  
</ripple>
  • O segundo layout é custom_borderless_ripple.xml e invoca o código a seguir.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent">
</ripple>
  • A próxima etapa é invocar esses layouts personalizados como plano de fundo para os botões Ondulação personalizada com borda e Ondulação personalizada sem borda dentro do arquivo activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--default touch feedback with border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Ripple With Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
    <!--default touch feedback without border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Ripple Without Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
    <!--custom touch feedback with border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_bordered_ripple"
        android:clickable="true"
        android:focusable="true"
        android:foregroundGravity="bottom"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Custom Ripple With Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
    <!--custom touch feedback without border-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_borderless_ripple"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="24dp"
        android:text="Custom Ripple Without Border"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
  
</LinearLayout>

Saída: Executar no emulador

Quer um ambiente mais competitivo e acelerado para aprender os fundamentos do Android?
Clique aqui para acessar um guia com curadoria exclusiva de nossos especialistas com o objetivo de torná-lo pronto para a indústria em nenhum momento!