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
.<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>
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
Last modified 2yr ago