How can I fingerpaint with touch over an image loaded by picasso

Question

I am creating an app that pulls images from urls and puts them into a recyclerview. The user can then access those images and view it fullscreen. This is achieved with Picasso. I would now like the ability to fingerpaint over the image loaded with Picasso with an onTouchEvent or something but not sure how to do it.

This class sets the image to a map_edit_gallery.xml loaded with Picasso:

    public class EditMapImage extends AppCompatActivity {

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.map_edit_gallery);

        checkIntent();


        //Find savebutton
        ImageButton saveMapButton = findViewById(R.id.saveEditImagebutton);

        saveMapButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Toast.makeText(getApplicationContext(),"Saved",Toast.LENGTH_SHORT).show();
            }
        });

    }

    //This will check to see if the intent extras exist and if they do get the extra
    private void checkIntent(){
        if(getIntent().hasExtra("image_url") && getIntent().hasExtra("name_url")){

            String imageUrl = getIntent().getStringExtra("image_url");
            String nameUrl = getIntent().getStringExtra("name_url");

            setMapImage(imageUrl, nameUrl);
        }
    }

    private void setMapImage(String imageUrl, String nameUrl){

        //Set the Text view
        TextView name  = findViewById(R.id.mapNameEditor);
        name.setText(nameUrl);

        //Set the Image
        ImageView imageView = findViewById(R.id.mapEditScreen);

        Picasso.get().load(imageUrl).into(imageView);

        Picasso picasso = Picasso.get();
        DrawToImage myTransformation = new DrawToImage();
        picasso.load(imageUrl).transform(myTransformation).into(imageView);

    }
}

EDIT: This class has allowed me to draw over the loaded image using canvas but cannot figure out how to use touch to draw:

    public class DrawToImage implements Transformation {


    @Override
    public String key() {
        // TODO Auto-generated method stub
        return "drawline";
    }

    public Bitmap transform(Bitmap bitmap) {
        // TODO Auto-generated method stub
        synchronized (DrawToImage.class) {
            if(bitmap == null) {
                return null;
            }
            Bitmap resultBitmap = bitmap.copy(bitmap.getConfig(), true);
            Canvas canvas = new Canvas(resultBitmap);
            Paint paint = new Paint();
            paint.setColor(Color.BLUE);
            paint.setStrokeWidth(10);
            canvas.drawLine(0, resultBitmap.getHeight()/2, resultBitmap.getWidth(), resultBitmap.getHeight()/2, paint);
            bitmap.recycle();
            return resultBitmap;
        }
    }


}

Answer 1

Try using the image selected by the user to set it in a canvas object and draw on the canvas object itself, as opposed to the image. There are plenty of tutorials out there to help you with how to draw on a canvas. This process isn't connected with the Picasso Image Library in any way so I would recommend first getting the image through Picasso, then sending the image into your custom canvas implementation, then returning a bitmap/drawable which you could set into Picasso after editing. There's also plenty of tutorials on how to export an image from the canvas to get your edited image when you need it.

I hope this helped, Panos.