{"id":13396368,"url":"https://github.com/geftimov/android-pathview","last_synced_at":"2025-05-15T05:07:40.040Z","repository":{"id":26092156,"uuid":"29536194","full_name":"geftimov/android-pathview","owner":"geftimov","description":"Android view with both path from constructed path or from svg.","archived":false,"fork":false,"pushed_at":"2022-01-23T05:21:50.000Z","size":1483,"stargazers_count":2911,"open_issues_count":8,"forks_count":513,"subscribers_count":111,"default_branch":"master","last_synced_at":"2025-04-14T08:11:30.428Z","etag":null,"topics":["android","android-pathview","animation","svg"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geftimov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-20T15:21:06.000Z","updated_at":"2025-04-05T18:01:37.000Z","dependencies_parsed_at":"2022-07-28T20:10:02.394Z","dependency_job_id":null,"html_url":"https://github.com/geftimov/android-pathview","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geftimov%2Fandroid-pathview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geftimov%2Fandroid-pathview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geftimov%2Fandroid-pathview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geftimov%2Fandroid-pathview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geftimov","download_url":"https://codeload.github.com/geftimov/android-pathview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-pathview","animation","svg"],"created_at":"2024-07-30T18:00:48.063Z","updated_at":"2025-05-15T05:07:35.027Z","avatar_url":"https://github.com/geftimov.png","language":"Java","readme":"## android-pathview\n\n[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/geftimov/android-pathview?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge) [![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-android--pathview-brightgreen.svg?style=flat)](https://android-arsenal.com/details/1/1421) [![Maven Central](https://maven-badges.herokuapp.com/maven-central/com.eftimoff/android-pathview/badge.svg?style=flat)](https://maven-badges.herokuapp.com/maven-central/com.eftimoff/android-pathview) \n\nYou want to animate svg or normal Paths?\u003cbr\\\u003e\nChange the color, pathWidth or add svg.\u003cbr\\\u003e\nAnimate the \"procentage\" property to make the animation.\n\n### There are two types of paths :\n\n#### 1. From Svg  \n```xml\n\u003ccom.eftimoff.androipathview.PathView\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    android:id=\"@+id/pathView\"\n    android:layout_width=\"150dp\"\n    android:layout_height=\"150dp\"\n    app:pathColor=\"@android:color/white\"\n    app:svg=\"@raw/settings\"\n    app:pathWidth=\"5dp\"/\u003e\n```\n        \nResult \n\n![svg](https://github.com/geftimov/android-pathview/blob/master/art/settings.gif) \n\n#### 2. From Path\n```xml\n\u003ccom.eftimoff.androipathview.PathView\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    android:id=\"@+id/pathView\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    app:pathColor=\"@android:color/white\"\n    app:pathWidth=\"3dp\"/\u003e\n```\n\nIn Code    \n    \n```java\n    final Path path = new Path();\n        path.moveTo(0.0f, 0.0f);\n        path.lineTo(length / 4f, 0.0f);\n        path.lineTo(length, height / 2.0f);\n        path.lineTo(length / 4f, height);\n        path.lineTo(0.0f, height);\n\t    path.lineTo(length * 3f / 4f, height / 2f);\n\t    path.lineTo(0.0f, 0.0f);\n\t    path.close();\n\t\npathView.setPath(path);\n```\n\nResult\n\n![svg](https://github.com/geftimov/android-pathview/blob/master/art/path.gif)\n\n#### Use the animator for parallel animation\n```java\n    pathView.getPathAnimator()\n        .delay(100)\n        .duration(500)\n        .listenerStart(new AnimationListenerStart())\n        .listenerEnd(new AnimationListenerEnd())\n        .interpolator(new AccelerateDecelerateInterpolator())\n        .start();\n```\n\n#### Use the animator for sequential animation\n```java\n    pathView.getSequentialPathAnimator()\n        .delay(100)\n        .duration(500)\n        .listenerStart(new AnimationListenerStart())\n        .listenerEnd(new AnimationListenerEnd())\n        .interpolator(new AccelerateDecelerateInterpolator())\n        .start();\n``` \n#### If you want to use the svg colors.\n```java\n    pathView.useNaturalColors();\n```\n#### If you want to draw the real SVG after the path animation. \nIt is in still in development.\n```java\n    pathView.setFillAfter(true);\n```\n![path](https://github.com/geftimov/android-pathview/blob/master/art/fill-after-resize-new.gif)\n    \n#### TODO\n\n1. Make persistent \"percentage\" field on orientation change.\n\n##### Limitations\n\nWhen working with SVGs you can not WRAP_CONTENT your views.\n\n##### Used in apps\n\n* https://play.google.com/store/apps/details?id=com.eftimoff.fonts\n\nMessage me if you want to be included in this list.\n\n##### Thanks to\n\n* https://github.com/romainguy/road-trip\n* http://www.curious-creature.com/2013/12/21/android-recipe-4-path-tracing/\n* https://github.com/matthewrkula/AnimatedPathView\n\n##### Contributors\n\nI want to update this library and make it better. So any help will be appreciated.\nMake and pull - request and we can discuss it.\n\n##### Download\n```groovy\ndependencies {\n\tcompile 'com.eftimoff:android-pathview:1.0.8@aar'\n}\n```\n##### Changelog\n\n\u003cb\u003e1.0.8\u003c/b\u003e\n\n\t[Fix] Removed not properly used android:allowBackup.\n\n\u003cb\u003e1.0.7\u003c/b\u003e\n\n\t[Feature] Sequential path animation.\n\t[Fix] Use dimensions instead of float for pathWidth.\n\n##### Licence\n\n    Copyright 2016 Georgi Eftimov\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","funding_links":[],"categories":["Index `(light-weight pages)`","Index","Java","Libs","\u003ca name=\"Vector \u0026 SVG \u0026 path-view\"\u003eVector \u0026 SVG \u0026 path-view\u003c/a\u003e"],"sub_categories":["\u003cA NAME=\"Widget\"\u003e\u003c/A\u003eWidget","Personal Blog"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeftimov%2Fandroid-pathview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeftimov%2Fandroid-pathview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeftimov%2Fandroid-pathview/lists"}