Triangle shaped ImageView with drag, scroll & zoom onTouch Android

Question

I've added three different bitmap to one ImageView as shown in picture below. But the problem is that I cannot edit it after the Bitmap is set to ImageView. I want to drag, scroll & zoom the individual Bitmap in the ImageView.

enter image description here

My code for getting the combined bitmap is:

Bitmap setBitmapInTriangleShape(Bitmap bitmap1, Bitmap bitmap2,
        Bitmap bitmap3) {
    /*
     * int[] values= new int[2]; mImageView.getLocationOnScreen(values);
     */
    double screenHeightAspect = 2.5;
    Bitmap drawnBitmap = null;

    bitmap1 = Bitmap.createScaledBitmap(bitmap1, screenWidth,
            (int) (screenHeight / screenHeightAspect), true);
    bitmap2 = Bitmap.createScaledBitmap(bitmap2, screenWidth,
            (int) (screenHeight / screenHeightAspect), true);
    bitmap3 = Bitmap.createScaledBitmap(bitmap3, screenWidth,
            (int) (screenHeight / screenHeightAspect), true);

    try {
        drawnBitmap = Bitmap
                .createBitmap(screenWidth,
                        (int) (screenHeight / screenHeightAspect),
                        Config.ARGB_8888);
        Canvas canvas = new Canvas(drawnBitmap);
        canvas.drawColor(Color.TRANSPARENT);

        // ---------------------------------------------------------------
        Paint paint = new Paint();
        paint.setStrokeWidth(4);
        paint.setColor(getResources().getColor(
                R.color.gray_divider_reg_edit_grid_1));
        paint.setStyle(Paint.Style.FILL_AND_STROKE);

        Path path = new Path();
        BitmapShader bms = new BitmapShader(bitmap1, TileMode.CLAMP,
                TileMode.CLAMP);
        paint.setStyle(Style.FILL);
        paint.setShader(bms);
        // bms.setLocalMatrix(matrix);

        // -----------------=for photo 1-----------------------------
        path.reset();
        path.setFillType(Path.FillType.EVEN_ODD);

        path.lineTo(0, 0);
        path.lineTo((int) (screenWidth * 0.80), 0);
        // path.lineTo(0, 15);
        path.lineTo(0, (int) (screenHeight * 0.8706 / screenHeightAspect));
        path.close();
        canvas.drawPath(path, paint);

        Matrix mt = new Matrix();

        canvas.drawBitmap(bitmap1, new Matrix(), null);
        // -------------------for photo 3-----------------------------
        BitmapShader bmsUo = new BitmapShader(bitmap3, TileMode.CLAMP,
                TileMode.CLAMP);
        paint.setStyle(Style.FILL);
        paint.setShader(bmsUo);
        // bms.setLocalMatrix(matrix);

        path.reset();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo((int) (screenWidth * 0.80), 0);
        path.lineTo((int) (screenWidth * 0.80), 0);
        path.lineTo(screenWidth, 0);
        path.lineTo(screenWidth, (int) (screenHeight / screenHeightAspect));
        // path.lineTo(800,800);
        path.lineTo((int) (screenWidth * 0.88),
                (int) (screenHeight / screenHeightAspect));

        path.lineTo((int) (screenWidth * 0.50),
                (int) (screenHeight * 0.32 / screenHeightAspect));

        path.close();
        canvas.drawPath(path, paint);

        // ---------------------for photo 2-------------------------
        BitmapShader bmsUop = new BitmapShader(bitmap2, TileMode.CLAMP,
                TileMode.CLAMP);
        paint.setStyle(Style.FILL);
        paint.setShader(bmsUop);
        // bmsUop.setLocalMatrix(matrix);
        path.reset();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo((int) (screenWidth * 0.50),
                (int) (screenHeight * 0.32 / screenHeightAspect));
        path.lineTo((int) (screenWidth * 0.50),
                (int) (screenHeight * 0.32 / screenHeightAspect));
        path.lineTo((int) (screenWidth * 0.88),
                (int) (screenHeight / screenHeightAspect));
        path.lineTo(0, (int) (screenHeight / screenHeightAspect));
        path.lineTo(0, (int) (screenHeight / screenHeightAspect * 0.8706));

        path.close();
        canvas.drawPath(path, paint);

    } catch (Exception e) {
        e.printStackTrace();
    }
    return drawnBitmap;

}

Any help is appreciated.

Yes draw this on a canvas and obtain the bitmap and then set the bitmpa to imageView — Triode, Feb 14 '14 at 11:56
You could do that using masks and canvas: http://stackoverflow.com/questions/14801075/android-how-to-apply-mask-on-imageview — M Rajoy, Feb 14 '14 at 11:57
Can you show the sample code for drawing images in triangle shape on canvas? @Rajesh CP — The Heist, Feb 14 '14 at 12:05
@OAEI Did you find any solution for your problem? please share it. — anand, Apr 30 '15 at 10:51
Hello @OAEI Did you find a way to do it? Would be nice to hear what your solution was. — Mindaugas Svirskas, Sep 24 '15 at 12:40
@MindaugasSvirskas Nope. I didn't found any working solution for that. I gave up to find out any solution. — The Heist, Sep 25 '15 at 11:28

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

here is a link for source example of how to mask image

https://github.com/hotveryspicy/MaskImage

ref from this question

Masking(crop) image in frame

EDIT

for individual zoom in and zoom out you want these three bitmaps in different layout (you need to make custom image view ) so try below URL that describe how to make your own custom layout (image view in triangle shape) etc.

https://github.com/thecodepath/android_guides/wiki/Defining-Custom-Views

edited May 23 '17 at 10:28

Community

1
1

answered Feb 14 '14 at 12:09

Hardik

17,179
2
35
40

It is helpful...but not exactly as I want to do...I'm still working to get the exact shape of images. I'll put the code as well, when I'm done. – The Heist Feb 17 '14 at 08:47
I've updated my question and help me if you know about the issue. – The Heist Feb 19 '14 at 08:55

Triangle shaped ImageView with drag, scroll & zoom onTouch Android

1 Answers1

Linked