How to style Forage Android Elements

Whether you’re styling a ForagePINEditText or a ForagePANEditText Element, for online-only or POS, the steps are the same. However, keep in mind that the available customizable properties differ depending on the Element type.

After you've added an Element component file in your app’s /layout/ directory, add a theme attribute for the Element to your attrs.xml. This example adds an attribute for the PAN Element called tokenizeForagePANEditTextStyle:

<!-- attrs.xml -->

<resources>
    ...
    <!-- Theme attribute for the ForagePANEditText on the tokenize fragment. -->
    <attr name="tokenizeForagePANEditTextStyle" format="reference" />
    ...
</resources>

Then apply the attribute as a style tag in the Element component file, as in this example snippet:

<!-- forage_pan_component.xml -->

<!-- abridged snippet, style tag only -->
<com.joinforage.forage.android.ui.ForagePANEditText
    style="?attr/tokenizeForagePANEditTextStyle"
/>

Next, add an <item> tag for the style in themes.xml, as in the following example:

<!-- themes.xml -->

<resources>
    <!-- base application theme -->
    <style name="Theme.Forageandroid">
        ...
        <!-- The ForagePANEditText style -->
        <item name="tokenizeForagePANEditTextStyle">@style/TokenizeForagePANEditTextStyle</item>
        ...
    </style>
</resources>

Finally, define the style’s properties in styles.xml. The below snippet specifies boxStrokeWidth and boxStrokeColor for the Element:

<!-- styles.xml -->

<resources>
    ...
    <!-- Style for the ForagePANEditText -->
    <style name="TokenizeForagePANEditTextStyle">
        <item name="panBoxStrokeColor">@color/pan_box_stroke_color</item>
        <item name="panBoxStrokeWidth">1dp</item>
    </style>
    ...
</resources>

Styling options

ForagePANEditText and ForagePINEditText have different customizable properties.

Consult the below tables for a comprehensive list of all styling options per Element.

ForagePANEditText customizable attributes

Box styles

Text styles

ForagePINEditText customizable attributes

Box styles

Element styles

Text styles