Styling

Make sure you are using version >= 0.4.3

Starting from version 0.4.3 , we've moved the styling to styles.xml.

You can check res/layout/... and find the component you'd like to style and check the [email protected]/<StyleName> to make your custom style. You can find the default styles at res/values/styles.xml .

For example, you can change the Pin Bullet Size:

If you look at res/layout/pin_input.xml , you'll see:

<TextView
android:id="@+id/input_1"
android:text="\u25CF"
style="@style/CotterPinInputBullet"
/>

This means that you can define your own style for the bullets of the pin by adding the following code to your project's res/values/styles.xml

<resources>
...
<!-- Add the following block,
change the value for `android:textColor` to `50dp`
to make the bullets bigger -->
<style name="CotterPinInputBullet">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:fontFamily">@font/akkurat_bold</item>
<item name="android:textColor">@color/colorLightGrey</item>
<item name="android:textSize">50dp</item>
<item name="android:paddingHorizontal">10dp</item>
</style>
โ€‹
</resources>

Setting Colors and Images

There are some colors and images that are set using Cotter.colors.setColor as mentioned here.

Full list of API to set colors and images:

Cotter.colors.setColorBackground(colorString)
Cotter.colors.setColorBlack(colorString)
Cotter.colors.setColorPrimary(colorString)
Cotter.colors.setColorAccent(colorString)
Cotter.colors.setColorDanger(colorString)
Cotter.colors.setColorDangerLight(colorString)
Cotter.colors.setColorPrimaryLight(colorString)
Cotter.colors.setColorSuperLightGrey(colorString)
Cotter.colors.setSuccessImage(imageInt)
Cotter.colors.setErrorImage(imageInt)
Cotter.colors.setHttpErrorImage(imageInt)
Cotter.colors.setNetworkErrorImage(imageInt)
Cotter.colors.setLogo(imageInt)
Cotter.colors.setTap(imageInt)

List of colors and images that overrides the styling colors and images

  • Container background color = ColorBackground

  • "Show PIn" text = ColorPrimary

  • "Error" Text = ColorDanger

  • Network error dialog: NetworkErrorImage

  • HTTP error dialog: HttpErrorImage (not used)

Pin Box (for Reset Pin)

  • Empty: BoxBackgroundColor = ColorSuperLightGrey

  • Filled: BoxBackgroundColor = ColorPrimaryLight

  • Filled: Box Text Color = ColorBlack

  • Error: BoxBackgroundColor = ColorDangerLight

  • Error: Box Text Color = ColorDanger

Pin Bullet

  • Empty: Bullet = ColorPrimaryLight

  • Filled: Bullet = ColorAccent

  • Error: Bullet = ColorDanger

Trusted Device QR Code

  • QR Code Color: ColorBlack

  • QR Code background: ColorWhite

Success Image on RegisterDeviceQRShowActivity, RegisterDeviceQRScannerActivity, PinEnrollmentSuccessActivity

  • Success Image: SuccessImage

Error Image on RegisterDeviceQRShowActivity, RegisterDeviceQRScannerActivity, RequestAuthSheet

  • Error Image: ErrorImage

ApproveRequestActivity

  • Logo Image: Logo

RequestAuthSheet

  • Tap Image: Tap