> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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-rn-guide-message-privately/le8ibYc8lBJsShSE/images/512b7dc2-wlt51ffbhd9jzdg7z6lnte79sev416ugyokd5w9o8uszp42sdob3zxfmx2ar8eg6-c582be8a7785966b93aa6a6e0b220855.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=e6875d7a972386ad4dba9f08e897f4ba" 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>