How to access or translate text in Vector Drawables

Question

I have a custom view which displays a drawable and detects touches. It has a number of drawable layers, some of which contain text, for example,

I have converted each SVG vector graphic into a vector drawable and want to be able to set the text to be a resource so I can substitute different translations.

The SVG xml code for the 'Hello box' above :-

<svg
   width="800"
   height="400"
   viewBox="0 0 800 400.00001"
   id="svg5772"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="HELLO in a box.svg">
  <defs
     id="defs5774" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
    <rect
       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="rect6320"
       width="468.57144"
       height="128.57143"
       x="174.28572"
       y="786.64795"
       rx="0"
       ry="0" />
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x="348.57141"
       y="869.50507"
       id="text6322"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan6324"
         x="348.57141"
         y="869.50507">HELLO!!!</tspan></text>
  </g>
</svg>

...converts to this vector drawable xml :-

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="800"
    android:viewportHeight="400"
    android:width="800dp"
    android:height="400dp">
    <group
        android:translateY="-652.3621">
        <path
            android:pathData="M174.28572 786.64795l468.57144 0 0 128.57143 -468.57144 0z"
            android:strokeWidth="2"
            android:fillColor="#ffffff"
            android:strokeLineJoin="round"
            android:strokeLineCap="round"
            android:strokeMiterLimit="4"
            android:strokeColor="#000000" />
        <path
            android:pathData="M374.72375 869.50507l-3.86718 0 0 -14.23829 -14.51172 0 0 14.23829 -3.86719 0 0 -29.08204 3.86719 0 0 11.40625 14.51172 0 0 -11.40625 3.86718 0 0 29.08204z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M401.71594 869.50507l-19.16015 0 0 -29.08204 19.16015 0 0 3.4375 -15.29297 0 0 7.96875 15.29297 0 0 3.4375 -15.29297 0 0 10.80079 15.29297 0 0 3.4375z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M426.26672 869.50507l-18.39843 0 0 -29.08204 3.86718 0 0 25.64454 14.53125 0 0 3.4375z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M448.53235 869.50507l-18.39844 0 0 -29.08204 3.86719 0 0 25.64454 14.53125 0 0 3.4375z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M473.6886 843.76288q1.77734 1.95312 2.71484 4.78515 0.95703 2.83204 0.95703 6.42579 0 3.59375 -0.97656 6.44531 -0.95703 2.83203 -2.69531 4.72656 -1.79688 1.97266 -4.25781 2.96875 -2.44141 0.99609 -5.58594 0.99609 -3.06641 0 -5.58594 -1.01562 -2.5 -1.01563 -4.25781 -2.94922 -1.75781 -1.93359 -2.71485 -4.74609 -0.9375 -2.8125 -0.9375 -6.42578 0 -3.55469 0.9375 -6.36719 0.9375 -2.83203 2.73438 -4.84375 1.71875 -1.91406 4.25781 -2.92969 2.5586 -1.01562 5.56641 -1.01562 3.125 0 5.60547 1.03515 2.5 1.01563 4.23828 2.91016zm-0.35156 11.21094q0 -5.66407 -2.53907 -8.73047 -2.53906 -3.08594 -6.93359 -3.08594 -4.43359 0 -6.97266 3.08594 -2.51953 3.0664 -2.51953 8.73047 0 5.72265 2.57813 8.76953 2.57812 3.02734 6.91406 3.02734 4.33594 0 6.89453 -3.02734 2.57813 -3.04688 2.57813 -8.76953z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M489.64563 840.42303l-0.50781 21.07422 -3.32032 0 -0.54687 -21.07422 4.375 0zm-0.19531 29.08204l-3.98438 0 0 -4.1211 3.98438 0 0 4.1211z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M505.42688 840.42303l-0.50781 21.07422 -3.32032 0 -0.54687 -21.07422 4.375 0zm-0.19531 29.08204l-3.98438 0 0 -4.1211 3.98438 0 0 4.1211z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M521.20813 840.42303l-0.50781 21.07422 -3.32032 0 -0.54687 -21.07422 4.375 0zm-0.19531 29.08204l-3.98438 0 0 -4.1211 3.98438 0 0 4.1211z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
    </group>
</vector>

It looks very much like each letter of "HELLO!!!" text is converted into a path to be drawn directly to the canvas?!

So my question is, is there alternative way of displaying the vector graphic containing text on a canvas and therefore being able to use a resource for the text part? or am I stuck with creating different graphics for each language?

Answer 1

Your conclusion is right.

Vector drawables are completely path based. This is the underlying reason for their animation because only a path is being changed. Hence they don't take text or image as input.

An option might be getting .svg through text(Some tool maybe?) and then convert it to xml for each language. If you are targeting larger localization, vector drawable may not be the right approach.

Answer 2

You are going to have to use an approach that separates the localizable content from the drawable.

It's not clear what exactly you are doing, but if for example you want to have custom buttons, then you should make the VectorDrawable just be the custom button design. Then either use the drawable as a background to a TextView, or superimpose the text part as a TextView on top of an ImageView.