Menú Cerrar

Texto con borde en el canvas de Android

Hasta ahora sólo he escrito sobre cosas relacionadas con la web y sus lenguajes, pero últimamente también ando haciendo cosas para Android y ya toca hablar un poco de ello. Voy a empezar con algo sencillo.

No hay una forma directa establecida para poder escribir texto con borde en el canvas, un método en el que se especifique un parámetro con el color y grosor del borde. La forma de hacerlo es escribir dos veces seguidas el mismo texto con dos «pinceles» Paint. La primera vez que se escribe el texto será del color escogido para el borde y más ancho, para que el segundo texto se escriba más fino y encima. El pincel que se utilizará en la primera vez que se escribe el texto, con canvas.drawText, deberá llevar definido previamente el estilo (setStyle) como Paint.Style.STROKE y el ancho del trazo (setStrokeWidth). En la segunda vez que se escriba el texto el pincel tendrá el estilo Paint.Style.FILL y por supuesto, un color distinto al del primer texto.

El código de onDraw:

    @Override
    public void onDraw(Canvas canvas){

        // Tamaño del texto, calculado según el ancho del canvas
        float textSize=canvas.getWidth()/10;

        // Se intancia el pincel
        Paint pincel=new Paint();

        // Se establece el tamaño del texto
        pincel.setTextSize(textSize);

        // Centrado
        pincel.setTextAlign(Paint.Align.CENTER);

        // El color del borde
        pincel.setColor(Color.WHITE);

        // Ancho del trazo
        pincel.setStrokeWidth(textSize/10);

        // Se establece el estilo necesario
        pincel.setStyle(Paint.Style.STROKE);

        // Fondo
        canvas.drawARGB(255, 150, 0, 0);

        // Primera impresión del texto con el pincel con trazo
        canvas.drawText("Texto con borde", canvas.getWidth() / 2, canvas.getHeight() / 2, pincel);

        // Se cambia el color del pincel
        pincel.setColor(Color.BLACK);

        // Se cambia el estilo para que no lleve trazo
        pincel.setStyle(Paint.Style.FILL);

        // Se dibuja el segundo texto
        canvas.drawText("Texto con borde",canvas.getWidth()/2,canvas.getHeight()/2,pincel);
    }

El pincel puede ser uno que se modifique después de escribir el primer texto o también se pueden preparar dos. Este efecto puede ser opcional según el diseño o en algunos casos obligatorio para textos que se escriban encima de imágenes o formas, cuando el fondo no sea uniforme.