I have a VectorDrawable that I need to edit during runtime. I know how to create a VectorDrawable Resource using xml, but I need to edit the pathData of the path element during runtime. I am having trouble finding the documentation on & how to edit the different components of a VectorDrawable in codebehind. Any ideas?

Hello, Welcome to our Microsoft Q&A platform! If you xml file put in the Assets folder, you can use this way to edit the xml at the runtime, XmlDocument xmlDocument = new XmlDocument(); xmlDocument.Load(Assets.Open("MyVictor.xml")); XmlNodeList tagList = xmlDocument.GetElementsByTagName("path"); foreach (XmlElement xmlElement in tagList) { XmlAttribute name = xmlElement.GetAttributeNode("android:pathData"); name.Value = @"M15.5,14h-0.79l-0.28,-0.27C15.41,12.59"; //if (name.Equals("pathData")) //{ // xmlElement.InnerText = @"M15.5,14h-0.79l-0.28,-0.27C15.41,12.59"; //} } Best Regards, Leon Lu If the response is helpful, please click " Accept Answer " and upvote it. Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Creating/Editing VectorDrawable in Code

Accepted answer

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,741 Reputation points Microsoft Vendor

2021-09-24T04:47:26.727+00:00
Hello,

Welcome to our Microsoft Q&A platform!

If you xml file put in the Assets folder, you can use this way to edit the xml at the runtime,

XmlDocument xmlDocument = new XmlDocument(); xmlDocument.Load(Assets.Open("MyVictor.xml")); XmlNodeList tagList = xmlDocument.GetElementsByTagName("path"); foreach (XmlElement xmlElement in tagList) { XmlAttribute name = xmlElement.GetAttributeNode("android:pathData"); name.Value = @"M15.5,14h-0.79l-0.28,-0.27C15.41,12.59"; //if (name.Equals("pathData")) //{ // xmlElement.InnerText = @"M15.5,14h-0.79l-0.28,-0.27C15.41,12.59"; //} }

Best Regards,

Leon Lu

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Nathan Sokalski 4,121 Reputation points

2021-09-24T18:03:06.04+00:00

If I do this, how will I access it to use it as the background property for one of my Views (or display it in some other way)? Normally I would put it in the drawable folder. Is there a way to obtain it as a VectorDrawable?

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,741 Reputation points Microsoft Vendor

2021-09-27T08:07:55.557+00:00

Is there a way to obtain it as a VectorDrawable?

Do you want to achieve it with C# code not create a xml?

Nathan Sokalski 4,121 Reputation points

2021-09-27T15:23:19.573+00:00

Yes. I have 4 path elements in a vector as follows, this is what I would have if I were to make a static xml drawable:

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="1350dp" android:height="1620dp" android:viewportWidth="1350" android:viewportHeight="1620"> <path android:pathData="M13 1302L857 401V311L13 1052Z" android:fillColor="#80c0c0c0"/> <path android:pathData="M13 1052L857 311H947L263 1052Z" android:fillColor="#80c0c0c0"/> <path android:pathData="M263 1302L947 401V311L263 1052Z" android:fillColor="#80c0c0c0"/> <path android:pathData="M13 1302L857 401H947L263 1302Z" android:fillColor="#80c0c0c0"/> </vector>

Notice the width, height, viewportWidth, and viewportHeight, which will also be calculated so that it correctly spans the entire screen. I currently use a FrameLayout with a background as follows:

<FrameLayout android:id="@+id/frmProjection" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_column="0" android:layout_row="0" android:layout_columnSpan="4" android:layout_rowSpan="3" android:background="@drawable/puzzlesquareprojection"/>

Whether I use this xml file and edit it in code or completely generate it (although I will then need to also specify the fillColor) are both fine, as long as I can dynamically edit/update the pathData. What should I do?

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,741 Reputation points Microsoft Vendor

2021-09-29T01:32:57.947+00:00

First of all, use C# to write vector, it cannot be achieved, You can use above XmlDocument to read xml, then change the value from pathData and android:fillColor.

If you just want to change the android:fillColor from blue to red, or change the pathdata from two or three fixed value, you can create two or three static xml drawable, then change the xml drawable at runtime like this thread.

https://stackoverflow.com/questions/52332409/changing-vector-drawable-color

Nathan Sokalski 4,121 Reputation points

2021-09-29T01:50:42.987+00:00

If I use the XmlDocument technique you mention, how do I assign the vector to my View? Your code has the xml in the Assets directory, but I am using it as a drawable/resource. Should my original xml file be in the Assets directory, the drawable directory, or somewhere else? I am very confused about where I should be putting stuff and how to use it when all I am trying to do is apply a few generated values to a vector/path.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,741 Reputation points Microsoft Vendor

2021-10-01T05:56:40.28+00:00

Please see this thread:https://stackoverflow.com/a/10285485/10627299

Nathan Sokalski 4,121 Reputation points

2021-10-06T18:50:52.727+00:00

If you xml file put in the Assets folder, you can use this way to edit the xml at the runtime

If I put the file in Assets, how do I use it as the android:background? Because Assets does not have (at least not to my knowledge) a way to reference it like @drawable/XXX is used to reference the drawable resources.

Nathan Sokalski 4,121 Reputation points

2021-10-10T18:32:19.87+00:00

I am looking into using Draw & Canvas with PathParser. I created the following code (datastrings is an array of the strings that would go in pathData):

Canvas projectioncanvas = new Canvas(); Paint projectionpaint = new Paint() { Color = new Color(128, 192, 192, 192) }; Android.Graphics.Path projectionpath = new Android.Graphics.Path(); projectionpath.AddPath(AndroidX.Core.Graphics.PathParser.CreatePathFromPathData(datastrings[0])); projectionpath.AddPath(AndroidX.Core.Graphics.PathParser.CreatePathFromPathData(datastrings[1])); projectionpath.AddPath(AndroidX.Core.Graphics.PathParser.CreatePathFromPathData(datastrings[2])); projectionpath.AddPath(AndroidX.Core.Graphics.PathParser.CreatePathFromPathData(datastrings[3])); projectioncanvas.DrawPath(projectionpath, projectionpaint); this.frmProjection.Draw(projectioncanvas);

However, this does not seem to be doing anything. I have not tried creating a custom layout by inheriting from FrameLayout (this.frmProjection is a FrameLayout), but I would not think this would be necessary, since I am generating the canvas that I pass to Draw). I tried creating other Canvas, but could not get them to appear either. Am I doing something wrong?

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,741 Reputation points Microsoft Vendor

2021-10-11T06:41:11.563+00:00

Please add your draw code to the Android.Views.view like following code.

public class MyTestView : View { //private readonly ShapeDrawable _shape; public MyTestView(Context context) : base(context) { } protected override void OnDraw(Canvas canvas) { Paint projectionpaint = new Paint() { Color = new Color(128, 192, 192, 192) }; Android.Graphics.Path projectionpath = new Android.Graphics.Path(); string mypath = "M0.5,180.52h358v340h-358z"; projectionpath.AddPath(AndroidX.Core.Graphics.PathParser.CreatePathFromPathData(mypath)); projectionpath.AddPath(AndroidX.Core.Graphics.PathParser.CreatePathFromPathData(mypath)); projectionpath.AddPath(AndroidX.Core.Graphics.PathParser.CreatePathFromPathData(mypath)); projectionpath.AddPath(AndroidX.Core.Graphics.PathParser.CreatePathFromPathData(mypath)); canvas.DrawPath(projectionpath, projectionpaint); //_shape.Draw(canvas); } }

Then addview to the Framelayout.

FrmProjection frmProjection = new FrmProjection(this); frmProjection.LayoutParameters = new ViewGroup.LayoutParams(Android.Views.ViewGroup.LayoutParams.MatchParent, Android.Views.ViewGroup.LayoutParams.MatchParent); frmProjection.AddView(new MyTestView(this)); SetContentView(frmProjection);

Here is running screenshot.

Nathan Sokalski 4,121 Reputation points

2021-10-11T19:44:15.46+00:00

What is FrmProjection? It looks like some type, but it is not defined anywhere?

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,741 Reputation points Microsoft Vendor

2021-10-12T01:17:23.823+00:00

FrmProjection is a FrameLayout.

public class FrmProjection : FrameLayout { public FrmProjection(Context context) : base(context) { } }

Nathan Sokalski 4,121 Reputation points

2021-10-12T03:07:52.52+00:00

Thanks, that seems to be working, but I have one more question. Because I need to redraw the view when my data changes, how can I force a call to OnDraw? I have seen that there is a Draw method, but that requires a parameter of type Canvas. How can I force a call to OnDraw, or what should I pass to the Draw method?

Nathan Sokalski 4,121 Reputation points

2021-10-12T03:22:41.48+00:00

I think I found the answer, just call Invalidate(). Thanks for all your help!
Sign in to comment

Creating/Editing VectorDrawable in Code

0 additional answers