Estructura del diseño XML
Para lograr este efecto, utilizaremos un RelativeLayout que contiene un campo de EditText y un ImageView para el botón de limpieza. El botón solo será visible cuando el campo de búsqueda cotnenga texto.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:paddingBottom="50dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout android:id="@+id/top"
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="@drawable/top_background"
android:layout_height="wrap_content">
<Button android:id="@+id/btnBuscar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:textSize="12sp"
android:textStyle="bold"
android:background="@drawable/search_btn_background"
android:text="Buscar"/>
<RelativeLayout android:id="@+id/rlContenedorBusqueda"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toLeftOf="@id/btnBuscar">
<EditText android:id="@+id/campoBusqueda"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:background="@drawable/search_frame"
android:layout_marginRight="10dp"
android:paddingLeft="32dp"
android:textSize="12sp"
android:hint="Ingrese su búsqueda..."/>
<ImageView android:id="@+id/btnLimpiar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="@drawable/delete"
android:layout_centerInParent="true"
android:paddingRight="20dp"
android:visibility="gone"/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Implementación en Java
En el código Java, implementaremos un TextWatcher para monitorear los cambios en el campo de búsqueda y mostrar u ocultar el botón de limpieza según sea necesario. También configuraremos un OnClickListener para el botón que limpiará el contenido del campo de búsqueda cuando se presione.
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnLimpiar = (ImageView) findViewById(R.id.btnLimpiar);
campoBusqueda = (EditText) findViewById(R.id.campoBusqueda);
btnLimpiar.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
campoBusqueda.setText("");
}
});
campoBusqueda.addTextChangedListener(new TextWatcher() {
public void onTextChanged(CharSequence s, int start, int before, int count) {
// No se requiere implementación aquí
}
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
// No se requiere implementación aquí
}
public void afterTextChanged(Editable s) {
if (s.length() == 0) {
btnLimpiar.setVisibility(View.GONE);
} else {
btnLimpiar.setVisibility(View.VISIBLE);
}
}
});
}
Esta implementación utiliza una imagen .9.png para el botón de limpieza, que permite escalar la imagen manteniendo su calidad visual en diferentes tamaños de pantalla.