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

Overview

MotionViews-Android

alt tag

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.

Comments
  • How to make boundary of TextEntity equal to exact textsize?

    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"?

    question 
    opened by kiaanpillay 4
  • insert image from device

    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???

    question 
    opened by FitApps7 2
  • Out of memory problem

    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.

    question 
    opened by berviantoleo 2
  • Remove button - how to add remove button on corner of text box

    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

    question 
    opened by vrsrohit 2
  • Remove Sticker

    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)

    question 
    opened by ghanatep 2
  • How to Detect Entity

    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 
    opened by superdiazzz 1
  • How to save the position of sticker?

    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.
    question 
    opened by berviantoleo 1
  • Force finishing activity team.uptech.motionviews/.ui.MainActivity

    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

    question 
    opened by ghanatep 1
  • how does the initial width and height of sticker set?

    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!

    question 
    opened by flankechen 1
  • increase and decrease height of Image Entity by click of buttons or seekbar

    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.

    question 
    opened by AnkurJagani 1
  • Library problem

    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

    help wanted 
    opened by azzimfarid 1
  • Add Curve Text

    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

    opened by lavanyaarul 0
  • Adding support for GIFS

    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 .

    opened by KaulSalil 0
  • change selected entity view

    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

    opened by vishalvanpariya 0
  • Reduce speed(Acceleration) of view

    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.

    opened by Hosseinyzr 0
  • Undo and Redo entities

    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

    opened by superdiazzz 0
Owner
Uptech
Design & Development company | Apps for bold ideas
Uptech
A Tinder-like Android library to create the swipe cards effect. You can swipe left or right to like or dislike the content.

Swipecards Travis master: A Tinder-like cards effect as of August 2014. You can swipe left or right to like or dislike the content. The library create

Dionysis Lorentzos 2.3k Dec 9, 2022
This is a sample Android Studio project that shows the necessary code to create a note list widget, And it's an implementation of a lesson on the Pluralsight platform, but with some code improvements

NoteKeeper-Custom-Widgets This is a sample Android Studio project that shows the necessary code to create a note list widget, And it's an implementati

Ibrahim Mushtaha 3 Oct 29, 2022
💳 A quick and easy flip view through which you can create views with two sides like credit cards, poker cards etc.

The article on how this library was created is now published. You can read it on this link here. →. ?? EasyFlipView Built with ❤︎ by Wajahat Karim and

Wajahat Karim 1.3k Dec 14, 2022
Android view that allows the user to create drawings. Customize settings like color, width or tools. Undo or redo actions. Zoom into DrawView and add a background.

DrawView Android view that allows the user to create drawings. Draw anything you like in your Android device from simple view. Customize draw settings

Oscar Gilberto Medina Cruz 839 Dec 28, 2022
Created a Tinder like Card Deck & Captain Train like Toolbar

TinderView Created A Simple and Beautiful Tinder like card deck & Captain Train like toolbar. This is heavily based on AndroidSwipeableCardStack, wenc

Aradh Pillai 328 Jun 18, 2022
A new canvas drawing library for Android. Aims to be the Fabric.js for Android. Supports text, images, and hand/stylus drawing input. The library has a website and API docs, check it out

FabricView - A new canvas drawing library for Android. The library was born as part of a project in SD Hacks (www.sdhacks.io) on October 3rd. It is cu

Antwan Gaggi 1k Dec 13, 2022
MarkdownView is an Android webview with the capablity of loading Markdown text or file and display it as HTML, it uses MarkdownJ and extends Android webview.

About MarkdownView (Markdown For Android) is an Android library that helps you display Markdown text or files (local/remote) as formatted HTML, and st

Feras Alnatsheh 1k Dec 20, 2022
The CustomCalendarView provides an easy and customizable calendar to create a Calendar. It dispaly the days of a month in a grid layout and allows to navigate between months

Custom-Calendar-View To use the CustomCalendarView in your application, you first need to add the library to your application. You can do this by eith

Nilanchala Panigrahy 113 Nov 29, 2022
Dali is an image blur library for Android. It contains several modules for static blurring, live blurring and animations.

Dali Dali is an image blur library for Android. It is easy to use, fast and extensible. Dali contains several modules for either static blurring, live

Patrick Favre-Bulle 1k Dec 1, 2022
TileView is a subclass of android.view.ViewGroup that asynchronously displays, pans and zooms tile-based images. Plugins are available for features like markers, hotspots, and path drawing.

This project isn't maintained anymore. It is now recommended to use https://github.com/peterLaurence/MapView. MapView is maintained by Peter, one of o

Mike Dunn 1.5k Dec 29, 2022
It is a Profile Image View with percentage progress developed in Kotlin.

It is a Profile Image View with percentage progress developed in Kotlin. It is a highly customizable view that offers multiple attributes for creating either dash or continuous progress view around profile image based on your requirements.

smartSense Solutions 16 Jun 23, 2022
ProfilePercentageView - A Profile Image View with percentage progress developed in Kotlin

ProfilePercentageView It is a Profile Image View with percentage progress develo

smartSense Solutions 8 Dec 31, 2021
:balloon: A lightweight popup like tooltips, fully customizable with an arrow and animations.

Balloon ?? A lightweight popup like tooltips, fully customizable with arrow and animations. Including in your project Gradle Add below codes to your r

Jaewoong Eum 2.8k Jan 5, 2023
An Android library supports badge notification like iOS in Samsung, LG, Sony and HTC launchers.

ShortcutBadger: The ShortcutBadger makes your Android App show the count of unread messages as a badge on your App shortcut! Supported launchers: Sony

Leo Lin 7.2k Dec 30, 2022
Takes the input from the Android MediaPlayer and displays visualizations, like in iTunes or WinAmp

Android Visualizer A View subclass that Takes the input from the Android MediaPlayer and displays visualizations, like in iTunes or WinAmp The Visuali

null 798 Dec 22, 2022
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Draggable Panel DEPRECATED. This project is not maintained anymore. Draggable Panel is an Android library created to build a draggable user interface

Pedro Vicente Gómez Sánchez 3k Dec 6, 2022
StandOut lets you easily create floating windows in your Android app.

Coming Soon Meanwhile, checkout the demo video at http://www.youtube.com/watch?v=S3vHjxonOeg Join the conversation at http://forum.xda-developers.com/

Mark Wei 1.2k Dec 12, 2022
Easily create complex recyclerview adapters in android

?? Due to the nature of my job and growing popularity of Jetpack Compose, I lack the motivation to keep this project alive. Recyclerview is one of the

Riyaz Ahamed 823 Jan 6, 2023
💳 CreditCardView is an Android library that allows developers to create the UI which replicates an actual Credit Card.

CreditCard View CreditCardView is an Android library that allows developers to create the UI which replicates an actual Credit Card. Displaying and en

Vinay Gaba 769 Dec 14, 2022