Getting the reference of added image to the editor

[rohan-317]

suppose i add an image using PhotoEditor.addImage(bitmap) then , how to get the reference of the image(ImageView) that has been added to the editor, suppose, i want to resize the added image to the size of editor then how can i do that ? please provide me some way to do so ! Thank you!

[rohan-317]

i think, if this method would return that View then, maybe that can be solved .

package: ja.burhanrashid52.photoeditor
Class: PhotoEditor
File: PhotoEditor.java

/**
* This will add image on {@link PhotoEditorView} which you drag,rotate and scale using pinch
* if {@link PhotoEditor.Builder#setPinchTextScalable(boolean)} enabled
*
* @param desiredImage bitmap image you want to add
*/
public void addImage(Bitmap desiredImage) {

    //return this imageRootView view and make method return type to View instead of void
    final View imageRootView = getLayout(ViewType.IMAGE);
    final ImageView imageView = imageRootView.findViewById(R.id.imgPhotoEditorImage);
    final FrameLayout frmBorder = imageRootView.findViewById(R.id.frmBorder);
    final ImageView imgClose = imageRootView.findViewById(R.id.imgPhotoEditorClose);

    imageView.setImageBitmap(desiredImage);

    MultiTouchListener multiTouchListener = getMultiTouchListener();
    multiTouchListener.setOnGestureControl(new MultiTouchListener.OnGestureControl() {
        @Override
        public void onClick() {
            boolean isBackgroundVisible = frmBorder.getTag() != null && (boolean) frmBorder.getTag();
            frmBorder.setBackgroundResource(isBackgroundVisible ? 0 : R.drawable.rounded_border_tv);
            imgClose.setVisibility(isBackgroundVisible ? View.GONE : View.VISIBLE);
            frmBorder.setTag(!isBackgroundVisible);
        }

        @Override
        public void onLongClick() {

        }
    });

    imageRootView.setOnTouchListener(multiTouchListener);

    addViewToParent(imageRootView, ViewType.IMAGE);

}

[rohan-317]

I just cloned the repo and tried to do the solution , and its working!, i think we should be able to customize the image we add, so please @burhanrashid52, i request you to update this function!

MainActivity.java

public class MainActivity extends AppCompatActivity {

private PhotoEditor mPhotoEditor;
private PhotoEditorView mPhotoEditorView;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mPhotoEditorView = findViewById(R.id.editor);
    mPhotoEditor = new PhotoEditor.Builder(this, mPhotoEditorView)
            .setPinchTextScalable(true) // set flag to make text scalable when pinch
            //.setDefaultTextTypeface(mTextRobotoTf)
            //.setDefaultEmojiTypeface(mEmojiTypeFace)
            .build(); // build photo editor sdk

    Bitmap icon = BitmapFactory.decodeResource(this.getResources(),
            R.drawable.cap);
    View addedImage = mPhotoEditor.addImage(icon);
    addedImage.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.MATCH_PARENT));
    FrameLayout.LayoutParams broder =new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,FrameLayout.LayoutParams.MATCH_PARENT);
    broder.setMargins(0,0,0,0);
    FrameLayout layout = addedImage.findViewById(R.id.frmBorder);
    layout.setLayoutParams(broder);
    ImageView imageView = addedImage.findViewById(R.id.imgPhotoEditorImage);
    imageView.setLayoutParams(broder);

}

}

PhotoEditor.java

/**
* This will add image on {@link PhotoEditorView} which you drag,rotate and scale using pinch
* if {@link PhotoEditor.Builder#setPinchTextScalable(boolean)} enabled
*
* @param desiredImage bitmap image you want to add
*/

public View addImage(Bitmap desiredImage) {

    final View imageRootView = getLayout(ViewType.IMAGE);
    final ImageView imageView = imageRootView.findViewById(R.id.imgPhotoEditorImage);
    final FrameLayout frmBorder = imageRootView.findViewById(R.id.frmBorder);
    final ImageView imgClose = imageRootView.findViewById(R.id.imgPhotoEditorClose);

    imageView.setImageBitmap(desiredImage);

    MultiTouchListener multiTouchListener = getMultiTouchListener();
    multiTouchListener.setOnGestureControl(new MultiTouchListener.OnGestureControl() {
        @Override
        public void onClick() {
            boolean isBackgroundVisible = frmBorder.getTag() != null && (boolean) frmBorder.getTag();
            frmBorder.setBackgroundResource(isBackgroundVisible ? 0 : R.drawable.rounded_border_tv);
            imgClose.setVisibility(isBackgroundVisible ? View.GONE : View.VISIBLE);
            frmBorder.setTag(!isBackgroundVisible);
        }

        @Override
        public void onLongClick() {

        }
    });

    imageRootView.setOnTouchListener(multiTouchListener);

    addViewToParent(imageRootView, ViewType.IMAGE);

    return imageRootView;
}

[burhanrashid52]

It's good that it's working for you. But the problem I see is exposing internal view to the client. imageRootView is created internally and manage the touch listner, if we return that as a value then the client can break or override the library logic very easily.

[rohan-317]

Okay then, what if we update OnPhotoEditorListener and add parameter "addedView" of type View? could that break library logic?
or maybe Overload addImage Function and give custom parameters like, what should be the width & height for the imageView, and another parameter to set Margin of FrameLayout of ImageView and Framelayout Container (id = "frmBorder")?

public void addImage(Bitmap desiredImage){ /* logic /}
public void addImage(Bitmap desiredImage,int width,int height){ / logic /}
public void addImage(Bitmap desiredImage,int width,int height,int frameMargin){ / logic /}
public void addImage(Bitmap desiredImage,int width,int height,int ImageMargin){ / logic /}
public void addImage(Bitmap desiredImage,int width,int height,int ImageMargin,int frameMargin){ / logic */}

this wouldn't break library logic + we client can have customization to the image we add, what say @burhanrashid52 ?

[burhanrashid52]

So here are the pros and cons of each approach.

1. addView(view: View) method allows for adding view directly.
   1.1 Pros:
   1.1.1 Plain and simple API.
   1.1.1 No configuration overhead on the library.
   1.1.2 Custom views support.
   1.2 Cons:
   1.2.1 We cannot rely on the view. Since it been passed by the client. It can be modified at any time.
   1.2.2 Touch listener and other gestures might not work in CustomView cases.

2. addImage(bitmap:Bitmap,int width,int height...)
   2.1 Pros:
   2.1.1 It fixes the first cons of the above approach.
   2.1.2 More controller of the view we create internally.
   2.2 Cons:
   2.2.1 Bad API design: Number of parameters get increased based on the feature request (This can be avoided by creating a BitmapStyleBuilder similar to what we did in the TextStyleBuilder )