Ability to show Icons in a custom cartersian marker

[Praveen-Android]

Question

is it possible to customize the marker label to show an icon drawable in addition to text?

Vico version(s)

2.0.0-alpha.28

UI framework(s)

No response

[Gowsky]

Hi @Praveen-Android. Yes, it's possible. Could you clarify if "custom cartesian marker" refers to a customized instance of DefaultCartesianMarker, or a fully custom implementation of the CartesianMarker interface?

[Praveen-Android]

Thanks for the reply @Gowsky . Here is something that I am looking to achieve:

Here is what I was able to do so far:

• Customize the indicator using the indicator property of DefaultCartesianMarker.
• Prepare custom label background using background property of label TextComponent that gets fed in to DefaultCartesianMarker.

Couple things I am not sure on how to do:

• Multiple labels with different styles appended together
• Add an icon (as shown in the image)

From what i understand, its possible to manipulate text using CartesianMarkerValueFormatter but not sure about the icon. Would highly appreciate any suggestions/directions in this regards.

Thanks!

[Praveen-Android]

@Gowsky Just curious to see if you got a chance to take a look at my reply above. Any direction on this would be super helpful. Appreciate the time!

[Gowsky]

@Praveen-Android CartesianMarkerValueFormatter expects you to return CharSequence. Therefore you can use SpannableString with ImageSpan to add an icon to your text. Also, please note that CartesianMarker is an interface that allows you to draw anything on Canvas.

[Praveen-Android]

ah ok understood. Will give it a try. Thanks for the reply!

[Gowsky]

You're welcome!

[Praveen-Android]

@Gowsky fyi, I tried your suggestion and was able to get the desired marker. Thanks much!

marker_recording.mov

One thing I noticed is that there is quite a bit of margin that is added for markers at the corners. (Image and in the video above). I would like the marker be as close to the point as possible but not go off the edge. Looks like the rectangle is rendered by CorneredShape and the triangular tick itself is rendered by MarkerCorneredShape.

So may be i need a custom implementation of CorneredShape and MarkerCorneredShape could use that? but not sure if thats the way to go.

Could you give me any pointers on what pieces I would need to update in probably the outline method of CorneredShape to achieve what I am looking for.

Thanks!

[Gowsky]

Please share your code. This doesn't happen in the sample app. A custom Shape shouldn't be necessary here.