Miscellaneous

System Colors

Any R.color that starts with the prefix “system_” can be used as substitute for a CSS color.

squared.settings.resourceSystemColors = {
  "system_accent1_0": "white", // Converted to ARGB
  "system_accent1_50": "#FFFFFF", // Will override "system_accent1_0"
  "system_accent1_100": ["white", 0.75], // Different color with opacity
  "system_accent1_200": "hwb(12 50% 0%)", // rgb + hsl
  "system_accent1_300": squared.lib.color.parseColor("#000", 1)
};

Note

Android 12 API 31 is required when using accent colors. [1]

?attr/color*

squared.settings.preferMaterialDesign = "MaterialComponents"; // Required
squared.settings.resourceSystemColors = {
  "system_accent1_0": "white", // Invalid
  "colorPrimary": "white",
  "colorSecondary": "rgb(255 0 0)"
};

When any element uses a CSS color it will be substituted with the same value in the global system color map. This behavior can be disabled locally using dataset attributes.

Active (highlight)

<div data-android-system-color-children="false">
  <span>Item 1</span>
  <span data-android-system-color="true">Item 2</span>
  <div>
    <span>Item 3</span>
  </div>
  <div>
    <span data-android-system-color="false">Item 4</span>
  </div>
  <div data-android-system-color="true">
    <span data-android-system-color="inherit">Item 5</span>
  </div>
  <div>
    <span data-android-system-color="inherit">Item 6</span>
  </div>
<div>

Redirecting Output

Sometimes it is necessary to extract elements and append them into other containers for it to look identical on the Android device. Usually it is when you are using an App widget and never with the standard layouts.

<div>
  <span>Item 1</span>
  <span data-android-target="location">Item 2</span>
  <span data-android-target="location" data-android-target-index="1">Item 3</span>
<div>
<ul id="location">
  <li>Item 4</li>
  <li>Item 5</li>
  <!-- span -->
</ul>

<LinearLayout>
  <TextView>Item 1</TextView>
</LinearLayout>
<LinearLayout>
  <TextView>Item 4</TextView>
  <TextView>Item 3</TextView>
  <TextView>Item 5</TextView>
  <TextView>Item 2</TextView>
</LinearLayout>

Note

Using target into a ConstraintLayout or RelativeLayout container will not include automatic positioning. Redirection will fail if the target location is not a block/container element.