# Styling

{% hint style="info" %}
Make sure you are using version `>= 0.4.3`
{% endhint %}

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`](https://github.com/cotterapp/android-sdk/blob/master/app/src/main/res/values/styles.xml) .

#### For example, you can change the Pin Bullet Size:

If you look at [`res/layout/pin_input.xml`](https://github.com/cotterapp/android-sdk/blob/master/app/src/main/res/layout/pin_input.xml) , you'll see:

```markup
<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`**

```markup
<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](https://docs.cotter.app/sdk-reference/android/android-sdk-2/customization#setting-the-colors).

**Full list of API to set colors and images:**

```java
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`&#x20;
* "Show PIn" text = `ColorPrimary`&#x20;
* "Error" Text = `ColorDanger`
* Network error dialog: `NetworkErrorImage`&#x20;
* HTTP error dialog: `HttpErrorImage` (not used)

**Pin Box (for Reset Pin)**&#x20;

* Empty: BoxBackgroundColor = `ColorSuperLightGrey`&#x20;
* Filled: BoxBackgroundColor = `ColorPrimaryLight`&#x20;
* Filled: Box Text Color = `ColorBlack`&#x20;
* Error: BoxBackgroundColor = `ColorDangerLight`&#x20;
* Error: Box Text Color = `ColorDanger`

**Pin Bullet**&#x20;

* Empty: Bullet = `ColorPrimaryLight`&#x20;
* Filled: Bullet = `ColorAccent`&#x20;
* Error: Bullet = `ColorDanger`

**Trusted Device QR Code**&#x20;

* QR Code Color: `ColorBlack`&#x20;
* QR Code background: `ColorWhite`

**Success Image on RegisterDeviceQRShowActivity, RegisterDeviceQRScannerActivity, PinEnrollmentSuccessActivity**&#x20;

* Success Image: `SuccessImage`

**Error Image on RegisterDeviceQRShowActivity, RegisterDeviceQRScannerActivity, RequestAuthSheet**&#x20;

* Error Image: `ErrorImage`

**ApproveRequestActivity**&#x20;

* Logo Image: `Logo`

**RequestAuthSheet**&#x20;

* Tap Image: `Tap`