Android: drawText not showing up over draw

Question

This is my first Android App and I'm running into some difficulty with drawText(). I have been self-learning Android programming though Mario Zechner's Beginning Android Games. I am adapting the code he uses for the Mr. Nom game in his book to create my own game. This is a color learning game in which the user taps on a grid of colors. I am able to successfully draw the color grid and a space showing the color the user is to "find" using graphics.drawRect(), and a couple of other graphical assets using graphics.drawPixmap(). I am trying to put the name of each color over top of each color filled rectangle. I have thrown in an arbitrary line of text toward the bottom of the code as follows:

p.setTypeface(Typeface.SERIF);
p.setTextSize(100);
p.setColor(Color.WHITE);
p.setStyle(Style.FILL);
canvas.drawPaint(p);
canvas.drawText("RED",120, 120, p);

Reading similar quesitons I believe my issue is that I'm not properly telling it to draw to the same screen as the rest of the graphical elements. I'm sorry if I'm not being clear - again this is my first project. Please let me know what other information you might need in helping me. Thank you for your time and consideration!

Below is the rest of the java code used:

package com.lilyandrosieshow.colors;


import java.util.List;
import java.util.Random;

import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Canvas;
import android.graphics.Typeface;
import android.graphics.Paint.Style;


import com.badlogic.androidgames.framework.Game;
import com.badlogic.androidgames.framework.Graphics;
import com.badlogic.androidgames.framework.Input.TouchEvent;
import com.badlogic.androidgames.framework.Screen;
import com.badlogic.androidgames.framework.Sound;
import com.lilyandrosieshow.colors.ColorGrid;

public class GameScreen extends Screen {

    Random random = new Random();
    World world;
    ColorGrid colorGrid = new ColorGrid();
    Canvas canvas = new Canvas();
    Paint p = new Paint();

    static Sound[] colorSoundL = { Assets.lred, Assets.lorange, Assets.lyellow, Assets.lgreen, 
                                   Assets.lblue, Assets.lpurple, Assets.lbrown, Assets.lgrey, 
                                   Assets.lblack, Assets.lpink, Assets.lcyan, Assets.lwhite };
    static Sound[] colorSoundR = { Assets.rred, Assets.rorange, Assets.ryellow, Assets.rgreen, 
                                   Assets.rblue, Assets.rpurple, Assets.rbrown, Assets.rgrey, 
                                   Assets.rblack, Assets.rpink, Assets.rcyan, Assets.rwhite };
    static Sound[] correct1 = { Assets.correct1, Assets.correct2, Assets.correct3, Assets.correct4, Assets.correct5 };
    static Sound[] correct2 = { Assets.correcta, Assets.correctb, Assets.correctc, Assets.correctd, Assets.correcte };
    static Sound[] wrong1 = {Assets.wrong1, Assets.wrong2, Assets.wrong3, Assets.wrong4, Assets.wrong5 };
    static Sound[] wrong2 = {Assets.wronga, Assets.wrongb, Assets.wrongc, Assets.wrongd, Assets.wronge };
    static Sound[] ask = {Assets.ask1, Assets.ask2, Assets.ask3, Assets.ask4, Assets.ask5 };
    static Sound[] repeat = { Assets.again1, Assets.again2, Assets.again3, Assets.again4, Assets.again5 };

    int row = -1;
    int column = -1;

    public GameScreen(Game game) {
        super(game);
        this.world = new World();
    }

    @Override
    public void update(float deltaTime) {
        List<TouchEvent> touchEvents = game.getInput().getTouchEvents();
        int len = touchEvents.size();

        for (int i = 0; i < len; i++) {
            TouchEvent event = touchEvents.get(i);

            // Color Touched
            if (event.type == TouchEvent.TOUCH_UP && 
                    event.x >= 0 && event.x  <= 320 && event.y >= 0 && event.y <= 240) {

                for (int j = 1; j <= 4; j++){
                    if (event.x < (j*80)) {
                        column = j;
                        break;
                    }
                }
                for (int j = 1; j <= 3; j++){
                    if (event.y < (j*80)) {
                        row = j;
                        break;
                    }
                }

                updateColorTouched(column, row);

                if (world.colorTouched.x == world.colorWanted.x && world.colorTouched.y == world.colorWanted.y) {
                    correct2[new Random().nextInt(5)].play(1);
                    if (world.whichHead == World.WhichHead.LILY) colorSoundL[world.colorTouched.id].play(1);
                    if (world.whichHead == World.WhichHead.ROSIE) colorSoundR[world.colorTouched.id].play(1);
                    //world.colorTouched.s.play(1);
                    world.colorWanted = colorGrid.squares.get(random.nextInt(12));
                    //Assets.ask1.play(1);
                    //colorSet[colorWanted-1].play(1);
                } else {
                    wrong2[new Random().nextInt(5)].play(1);
                    //colorSet[colorTouched-1].play(1);
                }
            }
            // A Head Was Touched
            if (event.type == TouchEvent.TOUCH_UP && event.y > 240 && event.y <= 480){
                if (event.x > 0 && event.x < 160) world.changeVoice(World.WhichHead.LILY);
                if (event.x > 161 && event.x < 320) world.changeVoice(World.WhichHead.ROSIE);
            }
        }
    }


    @Override
    public void present(float deltaTime) { // Draw everything to the screen here
            Graphics g = game.getGraphics();
            g.drawRect(0, 0, g.getWidth(), g.getHeight(), Color.rgb(75, 75, 75));
            g.drawPixmap(Assets.findthis, 5, 245);
            g.drawRect(165, 245, 150, 70, Color.rgb(world.colorWanted.r,
                    world.colorWanted.g,
                    world.colorWanted.b)); 
            g.drawPixmap(Assets.lilyheadopen, 5, 325, 5, 5, 155, 155);
            g.drawPixmap(Assets.rosieheadopen, 165, 325, 5, 5, 155, 155);
            // Draws the grid
            for (int i = 0; i < 12; i++) {
                g.drawRect((
                          (world.colorGrid.squares.get(i).x-1)*80),
                          (world.colorGrid.squares.get(i).y-1)*80,
                           80,
                           80, 
                           Color.rgb(world.colorGrid.squares.get(i).r, world.colorGrid.squares.get(i).g, world.colorGrid.squares.get(i).b));
                // ************* DRAW TEXT NAMES HERE ********************
                p.setTypeface(Typeface.SERIF);
                p.setTextSize(100);
                p.setColor(Color.WHITE);
                p.setStyle(Style.FILL);
                canvas.drawPaint(p);
                canvas.drawText("RED",120, 120, p);
            }
    }

    public void updateColorTouched(int x, int y){
        for (int i = 1; i <= 12; i++) {
            if (x == world.colorGrid.squares.get(i-1).x && y == world.colorGrid.squares.get(i-1).y){
                world.colorTouched = world.colorGrid.squares.get(i-1);
                break;
            }
        }
    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void dispose() {

    }

}

Answer 1

Rather than drawing to a Canvas object that doesn't get used anywhere, you'll probably want to extend the Graphics interface with a drawText(...) method. This would be analogue to all other draw calls that are defined in Graphics and implemented in AndroidGraphics.

To help you on your way:

Add to Graphics.java:

public void drawText(String text, float x, float y, Paint p);

Add to AndroidGraphics.java:

@Override public void drawText(String text, float x, float y, Paint p) {
    paint.set(p);
    canvas.drawText(text, x, y, paint);
}

If you need any of the other drawText(...) overloads that are available in Android's Canvas class, you can repeat the same steps as outlined above for those.

Answer 2

try this:

p.setTypeface(Typeface.SERIF);
            p.setTextSize(100);
            p.setColor(Color.WHITE);
            p.setStyle(Style.FILL);
Bitmap bitmap = Bitmap.createBitmap(200,200,Bitmap.Config.ARGB_8888);
canvas = new Canvas(bitmap);
            //canvas.drawPaint(p);
            canvas.drawText("RED",120, 120, p);
g.drawPixmap(new AndroidPixmap(bitmap,PixmapFormat.ARG_8888),839,282);//your actual
 //coordinates instead of 839,282 though