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 , ForagePINEditText, and ForagePinPad have different customizable properties.

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

`ForagePANEditText` customizable attributes

Box styles

Parameter	Part of View
`panBoxStrokeColor`	Color
`cornerRadius`	Dimension
`boxCornerTopEnd`	Dimension
`boxCornerTopStart`	Dimension
`boxCornerBottomStart`	Dimension
`boxCornerBottomEnd`	Dimension
`panBoxStrokeWidth`	Dimension
`panBoxStrokeWidthFocused`	Dimension

Text styles

Parameter	Part of View
`android:textColor`	Color
`android:textSize`	Dimension
`textInputLayoutStyle`	Reference

`ForagePINEditText` customizable attributes

Box styles

Parameter	Part of View
`boxBackgroundColor`	Color
`pinBoxStrokeColor`	Color
`boxCornerRadiusTopEnd`	Dimension
`boxCornerRadiusTopStart`	Dimension
`boxCornerRadiusBottomStart`	Dimension
`boxCornerRadiusBottomEnd`	Dimension
`boxCornerRadius`	Dimension

Element styles

Parameter	Part of View
`elementHeight`	Dimension
`elementWidth`	Dimension

Text styles

Parameter	Part of View
`hintTextColor`	Color
`textColor`	Color
`textSize`	Dimension
`inputHeight`	Dimension
`inputWidth`	Dimension
`pinInputLayoutStyle`	Reference
`hint`	String

`ForagePinPad` customizable attributes

Any LinearLayout properties can be applied to the ForagePinPad Element, in addition to the following unique properties.

Button styles

Parameter	Type
`app:forage_buttonLayoutMargin`	Dimension
`app:forage_buttonLayoutHeight`	Dimension
`app:forage_deleteButtonIcon`	Reference

Example `ForagePinPad` styling

<com.joinforage.forage.android.pos.ui.element.ForagePinPad
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    
    app:forage_buttonLayoutMargin="@dimen/keypad_btn_margin"
    app:forage_buttonLayoutHeight="@dimen/keypad_btn_height"
    app:forage_deleteButtonIcon="@android:drawable/ic_delete"
/>

Styling options

ForagePANEditText customizable attributes

Box styles

Text styles

ForagePINEditText customizable attributes

Box styles

Element styles

Text styles

ForagePinPad customizable attributes

Button styles

Example ForagePinPad styling

`ForagePANEditText` customizable attributes

`ForagePINEditText` customizable attributes

`ForagePinPad` customizable attributes

Example `ForagePinPad` styling