Developers

Styling your payment flow

The PaymentActivity requires a “Translucent” theme to be shown correctly. In the most simple usage, you can set it’s theme to android:Theme.Translucent.NoTitleBar and it will work just fine. One caveat of this approach is that the ProgressBars that are displayed will look like the “old” pre-Holo widgets. To resolve that, we can set different styles to the PaymentActivity depending on the API level of the application.

We need three different styles. One “base” style, one for API 14 and greater and finally one for API 21 and greater. These can go in your styles.xml file and should look like this:

Base style (res/values folder)

<resources>
    <style name="PaymentActivityTheme" parent="android:Theme.Translucent.NoTitleBar"/>
</resources>

API 14 and greater (res/values-v14 folder)

<resources>
    <style name="PaymentActivityTheme" parent="android:Theme.Holo.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation</item>
        <item name="android:windowActionBar">false</item>
    </style>
</resources>

API 21 and greater (res/values-v21 folder)

<resources>
    <style name="PaymentActivityTheme" parent="android:Theme.Material.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation</item>
        <item name="android:windowActionBar">false</item>
    </style>
</resources>

Note that the difference between API 14 and API 21 themes is the parent theme – one former one uses android:Theme.Holo.NoActionBar while the latter one uses android:Theme.Material.NoActionBar. After you define these styles, you can apply them to your PaymentActivity, like so:

<activity
    android:name="ch.nth.payment.PaymentActivity"
    android:configChanges="orientation|keyboardHidden|screenSize"
    android:theme="@style/PaymentActivityTheme"/>