{"id":3467,"url":"https://github.com/JorgeCastilloPrz/AndroidFillableLoaders","last_synced_at":"2025-08-12T01:31:05.867Z","repository":{"id":36355730,"uuid":"40660510","full_name":"JorgeCastilloPrz/AndroidFillableLoaders","owner":"JorgeCastilloPrz","description":"Android fillable progress view working with SVG paths. This is a nice option too if you want to create an interesting branding logo for your app. Based on the iOS project: https://github.com/poolqf/FillableLoaders","archived":false,"fork":false,"pushed_at":"2022-07-20T16:54:02.000Z","size":1521,"stargazers_count":1996,"open_issues_count":15,"forks_count":269,"subscribers_count":54,"default_branch":"master","last_synced_at":"2024-12-07T12:08:35.737Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/JorgeCastilloPrz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-13T13:34:29.000Z","updated_at":"2024-10-18T14:34:54.000Z","dependencies_parsed_at":"2022-08-08T14:16:43.545Z","dependency_job_id":null,"html_url":"https://github.com/JorgeCastilloPrz/AndroidFillableLoaders","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JorgeCastilloPrz%2FAndroidFillableLoaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JorgeCastilloPrz%2FAndroidFillableLoaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JorgeCastilloPrz%2FAndroidFillableLoaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JorgeCastilloPrz%2FAndroidFillableLoaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JorgeCastilloPrz","download_url":"https://codeload.github.com/JorgeCastilloPrz/AndroidFillableLoaders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229624728,"owners_count":18100638,"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":[],"created_at":"2024-01-05T20:16:42.332Z","updated_at":"2024-12-13T22:30:38.837Z","avatar_url":"https://github.com/JorgeCastilloPrz.png","language":"Java","readme":"Android FillableLoaders\n=======================\n[![Build Status](https://travis-ci.org/JorgeCastilloPrz/AndroidFillableLoaders.svg?branch=master)](https://travis-ci.org/JorgeCastilloPrz/AndroidFillableLoaders)\n[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-AndroidFillableLoaders-green.svg?style=flat)](https://android-arsenal.com/details/1/2302)\n[![Maven Central](https://maven-badges.herokuapp.com/maven-central/com.github.jorgecastilloprz/fillableloaders/badge.svg)](https://maven-badges.herokuapp.com/maven-central/com.github.jorgecastilloprz/fillableloaders)\n[![Hex.pm](https://img.shields.io/hexpm/l/plug.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![Platform](https://img.shields.io/badge/platform-android-green.svg)](http://developer.android.com/index.html)\n[![coverity](https://scan.coverity.com/projects/8852/badge.svg)](https://scan.coverity.com/projects/jorgecastilloprz-androidfillableloaders)\n\nAndroid Open Source library providing an interesting fillable progress view working with SVG paths.\nThis is a nice option too if you want to create an interesting branding logo for your app.\n\nCheck [this blog post](http://jorgecastillo.xyz/2015/08/16/android-fillable-loaders/) in order to get more technical details about the library.\n\nSample Video\n============\n[Youtube Sample Video](https://www.youtube.com/watch?v=buqF840W08Y)\n\nScreenshots\n===========\n![Demo Screenshot][4] ![Demo Screenshot 2][1]\n![Demo Screenshot 3][3] ![Demo Screenshot 4][2]\n\nHow to\n======\nAs the library works with a standard String formatted source SVG Path, you need to generate it with\nsome external tool. I usually use **GIMP** for that, as it has an interesting support to generate\nSVG Paths from original images. [Here is the needed documentation to do it](http://www.useragentman.com/blog/2013/04/26/how-to-create-svg-paths-easily-using-the-gimp/).\n\nAfter that, set your generated path to the view. Be careful to just take the path, and not the full\nxml content generated. The path will look something like:\n\n```\nM 2948.00,18.00\n   C 2956.86,18.01 2954.31,18.45 2962.00,19.91\n     3009.70,28.94 3043.56,69.15 3043.00,118.00\n     3042.94,122.96 3042.06,127.15 3041.25,132.00\n     3036.37,161.02 3020.92,184.46 2996.00,200.31\n     2976.23,212.88 2959.60,214.26 2937.00,214.00\n     2926.91,213.88 2912.06,209.70 2903.00,205.24\n     2893.00,200.33 2884.08,194.74 2876.04,186.91\n     2848.21,159.81 2839.19,115.93 2853.45,80.00\n     2863.41,54.91 2883.01,35.57 2908.00,25.45\n     2916.97,21.82 2924.84,20.75 2934.00,18.51\n     2938.63,17.79 2943.32,17.99 2948.00,18.00 Z\n   M 2870.76,78.00\n   ...\n```\nTo set the generated path by code (do it just if you declared `FillableLoader` in the xml layout):\n```java\nfillableLoader.setSvgPath(String generatedSvgPath);\n```\nAnd to include it into your layout:\n```xml\n\u003ccom.github.jorgecastillo.FillableLoader\n  android:id=\"@+id/fillableLoader\"\n  android:layout_width=\"200dp\"\n  android:layout_height=\"100dp\"\n  app:fl_originalWidth=\"@integer/original_svg_width\"\n  app:fl_originalHeight=\"@integer/original_svg_height\"\n  app:fl_strokeColor=\"@color/stroke_color\"\n  app:fl_fillColor=\"@color/fill_color\"\n  app:fl_strokeWidth=\"@dimen/stroke_width\"\n  app:fl_strokeDrawingDuration=\"@integer/stroke_drawing_duration\"\n  app:fl_fillDuration=\"@integer/fill_duration\"\n  app:fl_clippingTransform=\"waves\"\n  app:fl_fillPercentage=\"@integer/fill_percentage\"\n  /\u003e\n\n  \u003c!--\n  Default supported clipping transforms: \"plain\", \"spikes\", \"rounded\", \"waves\", \"squares\" and \"bites\".\n  Read \"Customize filling\" section to implement a custom one.\n  --\u003e\n```\nOr if you rather you can do it by code using the `FillableLoaderBuilder` class. It will get automatically\nattached to the given parent view. Use the `LayoutParams` argument to position it:\n```java\nFillableLoaderBuilder loaderBuilder = new FillableLoaderBuilder();\nfillableLoader = loaderBuilder\n    .parentView((FrameLayout) rootView)\n    .layoutParams(params)\n    .svgPath(Paths.JOB_AND_TALENT)\n    .originalDimensions(970, 970)\n    .strokeWidth(strokeWidth)\n    .strokeColor(Color.parseColor(\"#1c9ade\"))\n    .fillColor(Color.parseColor(\"#1c9ade\"))\n    .strokeDrawingDuration(2000)\n    .fillDuration(5000)\n    .clippingTransform(new PlainClippingTransform())\n    .build();\n```\nThe only **required arguments** which does not have default values are the original dimensions from the svg image,\nand the svg path. Both of them are needed in order to get everything working properly. You can omit the other\nones if you want.\n\nListen to State change\n----------------------\nIn order to allow reaction to every `State` switch (`NOT_STARTED` -\u003e `TRACE_STARTED` -\u003e `FILL_STARTED` -\u003e `FINISHED`)\nyou must implement `OnStateChangeListener` and override its `onStateChange(int state)` method.\n\n```java\n@Override public void onStateChange(int state) {\n  ((MainActivity) getActivity()).showStateHint(state);\n\n  switch(state) {\n    case State.FILL_STARTED:\n      ...\n      break;\n    case State.FINISHED:\n      ...\n  }\n}\n```\n\nCustomize filling\n-----------------\nTo get a custom \"top border\" style for the filling figure, you can implement the `ClippingTransform` interface,\nwhich will force you to create an implementation for the `transform()` method.\n\nYou must think about the clipping figure as an invisible polygon that is going to clip your filling figure.\n(Like a DIFFERENCE operation between the total filling space and the custom transform figure you are applying).\nIt must vary depending on the currentFillPhase.\n```java\npublic class PlainClippingTransform implements ClippingTransform {\n\n  @Override public void transform(Canvas canvas, float currentFillPhase, View view) {\n    canvas.clipRect(0, (view.getBottom() - view.getTop()) * (1f - currentFillPhase),\n        view.getRight(), view.getBottom());\n  }\n}\n```\nThe `canvas` would be the one used to draw the loader, the `currentFillPhase` argument is the current **percent**\nof the animation step (from 0 to 1), and the `view` would need to be provided too, so it can be used\nto create an animation based on view properties, like its current dimensions.\n\nCustom behavior\n---------------\nIf your loader / brand logo needs to you can suppress the stroke drawing animation and go directly for the\nfilling one. To do that, just set `app:strokeDrawingDuration=\"0\"`.\n\nIf you only need to fill the pattern partially or you want to control the fill progress, you can use\n`fl_fillPercentage` xml (resource) property or if you want to control from Java use.\n```java\nfillableLoader.setPercentage(percent);\n```\n\nAdd it to your project\n----------------------\n\nIf you are working with gradle, add the dependency to your build.gradle file:\n```groovy\ndependencies{\n    compile 'com.github.jorgecastilloprz:fillableloaders:1.03@aar'\n}\n```\nif you are working with maven, do it into your pom.xml\n```xml\n\u003cdependency\u003e\n    \u003cgroupId\u003ecom.github.jorgecastilloprz\u003c/groupId\u003e\n    \u003cartifactId\u003efillableloaders\u003c/artifactId\u003e\n    \u003cversion\u003e1.03\u003c/version\u003e\n    \u003ctype\u003eaar\u003c/type\u003e\n\u003c/dependency\u003e\n```\nDocumentation\n-------------\nYou can find a detailed explanation of the lib functionality in [this blog post](http://jorgecastillo.xyz/2015/08/16/android-fillable-loaders/).\n\nAttributions\n------------\n* The class `SvgPathParser` used to convert from String SVG Path format to Android SDK `Path` structures has been obtained from the\ninteresting [romannurik](https://github.com/romannurik) [Muzei](https://github.com/romannurik/muzei/blob/master/main%2Fsrc%2Fmain%2Fjava%2Fcom%2Fgoogle%2Fandroid%2Fapps%2Fmuzei%2Futil%2FSvgPathParser.java) code.\n* This project has been inspired by  [this iOS Swift project](https://github.com/poolqf/FillableLoaders) created by [poolqf](https://github.com/poolqf).\n\nDeveloped By\n------------\n* Jorge Castillo Pérez - \u003cjorge.castillo.prz@gmail.com\u003e\n\n\u003ca href=\"https://www.linkedin.com/in/jorgecastilloprz\"\u003e\n  \u003cimg alt=\"Add me to Linkedin\" src=\"https://github.com/JorgeCastilloPrz/EasyMVP/blob/master/art/linkedin.png\" /\u003e\n\u003c/a\u003e\n\nLicense\n-------\n\n    Copyright 2015 Jorge Castillo Pérez\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\n\n[1]: ./art/demoPlain.gif\n[2]: ./art/demoRounded.gif\n[3]: ./art/demoSpikes.gif\n[4]: ./art/demoWaves.gif\n\n","funding_links":[],"categories":["Index `(light-weight pages)`","进度条","Java","Libraries","Index","库","Libs"],"sub_categories":["GUI","[](https://github.com/JStumpp/awesome-android/blob/master/readme.md#gui)GUI","\u003cA NAME=\"Widget\"\u003e\u003c/A\u003eWidget"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJorgeCastilloPrz%2FAndroidFillableLoaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJorgeCastilloPrz%2FAndroidFillableLoaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJorgeCastilloPrz%2FAndroidFillableLoaders/lists"}