How to access or translate text in Vector Drawables
Solution 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.
Solution 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
.
Simon Hutton
Updated on June 09, 2022Comments
-
Simon Hutton almost 2 years
I have a custom
view
which displays adrawable
and detects touches. It has a number ofdrawable
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 thecanvas
?!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?