Implementando un campo de búsqueda con botón de limpieza en Android

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.

Etiquetas: Android UI EditText RelativeLayout TextWatcher ImageView

Publicado el 6-7 04:47