The text is displayed in a solid rectangle, but does not display above the gradient

Question

I am new to Android development and trying to display a button for a Canvas object in the onDraw method, mostly text over the backfield. This is a good way to get your feet wet with some rendering commands.

I can fill in a solid rectangle and then draw centered text on it, but when I try to fill the gradient rectangle and then draw text over it, the text will not draw.

The code below is exhausted from various examples. Primarily:

• DO_PAINT = 0, DO_GRADIENT = 0 → text renders
• DO_PAINT = 1, DO_GRADIENT = 0 → solid rectangle with text at the top
• DO_PAINT = 0, DO_GRADIENT = 1 → gradient rectangle (without text) !!!

So something in my graphic gradient is interfering with my text rendering. I assume that I am leaving something in a bad state in the Paint object, but I'm not sure which property would be ...

Any ideas or thoughts are greatly appreciated ...

import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Shader;
import android.graphics.Typeface;
import android.view.View;
import android.graphics.Paint;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Canvas;
import android.util.Log;
import android.view.MotionEvent;
import android.app.Activity;

public class cMyView extends View
{
    public cMyView(Context context, Activity owner_activity)
    {
        super(context);
    }

    final Paint m_paint = new Paint();
    public String m_Text = "Button";
    private final Rect textBounds = new Rect(); 
    public Typeface m_TypeFace = Typeface.create("Arial",Typeface.NORMAL);
    public int m_TextColor = Color.argb(255,0,0,0);
    public int m_TextSize = 32;

    @Override
    protected void onDraw(Canvas canvas) {

        Rect m_Bounds = new Rect(100,100,500,200);
        boolean DO_PAINT = false;
        boolean DO_GRADIENT = true;


    if ( DO_PAINT) {
        m_paint.setStyle(Paint.Style.FILL);
        m_paint.setColor(Color.GREEN);
        canvas.drawRect(m_Bounds, m_paint);
    }

    if (DO_GRADIENT) {
        m_paint.setShader(new LinearGradient(0, m_Bounds.top, 0, m_Bounds.bottom, Color.BLACK, Color.WHITE, Shader.TileMode.MIRROR));
        canvas.drawRect(m_Bounds.left, m_Bounds.top, m_Bounds.right, m_Bounds.bottom, m_paint);
    }

    m_paint.setColor(m_TextColor);
    m_paint.setTextSize(m_TextSize);
    m_paint.setTypeface(m_TypeFace);

    m_paint.getTextBounds(m_Text, 0, m_Text.length(), textBounds);

    double x = m_Bounds.left + m_Bounds.width()/2  - textBounds.exactCenterX();
    double y = m_Bounds.top  + m_Bounds.height()/2 - textBounds.exactCenterY();

    canvas.drawText(m_Text, (float) x, (float) y, m_paint);

}

}

Answer 1

Just add another Paint for the text, it worked for me, and I found the reason, if you comment on the 2nd line in the case of DO_GRADIENT (in your code), then you will see that the text is gradient, it means that it draws, but has the same gradient as the background becomes invisible.

public class CustomView extends View {
public CustomView(Context context) {
    super(context);
}

public CustomView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

final Paint m_paint = new Paint();
public String m_Text = "Button";
private final Rect textBounds = new Rect();
public Typeface m_TypeFace = Typeface.create("Arial",Typeface.NORMAL);
public int m_TextColor = Color.argb(255, 0, 0, 0);
public int m_TextSize = 32;
private final Paint textPaint = new Paint();

@Override
protected void onDraw(Canvas canvas) {

    Rect m_Bounds = new Rect(100,100,500,200);
    boolean DO_PAINT = true;
    boolean DO_GRADIENT = true;


    if ( DO_PAINT) {
        m_paint.setStyle(Paint.Style.FILL);
        m_paint.setColor(Color.GREEN);
        canvas.drawRect(m_Bounds, m_paint);
    }

    if (DO_GRADIENT) {
        m_paint.setShader(new LinearGradient(0, m_Bounds.top, 0, m_Bounds.bottom, Color.BLACK, Color.WHITE, Shader.TileMode.MIRROR));
        canvas.drawRect(m_Bounds.left, m_Bounds.top, m_Bounds.right, m_Bounds.bottom, m_paint);
    }

    m_paint.setColor(m_TextColor);
    m_paint.setTextSize(m_TextSize);
    m_paint.setTypeface(m_TypeFace);

    m_paint.getTextBounds(m_Text, 0, m_Text.length(), textBounds);

    double x = m_Bounds.left + m_Bounds.width()/2  - textBounds.exactCenterX();
    double y = m_Bounds.top  + m_Bounds.height()/2 - textBounds.exactCenterY();

    textPaint.setColor(m_TextColor);
    textPaint.setTextSize(m_TextSize);
    textPaint.setTypeface(m_TypeFace);
    canvas.drawText(m_Text, (float) x, (float) y, textPaint);

}