Links

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