A View on which you can freely draw, customizing paint width, alpha and color, and take a screenshot of the content. Useful for note apps, signatures or free hand writing.

Overview

FreeDrawView


A View that let you draw freely on it. You can customize paint width, alpha and color. Can be useful for notes app, signatures or hands-free writing


This View works flawlessly inside Scrolling parents like NestedScrollView. Be careful with lists, you need to restore manually the draw state!


Also supports state-restore on rotation, with custom behaviours like "clear, crop or fitXY" and you can take a screenshot (given to you as a Bitmap Object) of the View drawn content

Changelog

You can try the demo app on google play store.
coming soon

Or see the full video demo on YouTube.
https://youtu.be/ejEdq4lnPjc

Download

Gradle:

compile 'com.rm:freedrawview:1.1.2'

Min SDK version: 9 (Android 2.3)

Usage

To use this library, just add this inside your layout file

    <com.rm.freedrawview.FreeDrawView
                    android:id="@+id/your_id"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/white"

                    app:paintAlpha="255"
                    app:paintColor="@color/black"
                    app:paintWidth="4dp"
                    app:resizeBehaviour="crop"/>

... if you need to use this View's custom xml attributes (shown in a table below or in the example above) do not forget to add this to your root layout

xmlns:app="http://schemas.android.com/apk/res-auto"

And this in your Activity

public class MainActivity extends AppCompatActivity {
    FreeDrawView mSignatureView;

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

        mSignatureView = (FreeDrawView) findViewById(R.id.your_id);

        // Setup the View
        mSignatureView.setPaintColor(Color.BLACK);
        mSignatureView.setPaintWidthPx(getResources.getDimensionPixelSize(R.dimen.paint_width));
        //mSignatureView.setPaintWidthPx(12);
        mSignatureView.setPaintWidthDp(getResources.getDimension(R.dimen.paint_width));
        //mSignatureView.setPaintWidthDp(6);
        mSignatureView.setPaintAlpha(255);// from 0 to 255
        mSignatureView.setResizeBehaviour(ResizeBehaviour.CROP);// Must be one of ResizeBehaviour
                                                                // values;

        // This listener will be notified every time the path done and undone count changes
        mSignatureView.setPathRedoUndoCountChangeListener(new PathRedoUndoCountChangeListener() {
                                  @Override
                                  public void onUndoCountChanged(int undoCount) {
                                      // The undoCount is the number of the paths that can be undone
                                  }

                                  @Override
                                  public void onRedoCountChanged(int redoCount) {
                                      // The redoCount is the number of path removed that can be redrawn
                                  }
                              });
        // This listener will be notified every time a new path has been drawn
        mSignatureView.setOnPathDrawnListener(new PathDrawnListener() {
                    @Override
                    public void onNewPathDrawn() {
                        // The user has finished drawing a path
                    }

                    @Override
                    public void onPathStart() {
                        // The user has started drawing a path
                    }
                });

        // This will take a screenshot of the current drawn content of the view
        mSignatureView.getDrawScreenshot(new FreeDrawView.DrawCreatorListener() {
                                  @Override
                                  public void onDrawCreated(Bitmap draw) {
                                      // The draw Bitmap is the drawn content of the View
                                  }

                                  @Override
                                  public void onDrawCreationError() {
                                      // Something went wrong creating the bitmap, should never
                                      // happen unless the async task has been canceled
                                  }
                              });
    }
}

Save and restore manually the Draw content

From v1.1.0 you can get the current state of the Draw (as a Serializable object) and than restore it:

        FreeDrawSerializableState state = mSignatureView.getCurrentViewStateAsSerializable();// This returns a FreeDrawSerializableState (which implements Serializable)

        // Save this "state" object into a file or keep it where you want

        mSignatureView.restoreStateFromSerializable(state);// Restore the state of the view

        // Now all the previous paths and points have been restored (including the history)

To save this Serializable Object inside a file you can take a look at the class FileHelper


Supported Attributes

FreeDrawView

XML Attribute Java method Description Default value
paintColor setPaintColor(@ColorInt int checked) Set the color of the paint Color.BLACK
paintWidth setPaintWidthPx(@FloatRange(from = 0) float widthPx) Set the width of the paint in pixels 4dp
setPaintWidthDp(float dp) Set the width of the paint in dp 4dp
paintAlpha setPaintAlpha(@IntRange(from = 0, to = 255) int alpha) Set the alpha of the paint 255
resizeBehaviour setResizeBehaviour(ResizeBehaviour newBehaviour) The behaviour of the view every time it is resized (on rotation for example) one of [clear, fitXY, crop] ResizeBehaviour.CROP

Limitations and TODO

  • Multitouch drawing is currently not supported
  • Eraser is not yet implemented
  • Manually restore state is not supported
  • Get the draw screenshot from a FreeDrawSerializableState without adding the view

Also, the FreeDrawView class gives some utility methods to handle path history:

  • public void undoLast()
    This method undo the last drawn segment

  • public void redoLast()
    This method redraw the last undone segment

  • public void undoAll()
    This method undo all the drawn segments, they can be redone one by one or all in one

  • public void redoAll()
    This method redraw all the undone segments

  • public void clearHistory()
    This method removes all the history segments (The one that could be redone)

  • public void clearDraw()
    This method removes all the current drawn segments, without adding them to the history

  • public void clearDrawAndHistory()
    This method removes all the current drawn segments and clears the history

  • public int getPathCount(boolean includeCurrentlyDrawingPath)
    This method returns the current number of segments drawn


You can use:

  • setOnPathDrawnListener(PathDrawnListener listener)
    to be notified every time the user starts or finishes drawing a line.

  • setPathRedoUndoCountChangeListener(PathRedoUndoCountChangeListener listener)
    to be notified when the undo or redo count changes.

And remove them with:

  • removePathDrawnListener()
  • removePathRedoUndoCountChangeListener()

License

Copyright 2017 Riccardo Moro.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Listeners Not Working !

    Listeners Not Working !

    Thanks for this Awesome Work ! I found this two Listeners not working as it has to be ! removePathDrawnListener and setPathRedoUndoCountChangeListener either setting it null manually not making any change.

    mFreeDrawView.setOnPathDrawnListener(null); mFreeDrawView.setPathRedoUndoCountChangeListener(null);

    i want to stop drawing when user done with it on button click event. any ways to do it ?

    opened by hardz 3
  • Error if setOnPathDrawnListener() is not called

    Error if setOnPathDrawnListener() is not called

    Without calling setOnPathDrawnListener() on the FreeDrawView, I get an error:

    java.lang.NullPointerException: Attempt to invoke interface method 'void com.rm.freedrawview.PathDrawnListener.onPathStart()' on a null object reference

    Once I call the method, even while leaving the callbacks empty, everything is fine.

    opened by csbenz 3
  • Make background white for transparent images

    Make background white for transparent images

    When using the FreeDrawView to draw over an image (by setting src) if the image has any transparent pixels then the transparent pixels display as dark grey. By changing the layout to have a white background, the transparent pixels display as white.

    opened by bizzguy 1
  • Possible enchancement

    Possible enchancement

    Could we perhaps make FreeDrawView an ImageView? This could be useful when drawing on pictures. I have tried making FreeDrawView extend ImageView rather than simple view but then setImageBitmap method of ImageView did not work - the background would not change.

    enhancement 
    opened by kal27 1
  • Is it possible to record the path points of line?

    Is it possible to record the path points of line?

    I want to get the path points of lines (ex: [1,1],[2,2],[8,7]....). It seems Lib doesn't have function like that. I try to set setOnTouchListener to canvas. It can return the path point, but canvas can't draw anymore.

    If there any suggestion for this situation?

    I solved this issue by create a new class extent Lib, and modified the onTouch fucntion.

    opened by AmbroseChen 0
  • Set a BitmapShader to the Paint

    Set a BitmapShader to the Paint

    This library is very useful hopefully you can include a shader so you can paint image tiles from a bitmap into the FreeDrawView. Like the example below.

    val shader = BitmapShader(resource,Shader.TileMode.REPEAT,Shader.TileMode.REPEAT) FreeDrawView.paint.setShader(shader)

    opened by Luisalfredrod 0
  • width and height must be > 0

    width and height must be > 0

    When i use getDrawScreenshot() method, i get this error "width and height must be > 0" in here

    FreeDrawView.java:743

    try { mBitmap = Bitmap.createBitmap( mWidth, mHeight, Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mBitmap); } catch (Exception e) { e.printStackTrace(); cancel(true); }

            return null;
    

    can you help me?

    opened by muratonal 0
  •  Set bitmap as background in DrawView

    Set bitmap as background in DrawView

    How can I set the bitmap as a background for DrawView? Suppose I drew something, saved somewhere bitmap or file. I transferred this file to another device and I want to continue drawing my drawing. If I could install a background from a bitmap or file, this would solve the problem, but at the moment it can only be installed from resources.

    opened by SeleznevAM 1
  • Idea for draw mode

    Idea for draw mode

    If you want to disable/enable draw mode do something like this:

    void disableDrawMode(){
    			mFreeDrawView.setFocusableInTouchMode(false);
    
    			mFreeDrawView.setFocusable(false);
    
    			mFreeDrawView.setClickable(false);
    
    			mFreeDrawView.setEnabled(false);
    		}
    		void enableDrawMode(){
    			mFreeDrawView.setFocusableInTouchMode(true);
    
    			mFreeDrawView.setFocusable(true);
    
    			mFreeDrawView.setClickable(true);
    
    			mFreeDrawView.setEnabled(true);
    		}
    
    opened by mpountou 1
Releases(v1.1.2)
Owner
Riccardo Moro
Just an Android developer and enthusiast
Riccardo Moro
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
A view that allows to paint and saves the result as a bitmap

Android Drawable View Sample app: An Android view that allows to paint with a finger in the screen and saves the result as a Bitmap. Importing to your

Christian Panadero 581 Dec 13, 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
A simple library to let you sign (or draw lines) smoothly with your finger into a view and save it.

FingerSignView Introduction FingerSignView is a simple library that lets you finger, or draw lines, smoothly with your finger into a View and save it

Agnaldo Pereira 25 Nov 20, 2022
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
A color picker and a color preference for use in Android applications.

HSV-Alpha Color Picker for Android This library implements a color picker and a color preference for use in Android applications. Features I couldn't

Martin Stone 279 Nov 26, 2022
IconicDroid is a custom Android Drawable which allows to draw icons from several iconic fonts.

IconicDroid IconicDroid is a custom Android Drawable which allows to draw icons from several iconic fonts. Try out the sample application on the Googl

Artur Termenji 387 Nov 20, 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
Rn-scratch-card - React Native Scratch Card which temporarily hides content from user

rn-scratch-card React Native Scratch Card which temporarily hides content from a

Sweatcoin 54 Jan 4, 2023
Android View that displays different content based on its state

MultiStateView Android View that displays different content based on its state. Based off of MeetMe/MultiStateView The four different states the view

Kenny 1.2k Dec 16, 2022
Owasp-top-five - An intro into writing code for greater Android Security

Don’t get stung by OWASP An intro into writing code for greater Android Security

Ed George 5 Feb 13, 2022
Drawing App: A simple drawing application that allows the user to draw using a pencil or using shapes

Drawing-App Drawing app is a simple drawing application that allows the user to

Nada Feteiha 1 Oct 5, 2022
FloatingView can make the target view floating above the anchor view with cool animation

FloatingView FloatingView can make the target view floating above the anchor view with cool animation Links 中文版 README Blog about FloatingView demo.ap

UFreedom 1.8k Dec 27, 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
Useful library to use custom fonts in your android app

EasyFonts A simple and useful android library to use custom fonts in android apps without adding fonts into asset/resource folder.Also by using this l

Vijay Vankhede 419 Sep 9, 2022
A simple launcher which displays all the apps on a RecyclerView trying to KISS

A simple launcher which displays all the apps on a RecyclerView trying to KISS

Alex Allafi 1 Jun 17, 2022
A material Switch with icon animations and color transitions

Material Animated Switch A material Switch with icon animations and color transitions Sample video: Youtube Material Animated Switch video Sample app:

Adrián Lomas 1.2k Dec 29, 2022
🎨 Android colorpicker for getting colors from any images by tapping on the desired color.

ColorPickerView ?? ColorPickerView implements getting HSV colors, ARGB values, Hex color codes from any image drawables or your gallery pictures by ta

Jaewoong Eum 1.3k Dec 26, 2022
SystemUiController - Android Ui color controller (status bar, navigation bar)

SystemUiController Android system ui color controller (status bar, navigation bar) Download implementation "land.sungbin:systemuicontroller:${version}

Ji Sungbin 8 Dec 3, 2022