> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge

> Badge — CometChat documentation.

`CometChatBadge` is the custom component which is used to display the unread message count. It can be used in places like CometChatListItem, etc.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/BTyA3fntHJWsLbGg/images/512b7dc2-wlt51ffbhd9jzdg7z6lnte79sev416ugyokd5w9o8uszp42sdob3zxfmx2ar8eg6-c582be8a7785966b93aa6a6e0b220855.png?fit=max&auto=format&n=BTyA3fntHJWsLbGg&q=85&s=c078ce311e5b3360f703174e5e15f827" width="1312" height="1299" data-path="images/512b7dc2-wlt51ffbhd9jzdg7z6lnte79sev416ugyokd5w9o8uszp42sdob3zxfmx2ar8eg6-c582be8a7785966b93aa6a6e0b220855.png" />
</Frame>

***

## How to integrate CometChatBadgeCount ?

Since `CometChatBadge` is a custom view, it can be added directly in the layout file or you can use it in Java. `CometChatBadge` includes various attributes and methods to customize its UI.

#### Usage in XML

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <com.cometchat.chatuikit.shared.views.CometChatBadge.CometChatBadge
            android:id="@+id/badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    ```
  </Tab>
</Tabs>

## XML Attributes

| Parameters | Description |
| - | - |
| `app:count_background_color` | Used to set the backgroundColor |
| `app:strokeWidth` | Used to set the borderWidth |
| `app:count` | Used to set value of count. |
| `app:count_color` | Used to set color of count value. |
| `app:count_size` | Used to set text size of count value |

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <com.cometchat.chatuikit.shared.views.CometChatBadge.CometChatBadge
                    android:layout_gravity="center"
                    android:layout_width="wrap_content"
                    app:count="1"
                    app:count_background_color="@color/colorPrimaryDark"
                    app:count_color="@color/light_grey"
                    android:id="@+id/badge"
                    android:layout_height="wrap_content"/>
    ```
  </Tab>
</Tabs>

## Methods

### **Customization**

This Methods are use to do modify the appearance of CometChatBadge

| Methods | Description |
| - | - |
| **cornerRadius(float radius)** | Used to set the cornerRadius |
| **borderColor(@ColorInt int color)** | Used to set the borderColor |
| **setBackground(@ColorInt int color)** | Used to set the backgroundColor |
| **borderWidth(int width)** | Used to set the borderWidth |
| **setCount(int counValue)** | Used to set value of count. |
| **setTextColor(@ColorInt int color)** | Used to set color of count value(TextView) |
| **setTextSize(float size)** | Used to set text size of count value |

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatBadge badge = findViewById(R.id.badge);
    //syntax for cornerRadius(float radius)
    badge.cornerRadius(18);

    //syntax for borderColor(@ColorInt int color)
    badge.borderColor(getResources().getDrawable(R.drawable.stroke_color));

    //syntax for setBackground(@ColorInt int color)
    badge.setBackground(getResources().getDrawable(R.drawable.background));

    //syntax for borderWidth(int width)
    badge.borderWidth(1);

    //syntax for setCount(int counValue)
    badge.setCount(12);

    //syntax for setTextColor(@ColorInt int color)
    badge.setTextColor(getResources().getDrawable(R.drawable.count_color));

    //syntax for setTextSize(float size)
    badge.setTextSize(10);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val badge = findViewById<CometChatBadge>(R.id.badge)
    			
    				//syntax for cornerRadius(float radius)
            badge.cornerRadius(18f)

    				

    				//syntax for borderColor(@ColorInt int color)
            badge.borderColor(resources.getDrawable(R.drawable.stroke_color))

    				

    				//syntax for setBackground(@ColorInt int color)
            badge.background = resources.getDrawable(R.drawable.background)

    				

    				//syntax for borderWidth(int width)
            badge.borderWidth(1)

    				

    				//syntax for setCount(int counValue)
            badge.count = 12

    			

    				//syntax for setTextColor(@ColorInt int color)
            badge.setTextColor(resources.getDrawable(R.drawable.count_color))

    				

    				//syntax for setTextSize(float size)
            badge.setTextSize(10)
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.