Generate shape.xml by Vue for android developer

ditclear
ditclear
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.

Shape4Android

The name is inspired by inloop/shadow4android.

online experience :https://ditclear.github.io/shape4android/

Feature

  • 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

selector:selector_shape_n_color_p_pressedColor_u_unableColor.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

TODO

  • 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.


ditclear

Written by

ditclear

Adventure of my lifeTime