0

I've followed some forums and I'm lost with this problem:

I have a Custom View that draws 9 circles for me as shown below:

enter image description here

This circles must be an icon to the main one and 8 images for the others and it must be a drawable resource (I have png pictures in on my drawable folder).

How may I proceed to set this drawable images instead of the colors?

This is my actual code:

public class CircleView  extends View {

public static interface IMenuListener{

    public void onMenuClick(MenuCircle item);
}

public static class MenuCircle{
    private int x,y,radius;
    public int id;
    public String text;

}

private Paint mainPaint;
private Paint secondPaint;
private Paint textPaint;
private int radius_main =130;

private int menuInnerPadding = 40;
private int radialCircleRadius = 60;
private int textPadding = 25;
private double startAngle = - Math.PI/2f;
private ArrayList<MenuCircle> elements;
private IMenuListener listener;

public void setListener(IMenuListener listener){
    this.listener = listener;
}
public void clear(){
    elements.clear();
    listener=null;
}
public CircleView(Context context) {
    super(context);
    init();
}

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

public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}
private void init(){
    elements = new ArrayList<>();
}
public void addMenuItem(String text,int id){
    MenuCircle item = new MenuCircle();
    item.id = id;
    item.text=text;
    elements.add(item);

}


@Override
protected void onFinishInflate() {
    super.onFinishInflate();

    mainPaint = new Paint();
    mainPaint.setColor(Color.DKGRAY); //color of main circle
    secondPaint = new Paint();
    secondPaint.setColor(Color.DKGRAY); // color of 8 circles
    textPaint = new Paint();
    textPaint.setColor(Color.BLACK); // text under 8 circles
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int centerX = canvas.getWidth()/2 ;
    int centerY= canvas.getHeight()/2;
    canvas.drawCircle(centerX,centerY,radius_main,mainPaint);

    for(int i=0;i<elements.size();i++){
        double angle =0;
        if(i==0){
            angle = startAngle;
        }else{
            angle = startAngle+(i * ((2 * Math.PI) / elements.size()));
        }
        elements.get(i).x = (int) (centerX + Math.cos(angle)*(radius_main+menuInnerPadding+radialCircleRadius));
        elements.get(i).y = (int) (centerY + Math.sin(angle)*(radius_main+menuInnerPadding+radialCircleRadius));


        canvas.drawCircle( elements.get(i).x,elements.get(i).y,radialCircleRadius,secondPaint);

        float tW = textPaint.measureText(elements.get(i).text);
        canvas.drawText(elements.get(i).text,elements.get(i).x-tW/2,elements.get(i).y+radialCircleRadius+textPadding,textPaint);
    }

}

@Override
public boolean onTouchEvent(MotionEvent event) {

    if(event.getAction()==MotionEvent.ACTION_DOWN){
        for(MenuCircle mc : elements){
            double distance =  Math.hypot(event.getX()-mc.x,event.getY()-mc.y);
            if(distance<= radialCircleRadius){
                //touched
                if(listener!=null)
                    listener.onMenuClick(mc);
                return true;
            }
        }

    }

    return super.onTouchEvent(event);
}

@Override
protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();

}
}
Phani Kumar M
  • 4,564
  • 1
  • 14
  • 26
Diego
  • 11
  • 4
  • https://stackoverflow.com/questions/5176441/drawable-image-on-a-canvas – Dave Thomas Sep 21 '17 at 03:32
  • Thanks Dave. I found a solution doing like this: //canvas.drawCircle(centerX,centerY,radius_main,mainPaint); //change image instead of color Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.camera); Matrix matrix=new Matrix(); matrix.postScale(0.3f, 0.3f); Bitmap dstbmp = Bitmap.createBitmap(bmp,0,0,bmp.getWidth(), bmp.getHeight(),matrix,true); canvas.drawBitmap(dstbmp, centerX-60, centerY-85, null); //change image instead of color – Diego Sep 22 '17 at 00:48
  • Make sure you are doing that bitmap creation outside of your ```onDraw``` function. You'll run into performance issues doing ```createBitmap``` in ```onDraw```. It is something you don't want to be doing 60 times a second. For a "homework assigment" don't worry about it. – Dave Thomas Sep 22 '17 at 15:53

0 Answers0