How to export and manage badge icons and strings

Badge Icons are available as a pdf.

Icons

From PDF to Single SVG

Note: icons use the haymer petite capitals light font, so you have to install it before to proceed.

• Open the PDF with InkScape page, import the first one.
• divide properly the items
• convert all strings in paths (Select the string, click on trackpath --> convert object to path)
• Save them individually
  • Open a new window for inkscape
  • set the page size to the same size of the icon
  • copy all elements from the pdf imported inkscape window to the new page
  • center it (Object -> Align and distribute, then center horizontally and vertically)
  • Save the icon, as pure SVG, with the name of the badge
• Repeat for all pages

note: you may need to setup inkscape to export svg as absolute (Edit --> Preferences --> Output SVG)

From SVGs to Android drawables

Use this online tool Drag and drop icons, then you can copy them in the drawable folder of the android application.

Keep track of SVGs and localized strings

In order to generate code to associate resources to badge names, we created a script called generate.js. in resources/badges folder. You can execute it to generate the code for BadgeAdapter (static lists add) and values.xml files. You can copy and paste them to speed up your work.

You can run it using nodejs or in the web browser console. SVGs for the icons are in the resources/badges/svg folder.