{"id":15131541,"url":"https://github.com/tarek360/richpath","last_synced_at":"2026-01-14T04:26:41.832Z","repository":{"id":45726542,"uuid":"96518561","full_name":"tarek360/RichPath","owner":"tarek360","description":"💪 Rich Android Path. 🤡 Draw as you want. 🎉 Animate much as you can.","archived":true,"fork":false,"pushed_at":"2021-10-08T09:59:51.000Z","size":2967,"stargazers_count":2337,"open_issues_count":30,"forks_count":257,"subscribers_count":58,"default_branch":"develop","last_synced_at":"2025-01-01T14:26:39.585Z","etag":null,"topics":["android","animation","icons","path","path-animation","svg","vector","vector-drawable"],"latest_commit_sha":null,"homepage":"https://twitter.com/a_tarek360","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tarek360.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://www.paypal.me/wahba360"]}},"created_at":"2017-07-07T08:43:52.000Z","updated_at":"2024-12-30T11:25:55.000Z","dependencies_parsed_at":"2022-09-22T02:52:29.258Z","dependency_job_id":null,"html_url":"https://github.com/tarek360/RichPath","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarek360%2FRichPath","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarek360%2FRichPath/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarek360%2FRichPath/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarek360%2FRichPath/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tarek360","download_url":"https://codeload.github.com/tarek360/RichPath/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234575211,"owners_count":18854924,"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","animation","icons","path","path-animation","svg","vector","vector-drawable"],"created_at":"2024-09-26T03:43:06.244Z","updated_at":"2025-09-28T23:32:05.058Z","avatar_url":"https://github.com/tarek360.png","language":"Kotlin","readme":"## *** Library maintenance is paused until further notice! ***\n\n\n\n\u003cimg src=\"/screenshots/header.gif\" width=\"400\"\u003e\n\u003cimg src=\"/screenshots/samples.gif\" align=\"right\" width=\"120\"\u003e\n\n[![CircleCI](https://circleci.com/gh/tarek360/RichPath.svg?style=svg)](https://circleci.com/gh/tarek360/RichPath)\n[![Release](https://jitpack.io/v/tarek360/RichPath.svg)](https://jitpack.io/#tarek360/RichPath) ![API](https://img.shields.io/badge/API-14%2B-brightgreen.svg?style=flat) [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=https://github.com/tarek360/RichPath)\n\n💪 Rich Android Path.     🤡 Draw as you want.    🎉 Animate much as you can.\n\n### Download sample app:\n\u003ca href=\"https://play.google.com/store/apps/details?id=com.pathanimator.sample\"\u003e\n\u003cimg src=\"https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png\" width=\"220\"\u003e\n\u003c/a\u003e\n\n### Features\n\n- **Full Animation Control on Paths and VectorDrawables:**\nAnimate any attribute in a specific path in the VectorDrawable\n\n`fillColor`, `strokeColor`, `strokeAlpha`, `fillAlpha`, `size`, `width`, `height`, `scale`, `scaleX`, `scaleY`, `rotation`, `translationX`, `translationY`, `trimPathStart`, `trimPathEnd`, `trimPathOffset`.\n\n- **Path morphing:**\n\n\u003cimg src=\"/screenshots/animal_path_morphing.gif\" width=\"250\"\u003e\n\n```Java\nRichPathAnimator.animate(richPath)\n       .pathData(pathData1, pathData2, ...)\n       .start();\n```\n\n## Just 3 Steps to Animate any path.\n\n#### 1. In your layout.\n```xml\n    \u003ccom.richpath.RichPathView\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        app:vector=\"@drawable/vector_drawable\" /\u003e\n```\n\n#### 2. Find your richPath.\n ```java\n // by path name\nRichPath richPath = richPathView.findRichPathByName(\"path_name\");\n// or if it contains one path\nRichPath richPath = richPathView.findFirstRichPath();\n// or by index\nRichPath richPath = richPathView.findRichPathByIndex(0);\n```\n\n#### 3. Use the RichPathAnimator to animate your richPath.\n ```java\nRichPathAnimator.animate(richPath)\n        .trimPathEnd(value1, value2, ...)\n        .fillColor(value1, value2, ...)\n        .start();\n```\n\n## Example\n\n#### notification icon vector drawable\n\u003cimg src=\"/screenshots/ic_notifications.png\" align=\"right\" width=\"120\"\u003e\n\n```xml\n\u003cvector xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    android:width=\"32dp\"\n    android:height=\"32dp\"\n    android:viewportHeight=\"32.0\"\n    android:viewportWidth=\"32.0\"\u003e\n\n    \u003cgroup\n        android:pivotX=\"16\"\n        android:pivotY=\"6.25\"\u003e\n        \u003cpath\n            android:name=\"top\"\n            android:fillColor=\"#FFF7F7F7\"\n            android:pathData=\"M22,19.8v-5c0-3.1-1.6-5.6-4.5-6.3V7.8c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v0.7c-2.9,0.7-4.5,3.2-4.5,6.3v5l-2,2v1h16v-1L22,19.8z\" /\u003e\n\n        \u003cpath\n            android:name=\"bottom\"\n            android:fillColor=\"#FFF7F7F7\"\n            android:pathData=\"M16,25.8c1.1,0,2-0.9,2-2h-4C14,24.9,14.9,25.8,16,25.8z\" /\u003e\n    \u003c/group\u003e\n\u003c/vector\u003e\n```\n\n#### XML\n```xml\n    \u003ccom.richpath.RichPathView\n        android:id=\"@+id/ic_notifications\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        app:vector=\"@drawable/ic_notifications\" /\u003e\n```\n\n#### Java\n\u003cimg src=\"/screenshots/ic_notifications.gif\" align=\"right\" width=\"120\"\u003e\n\n```java\nRichPath top = notificationsRichPathView.findRichPathByName(\"top\");\nRichPath bottom = notificationsRichPathView.findRichPathByName(\"bottom\");\n\nRichPathAnimator.animate(top)\n        .interpolator(new DecelerateInterpolator())\n        .rotation(0, 20, -20, 10, -10, 5, -5, 2, -2, 0)\n        .duration(4000)\n        .andAnimate(bottom)\n        .interpolator(new DecelerateInterpolator())\n        .rotation(0, 10, -10, 5, -5, 2, -2, 0)\n        .startDelay(50)\n        .duration(4000)\n        .start();\n```\n\n\n### Installation\n\nAdd the following dependency to your module `build.gradle` file:\n```gradle\ndependencies {\n\t...\n\timplementation 'com.github.tarek360.RichPath:animator:0.1.1'\n}\n```\n\nAdd this to your root `build.gradle` file (**not** your module `build.gradle` file) :\n```gradle\nallprojects {\n\trepositories {\n\t\t...\n\t\tmaven { url \"https://jitpack.io\" }\n\t}\n}\n```\n\n### More Control by the RichPathAnimator\n\n - **Animate multiple paths sequentially or at the same time**\n ```java\nRichPathAnimator\n        .animate(richPath1, richPath2)\n        .rotation(value1, value2, ...)\n\n        //Animate the same path or another with different animated attributes.\n        .andAnimate(richPath3)\n        .scale(value1, value2, ...)\n\n        //Animate after the end of the last animation.\n        .thenAnimate(richPath4)\n        .strokeColor(value1, value2, ...)\n\n        // start your animation 🎉\n        .start();\n```\n\n - **Which one of the paths is clicked?**\n ```java\nrichPathView.setOnPathClickListener(new RichPath.OnPathClickListener() {\n     @Override\n     public void onClick(RichPath richPath) {\n\t    if (richPath.getName().equals(\"path_name\")) {\n\t        //TODO do an action when a specific path is clicked.\n\t    }\n     }\n });\n```\n\n## TODO\n\n- ~Clickable path~ (Done)\n- Support clip-path\n- Path animation (animate a RichPath on a path)\n- Reverse animation\n- ...\n\nIf you have any suggestion please open an issue for it.\n\n## Credits\n\n- [florent37](https://github.com/florent37) He is the creator of [ViewAnimator](https://github.com/florent37/ViewAnimator) which gave me the idea of this project. Some core concepts and ideas were reused, but everything is written from scratch.\n- [Android](https://android.com/) Some code is reused form the android source code and the VectorDrawableCompat support library.\n- [Alex Lockwood](https://github.com/alexjlockwood) The paths of the morphing sample is extracted from the [Shape Shifter](https://github.com/alexjlockwood/ShapeShifter) demo.\n\n## Developed By\n\n* Ahmed Tarek\n * [tarek360.github.io](http://tarek360.github.io/)\n * [Twitter](https://twitter.com/a_tarek360)\n\n\n## License\n\n\u003eCopyright 2017 Tarek360\n\n\u003eLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n\u003e   http://www.apache.org/licenses/LICENSE-2.0\n\n\u003eUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","funding_links":["https://www.paypal.me/wahba360"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarek360%2Frichpath","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftarek360%2Frichpath","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarek360%2Frichpath/lists"}