> ## 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.

# Avatar

> Avatar — CometChat documentation.

`CometChatAvatar` component displays an image or user's avatar with fallback to the first two letters of the username or group's icon with fallback to the first two letter of the group name.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2d5e5bdb-iaut9ris3qsp06esxrfgn13x9y6uzpulcrgiocg97f47keqml8k1zc3tbi2osmdq-2068d7d2d32a12ca9dfbfbcc514a7288.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=26524a99a2dca8a3cdccc2b905542b03" width="1152" height="449" data-path="images/2d5e5bdb-iaut9ris3qsp06esxrfgn13x9y6uzpulcrgiocg97f47keqml8k1zc3tbi2osmdq-2068d7d2d32a12ca9dfbfbcc514a7288.png" />
</Frame>

***

## How to integrate CometChatAvatar ?

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

#### Usage in XML

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

## XML Attributes

| Parameters                           | Description                     |
| ------------------------------------ | ------------------------------- |
| `app:corner_radius="18dp"`           | Used to set the cornerRadius    |
| `app:border_color="@color/red"`      | Used to set the borderColor     |
| `app:background_color="@color/blue"` | Used to set the backgroundColor |
| `app:border_width="5dp"`             | Used to set the borderWidth     |

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <com.cometchat.chatuikit.shared.views.CometChatAvatar.CometChatAvatar
                    android:id="@+id/avataricon"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_gravity="center"                                                                     			tools:src="@tools:sample/avatars"/>
    ```
  </Tab>
</Tabs>

## Methods

| Methods       | Type        | Description                                                                                           |
| ------------- | ----------- | ----------------------------------------------------------------------------------------------------- |
| **setImage**  | String      | Image will be obtained from path from assets. if name and image both are passed image will be visible |
| `**setName**` | String      | Used to can specify name to be shown in avatar (initials only), if image is not available             |
| **setStyle**  | AvatarStyle | Used to customize appearance of the Avatar                                                            |

## AvatarStyle

| Methods                     | Type      | Description                                                      |
| --------------------------- | --------- | ---------------------------------------------------------------- |
| **setHeight**               | double    | used to set height                                               |
| **setWidth**                | double    | used to set width                                                |
| **setBorderWidth**          | BoxBorder | used to set border of the inner circle                           |
| **setBackground**           | Color     | used to set background color                                     |
| **setBackground**           | Gradient  | used to set a gradient background                                |
| **setCornerRadius**         | double    | used to modify the corner radius of inner circle                 |
| **setOuterCornerRadius**    | double    | used to modify the corner radius of outer circle                 |
| **setOuterBorderWidth**     | BoxBorder | used to modify the border of outer circle                        |
| **setInnerViewWidth**       | double    | used to modify the border width of outer circle                  |
| **setOuterBackgroundColor** | Color     | used to modify the background color of outer circle              |
| **setOuterViewSpacing**     | double    | used to modify spacing between the image and the outer border    |
| **setTextAppearance**       | TextStyle | used to modify the text style for name if image is not available |

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    AvatarStyle avatarStyle =  new AvatarStyle();
                    avatarStyle.setInnerViewBorderColor(getResources().getColor(android.R.color.holo_red_dark));
     avatarStyle.setInnerViewRadius(100);
     avatarStyle.setOuterBorderWidth(10);
     avatarStyle.setInnerViewWidth(10);
     avatarStyle.setOuterBorderColor(getResources().getColor(android.R.color.black));

     CometChatAvatar avatar=view.findViewById(R.id.item_avatar);
     avatar.setStyle(avatarStyle);
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val avatarStyle = AvatarStyle()
            avatarStyle.innerViewBorderColor = resources.getColor(R.color.holo_red_dark)
            avatarStyle.innerViewRadius = 100
            avatarStyle.setOuterBorderWidth(10)
            avatarStyle.innerViewWidth = 10
            avatarStyle.setOuterBorderColor(resources.getColor(R.color.black))

            val avatar: CometChatAvatar = findViewById<CometChatAvatar>(R.id.item_avatar)
            avatar.setStyle(avatarStyle)
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/bac8a643-wux7v74eleaj8lc50o3zp5ov94rz5qf0j599wlfih0e0kevz0dbs3nohnhpl17l0-c31252cbba08eed99d6ed27909d7f26b.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=88ec526716fabf366815e0b84d505864" width="400" height="400" data-path="images/bac8a643-wux7v74eleaj8lc50o3zp5ov94rz5qf0j599wlfih0e0kevz0dbs3nohnhpl17l0-c31252cbba08eed99d6ed27909d7f26b.png" />
</Frame>