harjot-oberai / vectormaster Goto Github PK
View Code? Open in Web Editor NEWDynamic control over vector drawables!
License: MIT License
Dynamic control over vector drawables!
License: MIT License
hello.
your VectorMaster is very good.
but It is not visible in API 16.
first of all, Successfully registered VectorMasterView on XML.
Then, animation was made in Java source using PathModel.
However, when the app was running, no images were visible.
So i registered ImageView to the XML and did setImageDrawable to ImageView as VectorMasterDrawable from java source.
but not visible too.
Let me show you my XML and Java source parts.
[xml]
<ImageView
android:id="@+id/header_menu"
android:layout_width="30dp"
android:layout_height="24dp"
android:layout_centerVertical="true"/>
[java]
headerMenuView = (ImageView) activity.findViewById(R.id.header_menu);
headerMenuVMView = new VectorMasterDrawable(mContext, R.drawable.ic_menu);
headerMenuView.setImageDrawable(headerMenuVMView);
VectorMasterDrawable menuView = headerMenuVMView;
final GroupModel menuGroupModel = menuView.getGroupModelByName("menu_group");
final PathModel menuPathModel1 = menuView.getPathModelByName("menu1");
menuGroupModel.setRotation(MathUtil.lerp(0, (float) 360, offset));
menuPathModel1.setTrimPathEnd(1 - offset);
why not show image?
You can check VectorMaster Demos when operating the API 16.
In my Android application I'm using a for loop to reference different paths in my VectorDrawable. However, every time I call myVector.getPathModelByName(myString), I get the following error:
java.lang.NullPointerException: Attempt to invoke virtual method 'boolean java.lang.String.equals(java.lang.Object)' on a null object reference
at com.sdsmdg.harjot.vectormaster.VectorMasterView.getPathModelByName(VectorMasterView.java:337)
I've been messing around with the vector drawable to fix this. I tried just referencing the first path in the drawable in every loop iteration, and that seems to work fine, so there might be a problem looking past the first path. Is this a bug or am I using the class wrong?
I have the following Vector Drawable..
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="78dp"
android:height="120dp"
android:viewportWidth="78"
android:viewportHeight="120">
<path
android:pathData="M8,111a31,9 0,1 0,62 0a31,9 0,1 0,-62 0z"
android:fillColor="#000"
android:fillAlpha=".08"
android:fillType="evenOdd"/>
<path
android:name="fillColorPath"
android:pathData="M39,109c24.667,-33.044 37,-56.377 37,-70C76,18.565 59.435,2 39,2S2,18.565 2,39c0,13.623 12.333,36.956 37,70zM39,54c7.732,0 14,-6.268 14,-14s-6.268,-14 -14,-14 -14,6.268 -14,14 6.268,14 14,14z"
android:strokeLineJoin="round"
android:strokeWidth="4"
android:strokeColor="#FF50BEFF"
android:fillType="evenOdd">
<aapt:attr name="android:fillColor">
<gradient
android:startY="39.25312"
android:startX="39"
android:endY="40.31242"
android:endX="39"
android:type="linear">
<item android:offset="0" android:color="#FF50BEFF"/>
<item android:offset="1" android:color="#FF4BAFFF"/>
</gradient>
</aapt:attr>
</path>
</vector>
Unfortunately, since the fillColor
is set to a gradient in the fillColorPath
path, PathModel.getFillColor
returns 0, which is incorrect. I'm gathering this is not supported?
Is it possible to process color attribute values like '@color/myColor', '@android:color/systemColor' and look up the value?
I have a VectorMasterView inside a ConstraintLayout, with all sides constrained to parent, and width and height set to match_constraint. I've noticed that if the width or the height of the VectorMasterView change, the vector inside either disappears or is not rendered properly (e.g., the vector is oversized, is undersized, is not centered anymore).
The only way I found to prevent this behavior is to set a fixed width and a fixed height, but it's not what I need.
Is there anything I can do?
There is no option to update the vector model in vectorMasterDrawable. There should be option to update the viewport width and height etc.
My vector image has a gradient but it isn't painted when using the VectorMasterDrawable, is this expected?
I realize this is a v24+ feature.
Hi,
It appears your library can take a lot of time when loading complex drawables (over 15 paths), especially on older devices.
You use XmlPullParser, but do you think VDT-XML library could be a better choice to speed up parsing ?
I'm having some troubles in order to achive this I got an xml file as my drawable, if I put the drawable on the xml it works nice, but I need to change the source to another view programmatically.
I've tried different methods like:
setBackground()
setBackgroudResource()
But none of them works.
Hi, I have a vector image (vector_img.xml):
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="22dp"
android:height="22dp"
android:viewportWidth="300"
android:viewportHeight="300">
<path
android:fillColor="#FF000000"
android:pathData="M 150 0 C 232.842712475 0 300 67.1572875254 300 150 C 300 232.842712475 232.842712475 300 150 300 C 67.1572875254 300 0 232.842712475 0 150 C 0 67.1572875254 67.1572875254 0 150 0 Z" />
<path
android:fillColor="#FFFFFFFF"
android:pathData="M 150 30 C 216.27416998 30 270 83.7258300203 270 150 C 270 216.27416998 216.27416998 270 150 270 C 83.7258300203 270 30 216.27416998 30 150 C 30 83.7258300203 83.7258300203 30 150 30 Z" />
<path
android:fillColor="#FF000000"
android:pathData="M 150 60 C 199.705627485 60 240 100.294372515 240 150 C 240 199.705627485 199.705627485 240 150 240 C 100.294372515 240 60 199.705627485 60 150 C 60 100.294372515 100.294372515 60 150 60 Z" />
</vector>
I'm trying to scale vector programmatically like this:
VectorMasterDrawable vectorDrawable = new VectorMasterDrawable(context, R.drawable.vector_img);
vectorDrawable.setScaleX(1.5f);
vectorDrawable.setScaleY(1.5f);
The result is not happy:
Perhaps the problem is that when we scale vector we can't set pivot points? Or am I doing something wrong?)
Thanks
Sadly starting from Android Q (or later, if you use the legacy flag), Google forces to use SAF instead of File.
This means that parsing APK files is almost impossible, so I plan to use apk-parser library.
Sadly, the library doesn't offer to parse the VectorDrawable of the app-icons (written about here), but instead if offers its data as byte array.
My question:
Does this library provide a way to get an instance of VectorDrawable from byte-array? If so, how?
If not, do you know perhaps of a way to do it? Maybe via the support library?
Hi @harjot-oberai
I have developed a new library called RichPath
It gives full Animation Control on Paths and VectorDrawables
It will make the path animation code shorter
for example, the Search-Back animation sample which is in the VectorMaster examples.
Timer timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
@Override
public void run() {
count++;
if (count >= 50) {
if (searchBackState == 0) {
circleTrimEnd -= 1.0f / 20;
stemTrimStart += 0.75f / 20;
stemTrimEnd += (1 - 0.185f) / 20;
arrowHeadBottomTrimEnd += 1.0f / 20;
arrowHeadTopTrimEnd += 1.0f / 20;
if (circleTrimEnd <= 0) {
searchBackState = 1;
count = 0;
}
} else if (searchBackState == 1) {
arrowHeadBottomTrimEnd -= 1.0f / 20;
arrowHeadTopTrimEnd -= 1.0f / 20;
stemTrimStart -= 0.75f / 20;
stemTrimEnd -= (1 - 0.185f) / 20;
circleTrimEnd += 1.0f / 20;
if (circleTrimEnd >= 1) {
searchBackState = 0;
count = 0;
}
}
searchCircle.setTrimPathEnd(circleTrimEnd);
stem.setTrimPathEnd(stemTrimEnd);
stem.setTrimPathStart(stemTrimStart);
arrowUp.setTrimPathEnd(arrowHeadTopTrimEnd);
arrowDown.setTrimPathEnd(arrowHeadBottomTrimEnd);
runOnUiThread(new Runnable() {
@Override
public void run() {
searchBackView.update();
}
});
}
}
}, 1000, 1000 / 60);
RichPathAnimator.animate(stem)
.trimPathStart(0f, 0.75f)
.trimPathEnd(0.185f, 1f)
.andAnimate(searchCircle)
.trimPathEnd(1, 0)
.andAnimate(arrowTop, arrowBottom)
.trimPathEnd(0, 1)
.start();
Note - The vector is appearing fine when used with image view's srcCompat.
I've tried to show this VectorDrawable, and it doesn't show the same on VectorMasterView compared to ImageView:
It doesn't show the eyes and the mouth, on both the IDE preview and when running the app:
Using this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView" android:layout_width="150dp" android:layout_height="150dp"
android:src="@drawable/boy" />
<com.sdsmdg.harjot.vectormaster.VectorMasterView
android:id="@+id/vectorMasterView" android:layout_width="150dp" android:layout_height="150dp"
app:vector_src="@drawable/boy" />
</LinearLayout>
Sample:
Hey,
I'm trying to modify a vector image in a persistent notification. Can I do this with VectorMaster?
The normal way of changing things in a notification is via a RemoteView
RemoteViews notificationRemoteView = new RemoteViews(context.getPackageName(), R.layout.persistent_notification);
but I'm not sure how to get a VectorMaster object from the RemoteView once I have it.
i do this but no work ;
setPathData(M M806.004057 333.205894 364.566136 333.2.271448-167...)
update();
how can i do it?
jcenter will be sunset on May 1, 2020 announcement
Hi, thanks for this awesome library.
I am using VectorMasterDrawable with Paint to set color with ColorFilter, but nothing is drawing. What i do wrong?
All is ok, if i use setColor(), but I need ColorFilter.
I really can't make heads or tails of it ... The only path that is drawn correctly is "phone" but "button", "display" and "outline" are not drawn at all .. I tried removing "phone" path completely but that way nothing is shown. Classic ImageView renders everything perfectly. The only thing that comes to mind is that the other paths are malformed but they came from the same generation source as the working one
Here is the vector:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="218dp"
android:height="267dp"
android:viewportHeight="269"
android:viewportWidth="220">
<group>
<path
android:name="phone"
android:fillColor="#FFF"
android:fillType="evenOdd"
android:pathData="M186.224,267l-156.444,-0.342C13.296,266.624 -0.038,253.224 0,236.728L0.721,-94.06C0.76,-111.186 14.662,-125.038 31.776,-125l155.302,0.338c17.114,0.038 30.956,13.95 30.922,31.076l-0.721,329.643c-0.034,17.125 -13.941,30.98 -31.055,30.943zM201.408,213L202,-76.565 16.592,-77 16,212.57l185.408,0.43zM92,229c-5.523,0 -10,4.477 -10,10s4.477,10 10,10h35c5.523,0 10,-4.477 10,-10s-4.477,-10 -10,-10L92,229z" />
<path
android:fillColor="#00000000"
android:name="outline"
android:fillType="evenOdd"
android:pathData="M187.224,267l-156.444,-0.342C14.296,266.624 0.962,253.224 1,236.728L1.721,-94.06c0.038,-17.126 13.941,-30.978 31.055,-30.94l155.302,0.338c17.114,0.038 30.956,13.95 30.922,31.076l-0.721,329.643c-0.034,17.125 -13.941,30.98 -31.055,30.943z"
android:strokeColor="@color/cool_grey"
android:strokeWidth="2" />
<path
android:name="display"
android:pathData="M201.408,213L16,212.57 16.592,-77 206,-76.565z"
android:fillColor="@color/cool_grey"
android:fillType="evenOdd"/>
<group
android:name="buttonGroup"
android:translateX="82"
android:translateY="229">
<path
android:name="button"
android:fillColor="@color/cool_grey"
android:fillType="evenOdd"
android:pathData="M10,0L45,0A10,10 0,0 1,55 10L55,10A10,10 0,0 1,45 20L10,20A10,10 0,0 1,0 10L0,10A10,10 0,0 1,10 0z" />
</group>
</group>
</vector>
Hi @jaysondc
Utils.getVectorModel(this, resourceId); not found, is there any missing me?
At first, I could not get the widget working for api 23 marshmallow. The vector graphics were in the res/drawable. It worked fine for api 24 nougat though. I got the error message "resource not found" on api 23.
The solution was to put the vector xml in the res/xml folder instead. Now the XML parser can find the resources on bot api 23 and 24. I noticed that the Android build system modifies the drawables directory name, it attaches -v23 or -v24 to the directory name while creating the apk.
Maybe the documentation should mention that the res/xml is a better location for the vector images then the drawables for the widget? What are your thoughts?
Using ImageView (as expecting)
<ImageView
app:srcCompat="@drawable/man_body"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
But using VectorMasterView
<com.sdsmdg.harjot.vectormaster.VectorMasterView
app:use_legacy_parser="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:vector_src="@drawable/man_body" />
Why result are different with same vector image, there are any criteria for VectorMasterView ?
Hi,
I want_ to try this lib, but I get an exception. Here is a cutout of the exception.
Caused by: android.view.InflateException: Binary XML file line #115: Error inflating class com.sdsmdg.harjot.vectormaster.VectorMasterView at android.view.LayoutInflater.createView(LayoutInflater.java:613) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:687) at android.view.LayoutInflater.rInflate(LayoutInflater.java:746) at android.view.LayoutInflater.rInflate(LayoutInflater.java:749) at android.view.LayoutInflater.rInflate(LayoutInflater.java:749) at android.view.LayoutInflater.inflate(LayoutInflater.java:489) at android.view.LayoutInflater.inflate(LayoutInflater.java:396) at android.view.LayoutInflater.inflate(LayoutInflater.java:352) at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:270) at android.app.Activity.setContentView(Activity.java:1881) at de.ratiodata.scan4agree21.activity.TonerActivity.onCreate(TonerActivity.java:26) at android.app.Activity.performCreate(Activity.java:5104) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1080) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2144) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2230) at android.app.ActivityThread.access$600(ActivityThread.java:141) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1234) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:137) at android.app.ActivityThread.main(ActivityThread.java:5041) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:511) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560) at dalvik.system.NativeStart.main(Native Method) Caused by: java.lang.reflect.InvocationTargetException at java.lang.reflect.Constructor.constructNative(Native Method) at java.lang.reflect.Constructor.newInstance(Constructor.java:417) at android.view.LayoutInflater.createView(LayoutInflater.java:587) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:687) at android.view.LayoutInflater.rInflate(LayoutInflater.java:746) at android.view.LayoutInflater.rInflate(LayoutInflater.java:749) at android.view.LayoutInflater.rInflate(LayoutInflater.java:749) at android.view.LayoutInflater.inflate(LayoutInflater.java:489) at android.view.LayoutInflater.inflate(LayoutInflater.java:396) at android.view.LayoutInflater.inflate(LayoutInflater.java:352) at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:270) at android.app.Activity.setContentView(Activity.java:1881) at de.ratiodata.scan4agree21.activity.TonerActivity.onCreate(TonerActivity.java:26) at android.app.Activity.performCreate(Activity.java:5104) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1080) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2144) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2230) at android.app.ActivityThread.access$600(ActivityThread.java:141) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1234) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:137) at android.app.ActivityThread.main(ActivityThread.java:5041) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:511) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560) at dalvik.system.NativeStart.main(Native Method) Caused by: android.content.res.Resources$NotFoundException: File res/drawable-mdpi-v4/image_toner_singeltoner.png from xml type xml resource ID #0x7f06006b at android.content.res.Resources.loadXmlResourceParser(Resources.java:2186) at android.content.res.Resources.loadXmlResourceParser(Resources.java:2141) at android.content.res.Resources.getXml(Resources.java:902) at com.sdsmdg.harjot.vectormaster.VectorMasterView.buildVectorModel(VectorMasterView.java:86) at com.sdsmdg.harjot.vectormaster.VectorMasterView.init(VectorMasterView.java:75) at com.sdsmdg.harjot.vectormaster.VectorMasterView.<init>(VectorMasterView.java:51) at java.lang.reflect.Constructor.constructNative(Native Method) at java.lang.reflect.Constructor.newInstance(Constructor.java:417) at android.view.LayoutInflater.createView(LayoutInflater.java:587) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:687) at android.view.LayoutInflater.rInflate(LayoutInflater.java:746) at android.view.LayoutInflater.rInflate(LayoutInflater.java:749) at android.view.LayoutInflater.rInflate(LayoutInflater.java:749) at android.view.LayoutInflater.inflate(LayoutInflater.java:489) at android.view.LayoutInflater.inflate(LayoutInflater.java:396) at android.view.LayoutInflater.inflate(LayoutInflater.java:352) at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:270) at android.app.Activity.setContentView(Activity.java:1881) at de.ratiodata.scan4agree21.activity.TonerActivity.onCreate(TonerActivity.java:26) at android.app.Activity.performCreate(Activity.java:5104) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1080) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2144) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2230) at android.app.ActivityThread.access$600(ActivityThread.java:141) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1234) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:137) at android.app.ActivityThread.main(ActivityThread.java:5041) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:511) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560) at dalvik.system.NativeStart.main(Native Method) Caused by: java.io.FileNotFoundException: Corrupt XML binary file at android.content.res.AssetManager.openXmlAssetNative(Native Method) at android.content.res.AssetManager.openXmlBlockAsset(AssetManager.java:487) at android.content.res.Resources.loadXmlResourceParser(Resources.java:2168) at android.content.res.Resources.loadXmlResourceParser(Resources.java:2141) at android.content.res.Resources.getXml(Resources.java:902) at com.sdsmdg.harjot.vectormaster.VectorMasterView.buildVectorModel(VectorMasterView.java:86) at com.sdsmdg.harjot.vectormaster.VectorMasterView.init(VectorMasterView.java:75) at com.sdsmdg.harjot.vectormaster.VectorMasterView.<init>(VectorMasterView.java:51) at java.lang.reflect.Constructor.constructNative(Native Method) at java.lang.reflect.Constructor.newInstance(Constructor.java:417) at android.view.LayoutInflater.createView(LayoutInflater.java:587) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:687) at android.view.LayoutInflater.rInflate(LayoutInflater.java:746) at android.view.LayoutInflater.rInflate(LayoutInflater.java:749) at android.view.LayoutInflater.rInflate(LayoutInflater.java:749) at android.view.LayoutInflater.inflate(LayoutInflater.java:489) at android.view.LayoutInflater.inflate(LayoutInflater.java:396) at android.view.LayoutInflater.inflate(LayoutInflater.java:352) at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:270) at android.app.Activity.setContentView(Activity.java:1881) at de.ratiodata.scan4agree21.activity.TonerActivity.onCreate(TonerActivity.java:26) at android.app.Activity.performCreate(Activity.java:5104) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1080) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2144) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2230) at android.app.ActivityThread.access$600(ActivityThread.java:141) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1234) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:137) at android.app.ActivityThread.main(ActivityThread.java:5041) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:511) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560) at dalvik.system.NativeStart.main(Native Method)
Can you say what it is or where is my mistake?
Best regards
LiTe
Hi.
I'm having a display bug when I want to use this vector drawable (SVG file exported with Adobe Illustrator, then converted to VectorDrawable) in a VectorMasterDrawable object. Some paths are missing or deformed, but only with your library, not with the Android drawable API. Can you explain me why ?
Thank you in advance.
Hi,
Is there way, using this library dynamically resize vector drawables, (programatically, maybe)?
Thanks
Hi, thanks for this exciting library.
I have a question.
I use simple vectors in the android studio to supply this library but my vectors don't animate as I want.
I think that's beacuse of how vectors define in xml.
for seeing my problem you just need set a one of defalut vectors to VectorMasterView.
so my question is how should I create a vector that works with this great library?
I hope best wishes for you.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.