Generate shape.xml by Vue for android developer

Jan 23 · 1 min read

In the daily Android development, we usually create a shape or selector background according to the UI diagram.Although it is very simple to create, but also feel a bit tedious.

Due to a recent study Vue, the idea that there will be a rapid generation shape background by Vue.


The name is inspired by inloop/shadow4android.

online experience :


  • support common retangle and oval styles
  • support setting color
  • support for shape and selector (selector supports commonly used pressed and disable)
  • support setting rounded corners
  • support for setting border width and color
  • support for modifying file names

Default Naming Rules

shape: shape_type_color_roundTL_roundTR_roundBL_roundBR_borderWidth_borderColor.xml


If you customize the file name, the shape in the selector will follow the type name by default, for example xx_norm.xml/xx_pressed.xml/xx_unable.xml


  • more shapes
  • dotted line
  • gradient
  • rippleColor

In essence, it is similar to the Java/Kotlin file required for APT compilation.

The code is actually very simple, just assemble the shape or selector.xml file according to the parameters filled in. After all, it is the templated code, and then download it with filesaver.js.


Written by


Adventure of my lifeTime