Skip to content
[AndroidLib] Simple View to draw lines, circles or text labels
Kotlin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gradle/wrapper
simplepaperview-example
simplepaperview
.gitignore
LICENSE
README.md
build.gradle
demo.gif
dependencies.gradle
gradle.properties
gradlew
gradlew.bat
settings.gradle

README.md

SimplePaperView

License Platform API Download

Presentation

Demo

This is the source code of an Android library: -=:[ SimplePaperView ]:=-
Simple View to draw lines, circles or text labels


Why would you need it?

Have you ever tried to build your own, simple, custom view?
Saying "it's a pain in the neck" is an euphemism!

If you just need to draw a graph with some lines, basic shapes and labels all around... SimplePaperView takes care of anything:

  • draws on canvas
  • applies proper translations
  • handles onMeasure() method
  • gives you the choice to invert the Y axis (like in classical cartesian system)
  • considers padding, both programmatically and via layout

In this way you can put your effort on what you really care: create lines, circles, labels and beautify your view!


How to use it?

Make sure to include the library in your app's build.gradle:

    implementation 'com.lukelorusso:simplepaperview:1.1.2'

Add the view to your layout:

<com.lukelorusso.simplepaperview.SimplePaperView
        android:id="@+id/mainSimplePaperView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

maybe add some padding or background color:

        ...
        android:background="@color/paperBackground"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        ...

Let's move to the code!
If you want to invert Y axis just:

mySimplePaperView.invertY = true

to create a lines:

val line = SimplePaperView.Line(
    200F, // starting x position
    200F, // starting y position
    400F, // destination x position
    0F, // destination y position
    Color.GREEN, // the color
    8F // the weight of this line
)

Dimensions may be in pixels or dp: you choose!

For a circle:

val circle = SimplePaperView.Circle(
    110F, // x position
    100F, // y position
    25F, // radius position
    Color.BLUE // the color
)

Let's create a text label:

val label = SimplePaperView.TextLabel(
    "your text",
    18F, // text size
    110F, // x position
    50F, // y position
    ContextCompat.getColor(this, R.color.textLabel), // text color
    false, // if you want to center the text horizontally on the x point, set it true! 
    ResourcesCompat.getFont(this, R.font.roboto_italic) // optionally a custom font
)

Now that you have all your items, you can draw one of them:

mySimplePaperView.drawInDp(line)

or

mySimplePaperView.drawInPx(line)

If you need to add multiple items and draw them together at the end, you can:

mySimplePaperView.drawInDp(circle, false) // we invoke the choice to NOT invalidate the view -> false
mySimplePaperView.drawInDp(label, true) // now we want to invalidate (redraw) the view -> true

Anyway, to simplify your life you may want to:

mySimplePaperView.drawInDp( // or in px :)
    listOf(line, circle, label)
)

Do you need a listener when your objects are all drawn?

mainSimplePaperView.setOnDrawListener { Log.d("SimplePaperView", "all drawn!") }

Don't you like your drawing? Just clear the paper:

mySimplePaperView.clearPaper()

More shapes coming soon! 😎


Explore!

Feel free to checkout and launch the example app 🎡


Real life applications

CalendarTrendView


Copyright

Make with 💚 by Luca Lorusso, licensed under Apache License 2.0

You can’t perform that action at this time.