Custom Drawable Alignment

Question

I have created the following Custom Drawable by inheriting from ShapeDrawable as follows:

public class TextDrawable : ShapeDrawable  
{  
	public override void Draw(Canvas canvas)  
	{  
		base.Draw(canvas);  
		Paint textpaint = new Paint() { Color = Application.Context.Resources.GetColor(Resource.Color.Orange, null), TextAlign = Paint.Align.Center, TextSize = 2f * canvas.Height / 3 };  
		textpaint.SetTypeface(Application.Context.Resources.GetFont(Resource.Font.arialfamily));  
		Rect bounds = new Rect();  
		textpaint.GetTextBounds("?", 0, 1, bounds);  
		canvas.DrawRect(0, 0, 20, 20, new Paint() { Color = Application.Context.Resources.GetColor(Resource.Color.White, null) });  
		canvas.DrawText("?", 20 * Application.Context.Resources.DisplayMetrics.Density / 2f, 20 * Application.Context.Resources.DisplayMetrics.Density / 2f, textpaint);  
	}  
}  

I set this as the drawableLeft using the following statement in my OnResume method:

this.chkSolution.SetCompoundDrawables(new TextDrawable(), null, null, null);

This gives me the following:

My goal is to add a drawableLeft to the second CheckBox (the CheckBox with "Solution") in the same place as the one for the first CheckBox (the CheckBox with "Unused"). The drawable for the first CheckBox is a simple ShapeDrawable defined as an XML resource. My goal for the second CheckBox is a white square with a "?" inside it. However, as you can see in the screenshot, this is not what it is currently doing. Some of the things that I am trying to figure out how to do are:

1. Cause the text ("Solution") to be shifted to the right, just like the text of the first CheckBox, so that the text & drawable do not overlap
2. Properly vertically center the drawable. Notice that in the Custom Drawable the canvas.DrawRect statement has 0 as the first 2 parameters, yet it is clearly not aligned at the upper left as I would expect it to be.
3. Properly set the size for canvas.DrawRect This will be a fixed size (the same size that I used in the ShapeDrawable for the first CheckBox, which is 20dp X 20dp)

I would like to be able to use my Custom Drawable in XML resources (rather than adding it programmatically), but I seemed to be getting NullReferenceException(s) and other problems doing that, so for now I am adding it programmatically. What am I doing wrong in my overload of Draw, and how can I fix it?

Answer 1

Hello,​

I add a android:paddingLeft="20dp" to <CheckBox>

Then adjust the potions for TextDrawable like following code.

   public class TextDrawable : ShapeDrawable  
       {  
           public override void Draw(Canvas canvas)  
           {  
               base.Draw(canvas);  
               Paint textpaint = new Paint() { Color = Application.Context.Resources.GetColor(Resource.Color.Orange, null), TextAlign = Paint.Align.Center, TextSize = 2f * canvas.Height / 3 };  
            // I donot have this font,so I remove it   textpaint.SetTypeface(Application.Context.Resources.GetFont(Resource.Font.arialfamily));  
               Rect bounds = new Rect();  
               textpaint.GetTextBounds("?",0, 1, bounds);  
               canvas.DrawRect(-80, 0, -60, 20, new Paint() { Color = Application.Context.Resources.GetColor(Resource.Color.White, null) });  
               canvas.DrawText("?", -40 , 20 * Application.Context.Resources.DisplayMetrics.Density / 2f, textpaint);  
     
              
           }  
       }  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.