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 style=@style/<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