uptechteam / motionviews-android

Code Guide: How to create Snapchat-like image stickers and text stickers.

MotionViews-Android

Code Guide : How to create Snapchat-like image stickers and text stickers

After spending 2000+ hours and releasing 4+ successful apps working with image transformations, we’ve decided to share our experience with the community.

Task

So the task is pretty simple: add the ability to move, scale and rotate stickers on Android.

Even though it sounds easy, there are a couple of challenges as well. First, there is a zillion of screen sizes of Android devices, and we’d better support them all (or as many as we can). Moreover, it could be the case that you would need to enable users to save/edit their selfies. And if they open their custom works on other devices — the screen size might change, the loaded images might be of a different quality, etc.

As you might have guessed, the task is getting more complicated now.

The solution needs to work on different screen sizes and be independent of the image quality.

In the second part we've also added an ability to create text stickers, update them, and manipulate in the same way as with image stickers.

Solution

MotionViews-Android - is fully functional app that meets the requirements.

Check the Medium articles How to create Snapchat-like stickers for Android and How to create beautiful text stickers for Android about the details of the implementation.

Feel free to use the code for your own purposes.

Check out the app on Google Play.

Play with the online app emulator on Appetize.io.

The video of what we got in the end on the YouTube: Image Stickers and Text Stickers.

motionviews-android's Issues

Change ImageEntity / TextEntity opacity

Hi
Thanks for your wonderful library 👍
My question is, how can I change the opacity of an entity?

Draw on canvas

How difficult would be to add draw freehand on canvas?

Not able to edit the sentence from particular point

Hi,

I want to edit the sentence from particular point and show the cursor, is it possible?

Regards,
R

Remove TextEntity By Drag & Drop

Hey UptechTeam, Hope you are doing well.
Currently, I am using this MotionViews-Android Library in my project. To delete an entity from motionview "motionView.deletedSelectedEntity()" method is called to delete it. But, I get stuck on one mechanism that, I want to delete an entity by dragging it & dropping it on an imageview. I didn't get any position or method to do it.
How can I apply delete(by drag & drop) to this code?
Any help will be appreciable. Thanks in advance.

How to set backgound image?

I want to set background image upon which to add stickers

Add Curve Text

I tried lot to make curve text.but it didnt make it

int radius = 255;
float textWidth = textPaint.measureText(textLayer.getText());
float circumference = (float) (2 * Math.PI * radius); //Длина окружности
float textAngle = textWidth * 360 / circumference; //Угол занимаемый текстом
float startAngle = -90 - (textAngle / 2);
float offset = textPaint.getTextSize();
RectF oval = new RectF(offset, offset, radius3+ offset, radius3 + offset);
// calculate height for the entity, min - Limits.MIN_BITMAP_HEIGHT
int boundsHeight = sl.getHeight();
// create bitmap not smaller than TextLayer.Limits.MIN_BITMAP_HEIGHT
int bmpHeight = (int) (canvasHeight * Math.max(TextLayer.Limits.MIN_BITMAP_HEIGHT,
1.0F * boundsHeight / canvasHeight));

    Bitmap bmp= Bitmap.createBitmap((int)oval.width(), bmpHeight, Bitmap.Config.ARGB_8888);


    Canvas canvas = new Canvas(bmp);
    canvas.save();


    Path pathArc = new Path();
    pathArc.addArc(oval, 250, 270);
    canvas.drawTextOnPath(textLayer.getText(), pathArc, 0, 0, textPaint);

added like this in TextEntity Class.please guide me

How to specify top-left location of the bitmap?

How to make moveTopLeftTo(PointF moveToCenter) from moveCenterTo(PointF moveToCenter) method?
I want to place the bitmap from one canvas with different size to another with different size but I have hard time to do this simple task. when I use moveCenterTo then it makes the specified co-ordinate center of bitmap instead of top-left.

Thank you!

change selected entity view

Hello Sir,
I want to change view of selected item where i an change it?

you provide green border but i want to change it to different color and add some button inside it for delete or other stuff. i can handle those button function but not getting a way to change view of it.

i got where you set the border(team.uptech.motionviews.widget.MotionView line 135) of entity but i want to change whole layout with some button inside it.

Thank You,
Vishal Vanpariya

How to save the position of sticker?

I have set the position some sticker with drag to any position. When I try to lock my screen, the position become to initial position (my initial position in center of screen). How I save the location of some sticker?

• I face this problem when for the first launch activity is landscape, when I lock the screen (I think this make my activity comes portrait), so when I open the activity it change from portrait to landscape.

how does the initial width and height of sticker set?

Thanks for the great code. I am implementing some human face sticker use case and want to set the sticker width to the detected human face width.
Defalut pikachu sticker has a original size 256256, but apperas larger in the screen. I test this in Nexus 6p with a screen size 14402560. Pikachu apperas to occupy 1/3 of the screen width.
How this defalut width is set to 1/3 of the screen width? And how to set the entity's width according to screen pixel width?
Thanks!

MotionEntity release() empty

public void release() {
    // free resources here
}

How to add stroke on TextEntity.?

Remove entity

hay uptech, this is so awesome app for adding sticker/text to our own image. But ,
how can I delete entity ??
since your app doesn't include delete feature. ..

Force finishing activity team.uptech.motionviews/.ui.MainActivity

I am using same sample app, I just added one LaunchActivity and in this activity I have only a start button nothing else, onclick I am starting MainActivity of sample app. 2-3 times if I navigate between these two activities(doing operations like adding text in MainActivity and increase the size). The app is crashing.
team.uptech.motionviews W/OpenGLRenderer: Bitmap too large to be uploaded into a texture (720x17777, max=8192x8192)
Complete logcat:
12-14 11:45:20.450 15995-15995/? W/Conv2QueryExtension: Conv2Query not enabled due to current app [team.uptech.motionviews] not in whitelist
12-14 11:45:22.440 15995-15995/? W/Conv2QueryExtension: Conv2Query not enabled due to current app [team.uptech.motionviews] not in whitelist
12-14 11:45:23.940 15995-15995/? W/Conv2QueryExtension: Conv2Query not enabled due to current app [team.uptech.motionviews] not in whitelist
12-14 11:45:25.770 15995-15995/? W/Conv2QueryExtension: Conv2Query not enabled due to current app [team.uptech.motionviews] not in whitelist
12-14 11:45:30.000 15995-15995/? W/Conv2QueryExtension: Conv2Query not enabled due to current app [team.uptech.motionviews] not in whitelist
12-14 11:45:35.250 15995-15995/? W/Conv2QueryExtension: Conv2Query not enabled due to current app [team.uptech.motionviews] not in whitelist
12-14 11:45:38.030 15995-15995/? W/Conv2QueryExtension: Conv2Query not enabled due to current app [team.uptech.motionviews] not in whitelist
12-14 11:46:02.370 22047-22047/team.uptech.motionviews W/InputEventReceiver: Attempted to finish an input event but the input event receiver has already been disposed.
12-14 11:46:27.480 15995-15995/? W/Conv2QueryExtension: Conv2Query not enabled due to current app [team.uptech.motionviews] not in whitelist
12-14 11:46:36.370 22047-22056/team.uptech.motionviews A/libc: Fatal signal 11 (SIGSEGV) at 0x00000006 (code=1), thread 22056 (FinalizerDaemon)
12-14 11:46:36.370 22047-22054/team.uptech.motionviews A/libc: Fatal signal 11 (SIGSEGV) at 0x00000004 (code=1), thread 22054 (Compiler)
12-14 11:46:37.030 478-22215/? W/ActivityManager: Force finishing activity team.uptech.motionviews/.ui.MainActivity
12-14 11:46:37.100 478-543/? W/InputDispatcher: channel '223e24c8 team.uptech.motionviews/team.uptech.motionviews.ui.LaunchActivity (server)' ~ Consumer closed input channel or an error occurred. events=0x9
12-14 11:46:37.100 478-543/? E/InputDispatcher: channel '223e24c8 team.uptech.motionviews/team.uptech.motionviews.ui.LaunchActivity (server)' ~ Channel is unrecoverably broken and will be disposed!
12-14 11:46:37.120 478-4184/? W/InputDispatcher: Attempted to unregister already unregistered input channel '223e24c8 team.uptech.motionviews/team.uptech.motionviews.ui.LaunchActivity (server)'
12-14 11:46:37.280 22219-22219/team.uptech.motionviews E/IMGSRV: :0: PVRDRMOpen: TP3, ret = 50

fun sticker

Could you realize like snapchat when taking a picture or taking a video ,add that fun sticker?

Create library for this

It would be perfect to create library project for this

How can i get the exact x and y coordinates of a text entity

Save final bitmap

Thank you for great article!
But Can you add save button for merge all layer to one bitmap? (with white background)

Out of memory problem

Hello, I want to try include this motion views to my application. I want to initialize some text sticker first. But, when I start the activity, I have out of memory problem when create bitmap. How I solve this problem? If need stacktrace the exception, I will write it down.

Thank you.

increase and decrease height of Image Entity by click of buttons or seekbar

It would be very nice if we can increase and decrease height of Image Entity by click of buttons or seekbar. like you have done in TextEnity for font size.

Five star for this library is less i think.

Remove padding of text sticker

How can I remove default padding from text sticker

Canvas increase and decrease height of Image Entity by click of buttons or seekbar

The problem is when I resize the height/width of one of the bitmap inside canvas The bitmap also moving aside, But it actually should not move from x y axis while I scroll the seekbar, Thats the problem.

    public ImageEntity(@NonNull Layer layer,
                       @NonNull Bitmap bitmap,
                       @IntRange(from = 1) int canvasWidth,
                       @IntRange(from = 1) int canvasHeight) {
        super(layer, canvasWidth, canvasHeight);

        this.bitmap = bitmap;


        layer.widthSize(bitmap.getWidth());
        layer.heightSize(bitmap.getHeight());

        updateIMGEntity(false);
    }


    public void updateIMGEntity() {
        updateIMGEntity(true);
    }

    private void updateIMGEntity(boolean moveToPreviousCenter) {

        // save previous center
        PointF oldCenter = absoluteCenter();

        Bitmap newBitmap = Bitmap.createScaledBitmap(bitmap, layer.getWidth(),
                layer.getHeight(), false);

        // recycle previous bitmap (if not reused) as soon as possible
        if (bitmap != null && bitmap != newBitmap && !bitmap.isRecycled()) {
            bitmap.recycle();
        }

        this.bitmap = newBitmap;

        float width = bitmap.getWidth();
        float height = bitmap.getHeight();

        @SuppressWarnings("UnnecessaryLocalVariable")
        float widthAspect = 1.0F * canvasWidth / height;

        // for text we always match text width with parent width
        this.holyScale = widthAspect;

        // initial position of the entity
        srcPoints[0] = 0; srcPoints[1] = 0;
        srcPoints[2] = width; srcPoints[3] = 0;
        srcPoints[4] = width; srcPoints[5] = height;
        srcPoints[6] = 0; srcPoints[7] = height;
        srcPoints[8] = 0; srcPoints[8] = 0;

        if (moveToPreviousCenter) {
            // move to previous center
            moveCenterTo(oldCenter);

        }
    }


    @Override
    public void drawContent(@NonNull Canvas canvas, @Nullable Paint drawingPaint) {

        //updateMatrix();
        canvas.drawBitmap(bitmap, matrix, drawingPaint);
        //release();
    }
`

_Originally posted by @Rohanashik in https://github.com/uptechteam/MotionViews-Android/issues/22#issuecomment-430505071_

Remove Sticker

Hi can you pls help me to remove the added textsticker,

entities.remove((TextEntity)entity); will remove textsticker but text is partially deleting(looks like disabled button)

Gestures Not working inside scrollview

While using MotionView inside a scrollview the scrollview gestures not allows to deduct the gestures from Motionview. Due to multiple gestures used in motionview, we couldn't use "dispatchTouchEvent()" in a custom scrollview.

Any optimal solution?

P.S. One of the nicest code i have ever seen.

Undo and Redo entities

Is it possible to perform this action? But why i got java.lang.RuntimeException: Canvas: trying to use a recycled bitmap android.graphics.Bitmap@42f66360

set Background

how to set picture in background(moveable), as photo frame?
I want to use it in inserting photos in static frames, but pics should be moveable.

How to set sticker on predefine location using dp or px?

You already user PointF but i want to use dp or px so,
Is there any method in library to set location of text sticker place at predife location which is in dp or px?

Any ideas on how the database schema should be ?

Thank you guys for this awesome "Library" !

and ideas how to store entities postion, rotation, scale etc... in a MySql database ?

How to specify the location of the bitmap?

I want to place the bitmap according to coordinate shots at the specified location
, then what should I do?
Thank you!

Unlimited Scaling?

Is there a way to keep scaling even when the green border touches the bounds? I want to keep scaling beyond that if possible like on Snapchat or Instagram

Adding support for GIFS

Thanks for the awesome job done on this code , its been a real lifesaver . Wanted to know in case you have any ideas how we can add support for GIFS in these library .

insert image from device

How I can insert image from gallery or camera in place of sticker?

I have code to open gallery or camera that give bitmap, but next I want to move that image in place of sticker, But how is it possible???

Reduce speed(Acceleration) of view

Hello, Thanks for this repo,
is there any way to reduce the acceleration of changes in motionview?
some times its changes is so fast and can't be controlled well.

Move a TextEntity up when keyboard displayed

Any way to move a text Entity up if a keyboard is covering it then move it back down when complete?

How to Detect Entity

Hello guys, i have little problem using this awesome project. I want to make button which only appears when the MotionEntity is selected, and its disappear when no Entity selected

Question: possible to capture content ?

Suppose I've added some texts, images, etc...
And now I want to save it as a bitmap, and send it, how do I do it?

Deleting an entity

Correct way to delete and entity? Do we just remove it from the List? Or do we have to release the memory somehow?

I want copy license

Hello dear I need I copy of license to use

How to make boundary of TextEntity equal to exact textsize?

There is always a bit of a margin on the left and right of Text Entities, not sure about Image enities. Is there a way to remove this so it is basically "Wrap_content"?

still working ?

I imported te project in studio ,
can someone provide me latest dependencies out here

Remove button - how to add remove button on corner of text box

Hello thanx for ur code its very useful for me but i am not able to add a remove button in the text box
i.e, it must dissapear when text box dissapears
please reply ASAP

Shadow or outlined color on text

Hi, I wanna set a narrow outlined color to the text for its better visibility, can any body help me???

Library problem

Hi i tried to compile this library in my gradle 'com.github.QuadFlask:colorpicker:0.0.12' but it is not working. This error keeps popping up:
Error:(27, 13) Failed to resolve: com.github.QuadFlask:colorpicker:0.0.12
Show in File
Show in Project Structure dialog

Add saved entities

Hello. This is an amazing and very helpful tutorial. I have a question. I do save every change fo an image entity in my local database so that i can recreate the entity's matrix. What i want is to add that entity again in the MotionView ad the same scale position and rotation as it was. I am passing the saved Matrix but the bitmap seems to be with the original bitmaps size with no scaling and no rotation.

How to Add new Entity by using matrix ?