PhotoEditorX

Helps you add Stickers, Texts, Images & Emoji's over images and customize them

Installation

Add the following dependencies in the gradle file of your app module to get started:

Gradle

implementation 'io.github.binishmanandhar23.photoeditorx:photoeditorx:1.0.5'

Maven

<dependency>
  <groupId>io.github.binishmanandhar23.photoeditorx</groupId>
  <artifactId>photoeditorx</artifactId>
  <version>1.0.5</version>
  <type>pom</type>
</dependency>

or if you want to further customize the module, simply import it.

Setting up the View

First we need to add PhotoEditorView in out xml layout

<com.binish.photoeditorx.photoeditor.PhotoEditorView
        android:id="@+id/photoEditorView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:photo_src="@drawable/nepal_wallpaper"/>

We can define our drawable or color resource directly using app:photo_src

Or,

We can set the image programmatically by getting source from PhotoEditorView which will return a ImageView so that we can load image from resources,file or (Picasso/Glide)

val mPhotoEditorView = findViewById(R.id.photoEditorView)
mPhotoEditorView.source.setImageResource(R.drawable.nepal_wallpaper)

Building a PhotoEditor

To use the image editing feature we need to build a PhotoEditor which requires a Context and PhotoEditorView which we have to setup in our xml layout

//Use custom font using latest support library
val mTTCommonBoldTf = ResourcesCompat.getFont(this, R.font.TTCommonBold.otf)

//loading font from assest
val mEmojiTypeFace = Typeface.createFromAsset(getAssets(), "fonts/editFonts/TTCommonBold.otf")

val mPhotoEditor = PhotoEditor.Builder(this, mPhotoEditorView)
         .setPinchTextScalable(true)
         .setDefaultTextTypeface(mTTCommonBoldTf)
         .build()

We can customize the properties in the PhotoEditor as per our requirement

Property	Usage
`setPinchTextScalable()`	set false to disable pinch to zoom on text insertion.By default its true
`setDefaultTextTypeface()`	set default text font to be added on image
`setDefaultEmojiTypeface()`	set default font specifc to add emojis

That's it we are done with setting up our library

Text

We can add the text with inputText and colorCode like this

mPhotoEditor.addText(inputText, colorCode)

It will take default fonts provided in the builder. If we want different fonts for different text we can set typeface with each text like this

mPhotoEditor.addText(mTypeface,inputText, colorCode)

In order to edit the text we need the view, which we will receive in our PhotoEditor callback. This callback will trigger when we Long Press the added text

mPhotoEditor.setOnPhotoEditorListener(object: OnPhotoEditorListener() {
           override fun onEditTextChangeListener(rootView: View?, text: String?, colorCode: Int) {
               
           }
       });

Now we can edit the text with a view like this

mPhotoEditor.editText(rootView, inputText, colorCode)

More Customization
For more further customization of texts it is better to build a TextStyleBuilder() object & pass it to the addText() or editText() along with the text

val textStyle = TextStyleBuilder()
        textStyle.withTextFont(mTTCommonBoldTf)
        textStyle.withTextColor(Color.WHITE)
        textStyle.withTextSize(12f)
        textStyle.withTextAlign(TextView.TEXT_ALIGNMENT_TEXT_START)

For adding strokes and stroke colors:

    textStyle.withStrokeWidthColor(StrokeProperties(strokeWidth,strokeColor))

For adding inner and outer shadows:

    textStyle.withInnerShadow(StrokeProperties(Shadow(r,dx,dy,color), ShadowType.INNER))
    textStyle.withOuterShadow(StrokeProperties(Shadow(r,dx,dy,color), ShadowType.OUTER))

Emoji

We can add the Emoji by PhotoEditor.getEmojis(getActivity()); which will return a list of emojis unicode.

mPhotoEditor.addEmoji(emojiUnicode);

It will take default fonts provided in the builder. If we want different Emoji fonts for different emoji we can set typeface with each Emoji like this

mPhotoEditor.addEmoji(mEmojiTypeface,emojiUnicode);

For more information on Emojis: WIKI

Adding Images/Stickers

We need to provide a Bitmap to add our Images mPhotoEditor.addImage(bitmap);

To add dynamic stickers such as Current Time or Date we need to use
photoEditor.addDynamicSticker(TimeView(requireContext()) for time
or
photoEditor.addDynamicSticker(DateView(requireContext()) for date.
There are two types of design for each of the above view, you can toggle between the types by clicking on the view(Time/Date)
or, to manually change them use
timeView.changeView(TimeView.TimerViewType.TYPE_1 or TimeView.TimerViewType.TYPE_2) for TimeView
dateView.changeView(DateView.DateType.TYPE_1 or DateView.DateType.TYPE_2) for DateView

To change fonts for these views use timeView.changeFont(typeface) for TimeView & dateView.changeFont(typeface) for DateView

Rotation

In order to rotate the image/bitmap use photoEditorView.rotate(rotateBy) Example:

val rotateBy = PhotoEditorView.Rotation.ROTATE_0 or PhotoEditorView.Rotation.ROTATE_90 or PhotoEditorView.Rotation.ROTATE_180 or PhotoEditorView.Rotation.ROTATE_270
photoEditorView.rotate(rotateBy)

Filter Effect

We can apply inbuild filter to the source images using

mPhotoEditor.setFilterEffect(PhotoFilter.BRIGHTNESS);

We can also apply custom effect using Custom.Builder

For more details check Custom Filters

Undo and Redo

   mPhotoEditor.undo()
   mPhotoEditor.redo()

Deleting

For deleting, there is a separate view that needs to be added

<com.binish.photoeditorx.views.DeleteView
        android:id="@+id/viewDelete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="10dp"/>

and then we can use viewDelete.onShowDeleteView(view, isInProgress, rawX, rawY) to bring up the deleteView(it's hidden by default), to hide it viewDelete.onHideDeleteView(photoEditor, view, rawX, rawY)

It is advised to place these on onMoveViewChangeListener & onStopViewChangeListener to get desired effect.
Be sure to check the EXAMPLE on MainActivity for better understanding

Saving

We need to provide a file with callback method when edited image is saved

    mPhotoEditor.saveAsFile(filePath, object: PhotoEditor.OnSaveListener {
                    override fun onSuccess(imagePath: String) {
                       Log.e("PhotoEditor","Image Saved Successfully");
                    }

                    @Override
                    override fun onFailure(exception: Exception) {
                        Log.e("PhotoEditor","Failed to save Image");
                    }
                });

To get a bitmap as a callback use:

    photoEditor.saveAsBitmap(object : OnSaveBitmap {
                override fun onBitmapReady(saveBitmap: Bitmap?) {
                   
                }

                override fun onFailure(e: Exception?) {
                    
                }
            })

Credits

This project is inspired from

Most of the credit goes to burhanrashid52. Don't forget to Thank him at burhanrashid52

Contributions

If you want to contribute or just wanna say Hi!, you can find me at:

winsonmac/PhotoEditorX