Search code examples
androidandroid-custom-viewcustom-viewavatar

Android: best practice for building a 2D avatar customization


I am trying to create a 2D avatar customizer without using a Game Engine inside my Android app.

I will basically have a PNG image as a base to start with. Then I want to layer other images on top of the base to customize the character.

What would be the best option to create this? I have already created a custom ImageView and overrided the onDraw():

public class AvatarView extends ImageView {

public AvatarView(Context context) {
    super(context);
}

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

public AvatarView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.battle_run_char), 0, 70, null);
    canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.red_cartoon_hat), 70, 0, null);
}

}

This seems very specific by using coordinates. Would there be a better way to achieve this without having to use coordinates?

EDIT:

Here is what I have so far. The guy is a separate image from the red hat.

enter image description here


Solution

  • If you are planning to add on that ImageView dynamically then there is not way to place those images without assigning pixel axis on it

    one problem in your custom class is that dont ever decodeResource within your onDraw method that it will be called multiple times and it will cause a big lag problem, instead create an init method within your AvatarView and decode it, and call that init method in all of your constructor.

    sample:

    public class AvatarView extends ImageView {
    
    private Bitmap body;
    private Bitmap hat;
    public AvatarView(Context context) {
        super(context);
        init();
    }
    
    public AvatarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    public AvatarView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    
    private void init()
    {
      body = getResources(), R.drawable.battle_run_char);
      hat = getResources(), R.drawable.red_cartoon_hat);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(BitmapFactory.decodeResource(body , 0, 70, null);
        canvas.drawBitmap(BitmapFactory.decodeResource(hat , 70, 0, null);
    }
    
    }