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

Overview

Android FillableLoaders

Build Status Android Arsenal Maven Central Hex.pm Platform coverity

Android Open Source library providing an interesting 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.

Check this blog post in order to get more technical details about the library.

Sample Video

Youtube Sample Video

Screenshots

Demo Screenshot Demo Screenshot 2 Demo Screenshot 3 Demo Screenshot 4

How to

As the library works with a standard String formatted source SVG Path, you need to generate it with some external tool. I usually use GIMP for that, as it has an interesting support to generate SVG Paths from original images. Here is the needed documentation to do it.

After that, set your generated path to the view. Be careful to just take the path, and not the full xml content generated. The path will look something like:

M 2948.00,18.00
   C 2956.86,18.01 2954.31,18.45 2962.00,19.91
     3009.70,28.94 3043.56,69.15 3043.00,118.00
     3042.94,122.96 3042.06,127.15 3041.25,132.00
     3036.37,161.02 3020.92,184.46 2996.00,200.31
     2976.23,212.88 2959.60,214.26 2937.00,214.00
     2926.91,213.88 2912.06,209.70 2903.00,205.24
     2893.00,200.33 2884.08,194.74 2876.04,186.91
     2848.21,159.81 2839.19,115.93 2853.45,80.00
     2863.41,54.91 2883.01,35.57 2908.00,25.45
     2916.97,21.82 2924.84,20.75 2934.00,18.51
     2938.63,17.79 2943.32,17.99 2948.00,18.00 Z
   M 2870.76,78.00
   ...

To set the generated path by code (do it just if you declared FillableLoader in the xml layout):

fillableLoader.setSvgPath(String generatedSvgPath);

And to include it into your layout:

<com.github.jorgecastillo.FillableLoader
  android:id="@+id/fillableLoader"
  android:layout_width="200dp"
  android:layout_height="100dp"
  app:fl_originalWidth="@integer/original_svg_width"
  app:fl_originalHeight="@integer/original_svg_height"
  app:fl_strokeColor="@color/stroke_color"
  app:fl_fillColor="@color/fill_color"
  app:fl_strokeWidth="@dimen/stroke_width"
  app:fl_strokeDrawingDuration="@integer/stroke_drawing_duration"
  app:fl_fillDuration="@integer/fill_duration"
  app:fl_clippingTransform="waves"
  app:fl_fillPercentage="@integer/fill_percentage"
  />

  <!--
  Default supported clipping transforms: "plain", "spikes", "rounded", "waves", "squares" and "bites".
  Read "Customize filling" section to implement a custom one.
  -->

Or if you rather you can do it by code using the FillableLoaderBuilder class. It will get automatically attached to the given parent view. Use the LayoutParams argument to position it:

FillableLoaderBuilder loaderBuilder = new FillableLoaderBuilder();
fillableLoader = loaderBuilder
    .parentView((FrameLayout) rootView)
    .layoutParams(params)
    .svgPath(Paths.JOB_AND_TALENT)
    .originalDimensions(970, 970)
    .strokeWidth(strokeWidth)
    .strokeColor(Color.parseColor("#1c9ade"))
    .fillColor(Color.parseColor("#1c9ade"))
    .strokeDrawingDuration(2000)
    .fillDuration(5000)
    .clippingTransform(new PlainClippingTransform())
    .build();

The only required arguments which does not have default values are the original dimensions from the svg image, and the svg path. Both of them are needed in order to get everything working properly. You can omit the other ones if you want.

Listen to State change

In order to allow reaction to every State switch (NOT_STARTED -> TRACE_STARTED -> FILL_STARTED -> FINISHED) you must implement OnStateChangeListener and override its onStateChange(int state) method.

@Override public void onStateChange(int state) {
  ((MainActivity) getActivity()).showStateHint(state);

  switch(state) {
    case State.FILL_STARTED:
      ...
      break;
    case State.FINISHED:
      ...
  }
}

Customize filling

To get a custom "top border" style for the filling figure, you can implement the ClippingTransform interface, which will force you to create an implementation for the transform() method.

You must think about the clipping figure as an invisible polygon that is going to clip your filling figure. (Like a DIFFERENCE operation between the total filling space and the custom transform figure you are applying). It must vary depending on the currentFillPhase.

public class PlainClippingTransform implements ClippingTransform {

  @Override public void transform(Canvas canvas, float currentFillPhase, View view) {
    canvas.clipRect(0, (view.getBottom() - view.getTop()) * (1f - currentFillPhase),
        view.getRight(), view.getBottom());
  }
}

The canvas would be the one used to draw the loader, the currentFillPhase argument is the current percent of the animation step (from 0 to 1), and the view would need to be provided too, so it can be used to create an animation based on view properties, like its current dimensions.

Custom behavior

If your loader / brand logo needs to you can suppress the stroke drawing animation and go directly for the filling one. To do that, just set app:strokeDrawingDuration="0".

If you only need to fill the pattern partially or you want to control the fill progress, you can use fl_fillPercentage xml (resource) property or if you want to control from Java use.

fillableLoader.setPercentage(percent);

Add it to your project

If you are working with gradle, add the dependency to your build.gradle file:

dependencies{
    compile 'com.github.jorgecastilloprz:fillableloaders:1.03@aar'
}

if you are working with maven, do it into your pom.xml

<dependency>
    <groupId>com.github.jorgecastilloprz</groupId>
    <artifactId>fillableloaders</artifactId>
    <version>1.03</version>
    <type>aar</type>
</dependency>

Documentation

You can find a detailed explanation of the lib functionality in this blog post.

Attributions

  • The class SvgPathParser used to convert from String SVG Path format to Android SDK Path structures has been obtained from the interesting romannurik Muzei code.
  • This project has been inspired by this iOS Swift project created by poolqf.

Developed By

Add me to Linkedin

License

Copyright 2015 Jorge Castillo Pérez

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Set the fill level manually

    Set the fill level manually

    Hi,

    as far as I see there is no possibility to set the fill level by hand. This would be nice in order to turn it into an actual loader. Currently you specify a time value for the loader, which is not quite the intention of a loader. Consider a process like a call against an API or database or whatever. Depending on the current status of the request one could set the fill level as a percentage scale. Another possibility would be to restart the loader once he is done (aka repeat mode). I think this is even easier to implement and usually more appropriate for loaders since one does not always have a way to get the current requests state.

    Let me know if my explanation was helpful or if you need more information.

    Best regards dasheck

    opened by dasheck0 24
  • Possible to set fill according to numeric value?

    Possible to set fill according to numeric value?

    Is is possible to set the fill level based on a numeric value? For example, from 0 to 5. I want to use a specific svg as the loader design but fill it based on the total value of ratings from 0 to 5. Please let me know if this is possible as soon as you can. Thank you.

    opened by power7714 5
  • Attribute XXXX has been defined

    Attribute XXXX has been defined

    Hi Jorge,

    I use the library but when i make build, AS shows me the message:

    Error:(2) Attribute "strokeWidth" has already been defined Error:(2) Attribute "fillColor" has already been defined Error:(2) Attribute "strokeColor" has already been defined

    I think that the names of these attributes are too generic and conflict with other popular libraries and can not use yours.

     I hope that solutions soon, greetings.

    opened by yavik14 2
  • New ClippingTransforms added

    New ClippingTransforms added

    I have created a couple of additional ClippingTransforms based on your existing ones: SquaresClippingTransform and BitesClippingTransform Also, I extracted some duplicated code in each of the existing ClippingTransforms into a base class

    opened by truizlop 2
  • SVG is not drawn

    SVG is not drawn

    I have created a svg file and pasted it to Paths interface:

    fillableLoader = loaderBuilder.parentView((FrameLayout) rootView)
              .svgPath(Paths.myPath)
              .layoutParams(params)
              .originalDimensions(140, 140)
              .strokeColor(Color.parseColor("#fa9ade"))
              .fillColor(Color.parseColor("#1c9ade"))
              .strokeDrawingDuration(2000)
              .clippingTransform(new WavesClippingTransform())
              .fillDuration(10000)
              .build();
    
    

    Here is the svg path:

     
    M100.9,2.2c-0.7-0.8-1.7-1.2-2.8-1.2H3.9c-1.1,0-2.1,0.4-2.8,1.2C0.5,2.9,0,4.1,0.3,5l11.2,118.2
    			c0.2,1.9,1.8,3.3,3.7,3.3h72.6c1.9,0,3.6-1.4,3.8-3.3L101.9,5C101.9,4.1,101.5,2.9,100.9,2.2z M84.4,119.2H18.6L8.2,8.5H94
    			L84.4,119.2z M21.5,112.8c0.1,1.4,1.3,2.6,2.8,2.6h54.1c1.4,0,2.7-1.1,2.8-2.6l7.7-91.8c0-0.1,0-0.1,0-0.1v-0.4
    			c0-0.1,0-0.1,0.3-0.2c-0.1,0-0.1-0.1-0.1-0.2c-0.1-0.1-0.1-0.3-0.2-0.4c0-0.1,0-0.1,0-0.1c-0.1-0.1-0.2-0.3-0.3-0.4
    			c-0.1-0.1-0.1-0.1-0.2-0.2c-0.1-0.1-0.1-0.1-0.2-0.2c-0.1,0-0.1-0.1-0.2-0.1s-0.1-0.1-0.2-0.1c0,0-0.1-0.1-0.2-0.1
    			c-0.1,0-0.1-0.1-0.2-0.1c-0.2,0-0.3-0.1-0.6-0.1h-0.7c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0-0.2,0-0.3,0.1
    			c-4.7,2.4-10.2,2.4-14.9,0c-0.9-0.4-1.9-0.4-2.7,0c-4.7,2.4-10.2,2.4-14.9,0c-0.9-0.4-1.9-0.4-2.7,0c-4.7,2.4-10.2,2.4-14.9,0
    			c-0.9-0.4-1.9-0.4-2.7,0c-4.7,2.4-10.2,2.4-14.9,0c-0.2-0.1-0.3-0.1-0.6-0.2h-0.1c-0.1-0.1-0.2-0.1-0.3-0.1h-0.7
    			c-0.2,0-0.3,0.1-0.4,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2,0.1
    			c-0.1,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.1,0.2-0.2,0.3l-0.1,0.1c-0.1,0.2-0.2,0.3-0.2,0.6
    			c-0.1,0.1-0.1,0.2-0.1,0.3s0,0.1,0,0.2V21L21.5,112.8z
    
    
    

    So, I do not understand why it doesn't work. Can anyone help?

    opened by emiraslan 1
  • Background Color

    Background Color

    Hi! Is it possible to set the background color of the loader? Actually we can only set the color of the loader and of the stroke. I think it would be a good idea for next version of this library.

    opened by francescoscaringi 1
  • Paint overriding

    Paint overriding

    Both fillPaint and initFillPaint are private. Sometimes changing this paint is really necessary.

    For example, at the moment using smth like this from the client code is impossible:

    bitmapShader = new BitmapShader(patternBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
    fillPaint.setShader(bitmapShader); 
    
    opened by lassana 1
  • Fixed Coverity error UNINTENDED_INTEGER_DIVISION

    Fixed Coverity error UNINTENDED_INTEGER_DIVISION

    Coverity Scan found an error:

    CID 105392 (#1 of 1): Result is not floating-point
    (UNINTENDED_INTEGER_DIVISION)integer_division: Dividing integer
    expressions width and 2 * squareSize, and then converting the integer
    quotient to type double. Any remainder, or fractional part of the
    quotient, is ignored.
    

    The solution is simply to cast one of the arguments to double. This commit does that.


    This change is Reviewable

    opened by Letme 0
  • Typo errors fixed

    Typo errors fixed

    In the first paragraph, the Android FillableLoaders, section, "providing" must be written as "provide". The line "Android Open Source library providing an interesting fillable progress view working with SVG paths." must be written as: "Android Open Source library provides an interesting fillable progress view working with SVG paths.

    In the "How to" section, under the third program diagram, the line is written as "Or if you rather you can do it by code using the FillableLoaderBuilder class." This line should be written as, " Or if you, rather, you can do it by code using the FillableLoaderBuilder class. Thank you.

    opened by RealWorldEdits376W 0
  • Typo errors

    Typo errors

    In the first paragraph, the Android FillableLoaders, section, "providing" must be written as "provide". The line "Android Open Source library providing an interesting fillable progress view working with SVG paths." must be written as: "Android Open Source library provides an interesting fillable progress view working with SVG paths.

    In the "How to" section, under the third program diagram, the line is written as "Or if you rather you can do it by code using the FillableLoaderBuilder class." This line should be written as, " Or if you, rather, you can do it by code using the FillableLoaderBuilder class. Thank you.

    opened by RealWorldEdits376W 0
  • Caused by java.lang.NullPointerException: Attempt to invoke virtual method 'int android.content.res.TypedArray.getInteger(int, int)' on a null object reference

    Caused by java.lang.NullPointerException: Attempt to invoke virtual method 'int android.content.res.TypedArray.getInteger(int, int)' on a null object reference

    Caused by java.lang.NullPointerException: Attempt to invoke virtual method 'int android.content.res.TypedArray.getInteger(int, int)' on a null object reference at com.github.jorgecastillo.attributes.AttributeExtractorImpl.getOriginalHeight(AttributeExtractorImpl.java:81) at com.github.jorgecastillo.FillableLoader.initAttrs(FillableLoader.java:141) at com.github.jorgecastillo.FillableLoader.(FillableLoader.java:124) at java.lang.reflect.Constructor.newInstance(Constructor.java) at android.view.LayoutInflater.createView(LayoutInflater.java:619) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:764) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:704) at android.view.LayoutInflater.rInflate(LayoutInflater.java:835) at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:798) at android.view.LayoutInflater.rInflate(LayoutInflater.java:838) at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:798) at android.view.LayoutInflater.rInflate(LayoutInflater.java:838) at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:798) at android.view.LayoutInflater.inflate(LayoutInflater.java:515) at android.view.LayoutInflater.inflate(LayoutInflater.java:423) at com.terotam.vendor.splash_screen.SplashScreenFragment.onCreateView(SplashScreenFragment.kt:109) at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2698) at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:310) at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1185) at androidx.fragment.app.FragmentManager.addAddedFragments(FragmentManager.java:2222) at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:1995) at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:1951) at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:1847) at androidx.fragment.app.FragmentManager.dispatchStateChange(FragmentManager.java:2621) at androidx.fragment.app.FragmentManager.dispatchActivityCreated(FragmentManager.java:2569) at androidx.fragment.app.Fragment.performActivityCreated(Fragment.java:2722) at androidx.fragment.app.FragmentStateManager.activityCreated(FragmentStateManager.java:336) at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1186) at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1354) at androidx.fragment.app.FragmentManager.moveFragmentToExpectedState(FragmentManager.java:1432) at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1495) at androidx.fragment.app.FragmentManager.dispatchStateChange(FragmentManager.java:2617) at androidx.fragment.app.FragmentManager.dispatchActivityCreated(FragmentManager.java:2569) at androidx.fragment.app.FragmentController.dispatchActivityCreated(FragmentController.java:247) at androidx.fragment.app.FragmentActivity.onStart(FragmentActivity.java:541) at androidx.appcompat.app.AppCompatActivity.onStart(AppCompatActivity.java:201) at android.app.Instrumentation.callActivityOnStart(Instrumentation.java:1237) at android.app.Activity.performStart(Activity.java:6268) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2379) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476) at android.app.ActivityThread.-wrap11(ActivityThread.java) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:148) at android.app.ActivityThread.main(ActivityThread.java:5421) at java.lang.reflect.Method.invoke(Method.java) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

    opened by pravin1010 1
  • github.jorgecastillo.svg.SvgPathParser.ParsePath()

    github.jorgecastillo.svg.SvgPathParser.ParsePath()

    I am new in Android Studio Development

    could you please guide me how to resolve this error to find the null point of string path error in SvgPathParser class parsePath() function pathstring not found.

    opened by reema07 15
Owner
Jorge Castillo
Senior Sofware Engineer @47deg
Jorge Castillo
Some beautiful android loading drawable, can be combined with any view as the LoadingView or the ProgressBar. Besides, some Drawable can customize the loading progress too.

LoadingDrawable: Android cool animation collection 前言 CircleRotate源码解析 Fish源码解析 LoadingDrawable is some android animations implement of drawable: a li

dinus_developer 4.1k Dec 27, 2022
A simple progress loader inspired by Can you Code this UI? Volume 6! - https://stories.uplabs.com/can-you-code-this-ui-volume-6-7bd09fa6dd92#.nyh2zhpvb

SlidingSquaresLoader Sliding Square Loader - A simple progress loader inspired by Can you Code this UI? Volume 6! Gradle Step 1. Add the JitPack repos

Hamza Fetuga 151 Jul 26, 2022
Android loading or progress dialog widget library, provide efficient way to implement iOS like loading dialog and progress wheel

ACProgressLite English Version / 中文版本 An Android loading widget library. Lite and easy to use, strong customizability. Can be used to implement 'iOS'

Cloudist Technology Co., Ltd. 234 Nov 24, 2022
IOSProgressBar is a progress-bar lib for android. And the progress-bar looks like iOS system style

IOSProgressBar is a progress-bar lib for android. And the progress-bar looks like iOS system style

heyangyang 6 Aug 25, 2022
A simple lib to create a ring-like progress view with corner edges

ProgressRingView Installation Gradle: dependencies { compile 'com.github.flepsik:progress-ring-view:1.2.1' } Maven: <dependency> <groupId>com.g

null 71 Dec 5, 2021
A progress wheel for android, intended for use instead of the standard progress bar.

Deprecation warning This project is no-longer maintained, and has not been maintained for a few years now. If you're looking for an alternative librar

Todd Davies 2.7k Dec 29, 2022
:barber: [Android Library] Stacked dual progress indicator progress-bar

StackedHorizontalProgressBar Specs Featured in Show some ❤️ Android library with ability to show two progress indicators in one horizontal progress ba

Nishant Srivastava 98 Nov 11, 2022
Simple Progress View that you can compare things, like statistics of a Football match

Simple Progress View that you can compare things, like statistics of a Football match

Kostas Antoniou 29 Jun 8, 2022
Yet another android custom progress view for your music player

MaskProgressView Yet another android custom progress view for your music player Demo Youtube Video Link Usage <co.mobiwise.library.MaskProgressView

Mert Şimşek 367 Dec 25, 2022
Create & Show progress, data or error views, the easy way!

State Views for Android (BETA version) Create & Show progress, data or error views, the easy way! StateViews is based on ViewSwitcher mechanism and al

Mehdi Sakout 376 Dec 21, 2022
A wave view of android,can be used as progress bar.

WaveView ![Gitter](https://badges.gitter.im/Join Chat.svg) A wave view of android,can be used as progress bar. Screenshot APK demo.apk What can be use

Kai Wang 1.3k Dec 28, 2022
A circular android ProgressBar library which extends View, and the usage same as ProgressBar, It has solid,line and solid_line three styles. Besides, progress value can be freely customized.

CircleProgressBar 中文版文档 The CircleProgressBar extends View, It has both solid and line two styles. Besides, progress value can be freely customized. I

dinus_developer 1.2k Jan 3, 2023
A circle progress animation view on Android

CircleProgress A Circle Progress View with a rotate animation. Just make for fun. Hope you enjoy it. Quick Look Usage <me.fichardu.circleprogress.Circ

null 814 Dec 27, 2022
A lightweight task progress calendar view library for Android

A lightweight task progress calendar view library for Android

İbrahim Süren 128 Oct 21, 2022
MusicBar 2.1 0.0 Java view visualize progress bar for sound file like sound cloud

MusicBar Setup dependencies { implementation 'com.oze.music:MusicBar:1.0.5' } Usage Function Description setAnimationChangeListener(OnMusicBarAn

emad 74 Aug 26, 2022
a progress view used to grade mobiles phone

GradeProgressView a progress view used to grade mobiles phone #System Requirement Android API 11+, Because of the use of ValueAnimation, if you want u

deadline 87 Jul 17, 2022
Completely customizable progress based loaders drawn using custom CGPaths written in Swift

FillableLoaders Completely customizable progress based loaders drawn using custom CGPaths written in Swift Waves Plain Spike Rounded Demo: Changelog:

Pol Quintana 2.1k Dec 31, 2022
Completely customizable progress based loaders drawn using custom CGPaths written in Swift

FillableLoaders Completely customizable progress based loaders drawn using custom CGPaths written in Swift Waves Plain Spike Rounded Demo: Changelog:

Pol Quintana 2.1k Dec 31, 2022
DownloadProgressBar is an android library that delivers awesome custom progress bar. You can manipulate it's state in every way.

Download Progress Bar Android progress bar with cool animation, inspired by : https://dribbble.com/shots/2012292-Download-Animation ###Attributes Attr

Mariusz Brona 978 Nov 10, 2022