I have an SVG image of a dartboard and I recently converted it to a vector using vector asset studio. I'm trying to replicate the functionality of this dartboard shown here.
The only problem I'm having is trying to replicate on click listeners to certain parts of the board since it's just one image. I've tried researching into splitting the vector or imageview into divs and referencing the names inside of the .XML file but nothing came up. Would it be possible to reference the vector paths in code and display the name of the path when a onclick listener is implemented (IE s19)? Or is there a different way to approach this problem?
how dartboard.xml is structured:
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="300dp"
android:height="300dp"
android:viewportHeight="774.0"
android:viewportWidth="787.0">
<group android:name="singles">
<path
android:name="s19"
android:fillColor="#F7E9CD"
android:pathData="M328,561.9c-2,-0.8 -3.9,-1.7 -5.8,-2.6l66.1,-138.9c2,0.8 4.2,1.5 6.4,1.9L374.7,574.8C358.6,572.6 343,568.3 327.9,561.9zM358.7,696.9l13.4,-102.2c-17.8,-2.5 -35.2,-7.3 -51.9,-14.3c-2.2,-0.9 -4.4,-1.9 -6.6,-2.9l-44.3,93.1c3.6,1.7 7.2,3.3 10.8,4.8C305.3,686.1 331.7,693.3 358.7,696.9z"/>
<path
android:name="s14"
android:fillColor="#FF000000"
android:pathData="M215.2,362.7c2.2,-16.1 6.6,-31.7 12.9,-46.7c0.8,-2 1.7,-3.9 2.6,-5.8l138.9,66.1c-0.8,2 -1.5,4.2 -1.9,6.4L215.2,362.7zM93.1,346.7l102.2,13.4c2.5,-17.8 7.3,-35.2 14.3,-51.9c0.9,-2.2 1.9,-4.4 2.9,-6.6l-93.1,-44.3c-1.7,3.6 -3.3,7.2 -4.8,10.8C103.9,293.3 96.7,319.7 93.1,346.7z"/>
My game activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.blue.darts.GameActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:src="@drawable/dartboard"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
For anyone who may come across this, it seems impossible to reference anything from vector asset studio's created vector. Your best bet would be to use a WebView
and display the SVG by converting it to HTML. From there, you can manipulate the local HTML however you like.