Efeito ondulação no botão Android
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.
Etapas para implementar as ondulações do botão (feedbacks de toque) no Android
Etapa 1: Criar um projeto de atividade vazio
- Crie um projeto de atividade do Android Studio vazio. Consulte Android | Como criar / iniciar um novo projeto no Android Studio? para saber como criar um projeto Android Studio de atividade vazia.
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:
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
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva