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

Setting Strings

Older SDK Version

Last modified 1yr ago

Copy link

Outline

Setting Colors and Images