HomeGuidesReference
Log In
Guides

How to style Forage Android Elements

Learn how to style Forage Elements when building with the Android SDK

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

ParameterPart of View
panBoxStrokeColorColor
cornerRadiusDimension
boxCornerTopEndDimension
boxCornerTopStartDimension
boxCornerBottomStartDimension
boxCornerBottomEndDimension
panBoxStrokeWidthDimension
panBoxStrokeWidthFocusedDimension

Text styles

ParameterPart of View
android:textColorColor
android:textSizeDimension
textInputLayoutStyleReference

ForagePINEditText customizable attributes

Box styles

ParameterPart of View
boxBackgroundColorColor
pinBoxStrokeColorColor
boxCornerRadiusTopEndDimension
boxCornerRadiusTopStartDimension
boxCornerRadiusBottomStartDimension
boxCornerRadiusBottomEndDimension
boxCornerRadiusDimension

Element styles

ParameterPart of View
elementHeightDimension
elementWidthDimension

Text styles

ParameterPart of View
hintTextColorColor
textColorColor
textSizeDimension
inputHeightDimension
inputWidthDimension
pinInputLayoutStyleReference
hintString

ForagePinPad customizable attributes

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

Button styles

ParameterType
app:forage_buttonLayoutMarginDimension
app:forage_buttonLayoutHeightDimension
app:forage_deleteButtonIconReference

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"
/>