​
Overview

CometChatCallLogs is a Component that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available.
The CometChatCallLogs component is composed of the following BaseComponents:
ComponentsDescription
CometChatListBaseCometChatListBase is a container component featuring a title, customizable background options, and a dedicated list view for seamless integration within your application’s interface.
CometChatListItemThis component displays data retrieved from a CallLog object on a card, presenting a title and subtitle.

​
Usage

​
Integration

CometChatCallLogs being a wrapper component, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application. Since CometChatCallLogs can be launched by adding the following code snippet to the XML layout file. 
<com.cometchat.chatuikit.calls.calllogs.CometChatCallLogs
    android:id="@+id/call_log"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
If you’re defining the CometChatCallLogs within the XML code or in your activity or fragment then you’ll need to extract them and set them on the User object using the appropriate method. 
CometChatCallLogs cometchatCallLogs = binding.callLog; // 'binding' is a view binding instance. Initialize it with `binding = YourXmlFileNameBinding.inflate(getLayoutInflater());` to use views like `binding.callLog` after enabling view binding.
Activity and Fragment
You can integrate CometChatCallLogs into your Activity and Fragment by adding the following code snippets into the respective classes.
YourActivity.java
CometChatCallLogs cometchatCallLogs;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    cometchatCallLogs = new CometChatCallLogs(this);

    setContentView(cometchatCallLogs);
}

​
Actions

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
1. SetOnItemClickListener
This method proves valuable when users seek to override the onItemClick functionality within CometChatCallLogs, empowering them with greater control and customization options. The setOnItemClickListener action doesn’t have a predefined behavior. You can override this action using the following code snippet. 
cometchatCallLogs.setOnItemClickListener(new OnItemClickListener<CallLog>() {
    @Override
    public void OnItemClick(CallLog callLog, int i) {
        //TODO
    }
});
2. OnError
You can customize this behavior by using the provided code snippet to override the OnError and improve error handling. 
cometchatCallLogs.setOnError(new OnError() {
    @Override
    public void onError(Context context, CometChatException e) {
        //TODO
    }
});

​
Filters

Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
1. CallLogRequestBuilder
The CallLogRequestBuilder enables you to filter and customize the call list based on available parameters in CallLogRequestBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in CallLogRequestBuilder Example In the example below, we are applying a filter based on the limit and have a call recording. 
CallLogRequest.CallLogRequestBuilder callLogRequestBuilder = new CallLogRequest.CallLogRequestBuilder()
        .setLimit(20)
        .setHasRecording(true);

cometchatCallLogs.setCallLogRequestBuilder(callLogRequestBuilder);
PropertyDescriptionCode
LimitSets the limit for the call logs request.setLimit(int limit)
Call TypeSets the call type for the call logs request.setCallType(String callType)
Call StatusSets the call status for the call logs request.setCallStatus(String callStatus)
Has RecordingSets the recording status for the call logs request.setHasRecording(boolean hasRecording)
Call DirectionSets the call direction for the call logs request.setCallDirection(String callDirection)
UIDSets the user ID for the call logs request.setUid(String uid)
GUIDSets the group ID for the call logs request.setGuid(String guid)
Call CategorySets the call category for the call logs request.setCallCategory(String callCategory)
Auth TokenSets the auth token for the call logs request.setAuthToken(String authToken)

​
Events

Events are emitted by a Component. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The CometChatCallLogs component does not have any exposed events.

​
Customization

To fit your app’s design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

​
Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.
1. CallLogs Style
You can customize the appearance of the CometChatCallLogs Component by applying the CallLogsStyle to it using the following code snippet. 
CallLogsStyle callLogsStyle = new CallLogsStyle();
callLogsStyle.setBackground(Color.parseColor("#C0C0C0"));
callLogsStyle.setTitleColor(Color.RED);

cometchatCallLogs.setStyle(callLogsStyle);
List of properties exposed by CallLogStyle
PropertyDescriptionCode
Back Icon TintUsed to set the color of the back icon in the app bar.setBackIconTint(@ColorInt int)
BackgroundUsed to set background Drawable.setBackground(Drawable)
BackgroundUsed to set the background color.setBackground(@ColorInt int)
Border ColorUsed to set border color.setBorderColor(@ColorInt int)
Border WidthUsed to set border.setBorderWidth(int)
Call Status ColorUsed to set the Call Status color.setCallStatusColor(@ColorInt int)
CornerRadiusUsed to set border radius.setCornerRadius(float)
Empty Text AppearanceUsed to set the style of the response text shown when fetching the list of group members has returned empty.setEmptyTextAppearance(@StyleRes int)
Error Text AppearanceUsed to set the style of the response text shown in case some error occurs while fetching group members.setErrorTextAppearance(@StyleRes int)
Header Separator ColorUsed to set the color of the divider separating the CallLog items.setHeaderSeparatorColor(@ColorInt int)
Info Icon TintUsed to set the info icon color.setInfoIconTint(@ColorInt int)
Incoming Audio Call Icon TintUsed to set the color of the Incoming Audio Call Icon.setIncomingAudioCallIconTint(@ColorInt int)
Incoming Video Call Icon TintUsed to set the color of the Incoming Video Call Icon.setIncomingVideoCallIconTint(@ColorInt int)
Loading Icon TintUsed to set the color of the icon shown while the list of group members is being fetched.setLoadingIconTint(@ColorInt int)
Missed Audio Call Icon TintUsed to set the color of the Missed Audio Call Icon.setMissedAudioCallIconTint(@ColorInt int)
Missed Call Title ColorUsed to set the Missed Call Title color.setMissedCallTitleColor(@ColorInt int)
Missed Video Call Icon TintUsed to set the color of the Missed Video Call Icon.setMissedVideoCallIconTint(@ColorInt int)
Outgoing Audio Call Icon TintUsed to set the color of the Outgoing Audio Call Icon.setOutgoingAudioCallIconTint(@ColorInt int)
Outgoing Video Call Icon TintUsed to set the color of the Outgoing Video Call Icon.setOutgoingVideoCallIconTint(@ColorInt int)
SubTitle AppearanceUsed to customise the appearance of the subtitle in the app bar.setSubTitleAppearance(@StyleRes int)
Title AppearanceUsed to customise the appearance of the title in the app bar.setTitleAppearance(@StyleRes int)
2. Avatar Styles
To apply customized styles to the Avatar component in the CallLogs Component, you can use the following code snippet. For further insights on Avatar Styles refer 
AvatarStyle avatarStyle = new AvatarStyle()
        .setBorderColor(Color.RED)
        .setBorderWidth(10);

cometchatCallLogs.setAvatarStyle(avatarStyle);
3. ListItem Styles
To apply customized styles to the ListItemStyle component in the CallLogs Component, you can use the following code snippet. For further insights on ListItemStyle Styles refer 
ListItemStyle listItemStyle = new ListItemStyle();
listItemStyle.setBorderWidth(4);
listItemStyle.setCornerRadius(20);
listItemStyle.setBorderColor(Color.parseColor("#6851D6"));
listItemStyle.setBackground(Color.parseColor("#C0C0C0"));

cometchatCallLogs.setListItemStyle(listItemStyle);

​
Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. 
cometchatCallLogs.setTitle("Your Title");
cometchatCallLogs.hideSearch(true);
cometchatCallLogs.showHeaderSeparator(false);
Below is a list of customizations along with corresponding code snippets
PropertyDescriptionCode
Back IconUsed to set the back button icon.backIcon(@DrawableRes int res)
Empty State TextUsed to set a custom text response when fetching the users has returned an empty listemptyStateText(String)
Error State TextUsed to set a custom text response when some error occurs on fetching the list of userserrorStateText(String)
Hide ErrorUsed to hide error on fetching users.hideError(boolean)
Set CallUsed to set the call object for displaying the incoming call screen.setCall(Call)
Set Incoming Audio Call IconUsed to set the Incoming Audio Call icon.setIncomingAudioCallIcon(@DrawableRes int)
Set Incoming Video Call IconUsed to set the Incoming Video Call icon.setIncomingVideoCallIcon(@DrawableRes int)
Set Outgoing Video Call IconUsed to set the Outgoing Video Call icon.setOutgoingVideoCallIcon(@DrawableRes int)
Set Outgoing Audio Call IconUsed to set the Outgoing Audio Call icon.setOutgoingAudioCallIcon(@DrawableRes int)
Set TitleUsed to set title in the app bar.setTitle(String)
Set UserUsed to set User object to the call button.setUser(User)
Set Voice Button TextUsed to set voice call text.setVoiceButtonText(String)
Set Video Button TextUsed to set video call text.setVideoButtonText(String)

​
Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

​
SetEmptyStateView 🛑

You can set a custom EmptyView using .setEmptyStateView() to match the empty view of your app. 
cometchatCallLogs.setEmptyStateView();
Examples
We have added an error view to empty_view_layout.xml. You can choose any view you prefer. This view should be inflated and passed to the setEmptyStateView() method.
empty_view_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical">

    <TextView
        android:id="@+id/txt_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="No call log available"
        android:textColor="@color/cometchat_grey"
        android:textSize="20sp"
        android:textStyle="bold" />

</RelativeLayout>
YourActivity.java
cometchatCallLogs.setEmptyStateView(R.layout.empty_view_layout);

​
SetErrorStateView 🛑

You can set a custom ErrorStateView using setErrorStateView to match the error view of your app. 
cometchatCallLogs.setErrorStateView();
Example
We have added an error view to error_state_view_layout.xml. You can choose any view you prefer. This view should be inflated and passed to the setErrorStateView() method.
error_state_view_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_error"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_error" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/img_error"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Something Went Wrong"
        android:textSize="30sp" />

</RelativeLayout>
YourActivity.java
cometchatCallLogs.setErrorStateView(R.layout.error_state_view_layout);