When creating UI we try to re-use as much as we can. This allows for easier refactoring, and good standards in our codebase. Below are some ways to re-use some global resources defined and available in our project.
In order to use our predefined global colors, you can just add @colors/[color name]. For example: @colors/primaryRed.
If you need a color custom for your feature that is not defined there, you can define it in a local colors.xml in your module.
There should never be hex values directly in a layout file (or any place other than a colors.xml file in general)
If you are following a Figma design file, you can find the color name here:
// FIGMA COLOR IMAGE
When using dimensions, we never use dp values directly in our layouts. We use @dimen/[dimension name].
If you need a generic dimension (multiple of 8), you can just use @dimen/normal_[value] . For example, for 16dp you can use @dimen/normal_16.
If you re-use a specific dimension that has a concept tied to it a lot, you can create a dimens.xml file in your module and define a dimension using a more semantic name (using the above resources as base values).
In the case of global commonly used dimensions, those will be defined in the generic dimens.xml file. For example:
@dimens/page_padding->16dp
Note: When reading Figma designs, keep the following in mind:
- Although it assigns widths/heights to all elements, we don't actually set those using
dpin our code. We use layouts and constraints, along with paddings/margins, and let the layout form itself. - When measuring paddings and margins, keep in mind that all our dimensions are multiples of 8 and that sometimes the Figma inspector is a bit off. So if you see an element with a padding of
15dpon one side and17dpon the other, it's actually just16dphorizontal padding.
The above are general guidelines. There is of course always exceptions. Use your best judgement and if you are un-sure, just contact someone in the designer team and ask to verify.
When using <TextView>s, moving forward with the redesign, we will be using style elements to apply the required styling.
When inspecting a text element in the design you can see the following on the sidebar:
// TEXT STYLE FIGMA IMAGE
That first field is the typography name that is predefined and available to use.
Naming convention examples:
- App/Body -> TextAppearance.Macys.Body
- App/Links/Body Small Link -> TextAppearance.Macys.Links.BodySmallLink
To use it, you can just add style="@style/Macys.TextAppearance.Body" to your TextView. If you need a slightly different typography for some reason you can also define one locally in your module extending one of the parent ones.
Note: You shouldn't find a text field that does not have a typography name attached to it. If you do, please contact someone in the design team so they can add it. We shouldn't have custom text in our layouts. They should all be following our typography guidelines and using one of the defined classes. If there's a new appearance and needs to be defined, you can see this document to define it: [Link to other document]
Similar to the text above, we have button styles that we can use to style our <Button> and <MaterialButton> views.
To use them, you can just add style="@style/Macys.Buttons.Primary" (or similar) to your button.
For local, custom buttons, you can create styles in your feature's module.
Images and Drawables are usually added to your module's drawables folder. If, however, there's an image or icon that is used very widely in the app, those might exist in the adp-ds-ui module and are accessible to your module by default.
There are some more complex components and abstractions available to use. Some are listed below:
- Generic RecyclerViewAdapter and Binding
- Transparent Header
- Tab Layout controller