Introduction: Simple view to show a kanji from it's SVG representation and animate the strokes
More: Author   ReportBugs   


Warning: This library was developed to use with KanjiVG files, if you want to use it with another source, you'll need to update the code and change the input rect size to match the size of your input files (or the view will not be able to scale properly).


First, add jitpack in your build.gradle at the end of repositories:

repositories {
    // ...
    maven { url "https://jitpack.io" }

Then, add the library dependency:

compile 'com.github.badoualy:kanji-strokeview:1.0.0'

Now go do some awesome stuff!


Just add the following code to your layout:


You can change the size to whatever you want, it should scale smoothly.

Then in your code, you can use the following methods:

  • setPathData to set the view from another KanjiStrokeView
  • loadPathData to load a list of path data strings like:
  • loadSvg to load an SVG input (string/inputstream/file) (it'll be slower than the above method since it need to parse the entire svg file)

You can customize the view with the following attributes:

name default description
svAutoRun false if true, the animation will start automatically when the view is first drawn. You can also set a delay via the autoRunDelay field. (No attribute yet)
svAnimate true if false, the kanji will not animate and always be drawn fully
svStrokeColor black stroke color of the kanji (still and animated)
svFingerColor primary color color of the circle to display at current finger position when animating stroke
svStrokeLightColor black at 50 opacity color of the background complete shape ("preview")
svStrokeHighlightColor accent color color of an highlighted stroke. You can highlight a stroke via the code by its index
svStrokeWidth 4dp stroke of the paint used to draw the strokes
svFingerRadius 8dp radius of the circle at current finger position when animating
Support Me
About Me
Google+: Trinea trinea
GitHub: Trinea