QuickBlox Android UIKit allows you to create customizable screens and execute main chat functions such as list dialogs, create dialogs, and chat in dialogs.
Fragment
, ScreenSettings
, and ViewModel
. Each fragment has a specific ScreenSettings
that creates the view and each ScreenSettings
contains customizable UI components. A fragment also has a corresponding ViewModel
that provides the necessary data from QuickBlox Android SDK.
Refer to the table below to see which screens we provide and the components that make up each screen.
Screen | Fragment | ScreenSettings | ViewModel | Components |
---|---|---|---|---|
Dialog list | DialogsFragment | DialogsScreenSettings | DialogsViewModel | HeaderWithIconComponentDialogsComponent |
Dialog name | DialogNameFragment | DialogNameScreenSettings | DialogNameViewModel | HeaderWithTextComponentDialogNameComponent |
User list | UsersFragment | UsersScreenSettings | UsersViewModel | HeaderWithTextComponentUsersComponent |
Group сhat | GroupChatFragment | GroupChatScreenSettings | GroupChatViewModel | HeaderWithAvatarComponentMessagesComponent |
Private chat | PrivateChatFragment | PrivateChatScreenSettings | PrivateChatViewModel | HeaderWithAvatarComponentMessagesComponent |
Group chat info | GroupChatInfoFragment | GroupChatInfoScreenSettings | GroupChatInfoViewModel | HeaderWithTextComponentDialogInfoComponent |
Private chat info | PrivateChatInfoFragment | PrivateChatInfoScreenSettings | PrivateChatInfoViewModel | HeaderWithTextComponentDialogInfoComponent |
Members | MembersFragment | MembersScreenSettings | MembersViewModel | HeaderWithIconComponentUsersComponent |
Add members | AddMembersFragment | AddMembersScreenSettings | AddMembersViewModel | HeaderWithIconComponentUsersComponent |
DialogsScreenSettings
.
Dialogs
The dialogs component shows a list of all private and group dialogs that the current user is part of. To create a view for each dialog list item, you need to use theDialogsAdapter
and bind dialog data to the view. When the current user taps on one of the dialogs in the list, they will be able to enter a private or group chat screen depending on the dialog type.
DialogsActivity
which uses a ScreenFactory
to create views.
Start an activity
You can start a dialogs activity by using the method show()
of DialogsActivity
as shown below:
DialogsFragment
use the ScreenFactory
, how to create a DialogsFragment
is shown in the example below:
DialogsScreenSettings
you can customize the DialogsFragment
to change various aspects of the screen. The DialogsScreenSettings
class allows you to configure DialogsFragment
components. If you want to customize the fragment beyond using the APIs provided in the DialogsScreenSettings
, you need to inherit the DialogsScreenSettings
and extend the functionality.
The following table shows the main classes used in the DialogsFragment
to display and customize the dialogs screen.
Fragment | ScreenSettings | Components | Theme | RecyclerView |
---|---|---|---|---|
DialogsFragment | DialogsScreenSettings | HeaderWithIconComponentDialogsComponent | UiKitTheme | DialogsAdapter |
DialogNameScreenSettings
.
Dialog name
The dialog name component allows you to set a name and photo for a group dialog.
DialogNameActivity
which uses a ScreenFactory
to create views.
Start an activity
You can start a dialog name activity by using the method show()
of DialogNameActivity
as shown below:
DialogNameFragment
use the ScreenFactory
, how to create a DialogNameFragment
is shown in the example below:
DialogNameScreenSettings
you can customize the DialogNameFragment
to change various aspects of the screen. The DialogNameScreenSettings
class allows you to configure DialogNameFragment
components. If you want to customize the fragment beyond using the APIs provided in the DialogNameScreenSettings
, you need to inherit the DialogNameScreenSettings
and extend the functionality.
The following table shows the main classes used in the DialogNameFragment
to display and customize the dialog name screen.
Fragment | ScreenSettings | Components | Theme |
---|---|---|---|
DialogNameFragment | DialogNameScreenSettings | HeaderWithTextComponentDialogNameComponent | UiKitTheme |
UsersScreenSettings
.
Users
The users component shows a list of available users that can be selected to create a group or private dialog. To create the view for each user list item, you need to use the SelectionUsersAdapter
and bind user data to the view.
UsersActivity
which uses a ScreenFactory
to create views.
Start an activity
You can start a users activity by using the method show()
of UsersActivity
as shown below:
UsersFragment
use the ScreenFactory
, how to create a UsersFragment
is shown in the example below:
UsersScreenSettings
you can customize the UsersFragment
to change various aspects of the screen. The UsersScreenSettings
class allows you to configure UsersFragment
components. If you want to customize the fragment beyond using the APIs provided in the UsersScreenSettings
, you need to inherit the UsersScreenSettings
and extend the functionality.
The following table shows the main classes used in the UsersFragment
to display and customize the user list screen.
Fragment | ScreenSettings | Components | Theme | RecyclerView |
---|---|---|---|---|
UsersFragment | UsersScreenSettings | HeaderWithTextComponentUsersComponent | UiKitTheme | SelectionUsersAdapter |
GroupChatScreenSettings
.
Messages
The message component shows a list of all messages exchanged in the chat, in chronological order. The list displays messages sent by the current user and the other members of the dialog. The view of MessagesComponent
is created and configured in the GroupChatScreenSettings
. To create a view for each message list item, you need to use a MessageAdapter
.
Send message
The send message component is where the user can either enter a text message or send the message with an attachment like file, image, or video.
GroupChatActivity
which uses a ScreenFactory
to create views.
Start an activity
You can start a group chat activity by using the method show()
of GroupChatActivity
as shown below:
GroupChatFragment
use the ScreenFactory
, how to create a GroupChatFragment
is shown in the example below:
GroupChatScreenSettings
you can customize the GroupChatFragment
to change various aspects of the screen. The GroupChatScreenSettings
class allows you to configure GroupChatFragment
components. If you want to customize the fragment beyond using the APIs provided in the GroupChatScreenSettings
, you need to inherit the GroupChatScreenSettings
and extend the functionality.
The following table shows the main classes used in the PrivateChatFragment
to display and customize the group chat screen.
Fragment | ScreenSettings | Components | Theme | RecyclerView |
---|---|---|---|---|
GroupChatFragment | GroupChatScreenSettings | HeaderWithAvatarComponentMessagesComponent | UiKitTheme | MessageAdapter |
PrivateChatScreenSettings
.
Messages
The message component shows a list of all messages exchanged in the chat, in chronological order. The list displays messages sent by the current user and the other member of the dialog. The view of MessagesComponent
is created and configured in the PrivateChatScreenSettings
. To create a view for each message list item, you need to use a MessageAdapter
.
PrivateChatActivity
which uses a ScreenFactory
to create views.
Start an activity
You can start a private chat activity by using the method show()
of PrivateChatActivity
as shown below:
PrivateChatFragment
use the ScreenFactory
, how to create a PrivateChatFragment
is shown in the example below:
PrivateChatScreenSettings
you can customize the PrivateChatFragment
to change various aspects of the screen. The PrivateChatScreenSettings
class allows you to configure PrivateChatFragment
components. If you want to customize the fragment beyond using the APIs provided in the PrivateChatScreenSettings
, you need to inherit the PrivateChatScreenSettings
and extend the functionality.
The following table shows the main classes used in the PrivateChatFragment
to display and customize the private chat screen.
Fragment | ScreenSettings | Components | Theme | RecyclerView |
---|---|---|---|---|
PrivateChatFragment | PrivateChatScreenSettings | HeaderWithAvatarComponentMessagesComponent | UiKitTheme | MessageAdapter |
GroupChatInfoScreenSettings
.
Dialog info
The dialog info component shows the dialog image and name by default. The view of the dialog information is created and customized in the DialogInfoComponent
of the GroupChatInfoScreenSettings
.
GroupChatInfoActivity
which uses a ScreenFactory
to create views.
Start an activity
You can start a group chat info activity by using the method show()
of GroupChatInfoActivity
as shown below:
GroupChatInfoFragment
use the ScreenFactory
, how to create a GroupChatInfoFragment
is shown in the example below:
GroupChatInfoScreenSettings
you can customize the GroupChatInfoFragment
to change various aspects of the screen. The GroupChatInfoScreenSettings
class allows you to configure GroupChatInfoFragment
components. If you want to customize the fragment beyond using the APIs provided in the GroupChatInfoScreenSettings
, you need to inherit the GroupChatInfoScreenSettings
and extend the functionality.
The following table shows the main classes used in the GroupChatInfoFragment
to display and customize the group chat info screen.
Fragment | ScreenSettings | Components | Theme |
---|---|---|---|
GroupChatInfoFragment | GroupChatInfoScreenSettings | HeaderWithTextComponentDialogInfoComponent | UiKitTheme |
PrivateChatInfoScreenSettings
.
Dialog info
The dialog info component shows the dialog image and name by default. The view of the dialog information is created and customized in the DialogInfoComponent
of the PrivateChatInfoScreenSettings
.
PrivateChatInfoActivity
which uses a ScreenFactory
to create views.
Start an activity
You can start a private chat info activity by using the method show()
of PrivateChatInfoActivity
as shown below:
PrivateChatInfoFragment
use the ScreenFactory
, how to create a PrivateChatInfoFragment
is shown in the example below:
PrivateChatInfoScreenSettings
you can customize the PrivateChatInfoFragment
to change various aspects of the screen. The PrivateChatInfoScreenSettings
class allows you to configure PrivateChatInfoFragment
components. If you want to customize the fragment beyond using the APIs provided in the PrivateChatInfoScreenSettings
, you need to inherit the PrivateChatInfoScreenSettings
and extend the functionality.
The following table shows the main classes used in the PrivateChatInfoFragment
to display and customize the private chat info screen.
Fragment | ScreenSettings | Components | Theme |
---|---|---|---|
PrivateChatInfoFragment | PrivateChatInfoScreenSettings | HeaderWithTextComponentDialogInfoComponent | UiKitTheme |
MembersActivity
or MembersFragment
.
MembersScreenSettings
.
Users
The users component shows a list of members of a group dialog. To create the view for each user list item, you need to use theMembersAdapter
and bind user data to the view.
MembersActivity
which uses a ScreenFactory
to create views.
Start an activity
You can start a members activity by using the method show()
of MembersActivity
as shown below:
MembersFragment
use the ScreenFactory
, how to create a MembersFragment
is shown in the example below:
MembersScreenSettings
you can customize the MembersFragment
to change various aspects of the screen. The MembersScreenSettings
class allows you to configure MembersFragment
components. If you want to customize the fragment beyond using the APIs provided in the MembersScreenSettings
, you need to inherit the MembersScreenSettings
and extend the functionality.
The following table shows the main classes used in the MembersFragment
to display and customize the members screen.
Fragment | ScreenSettings | Components | Theme | RecyclerView |
---|---|---|---|---|
MembersFragment | MembersScreenSettings | HeaderWithIconComponentUsersComponent | UiKitTheme | MembersAdapter |
AddMembersActivity
or AddMembersFragment
. All users are listed through the pagination, and members who already belong to the dialog are not shown.
AddMembersScreenSettings
.
Users
The users component shows a list of users that can be added to a group dialog. To create the view for each user list item, you need to use theAddMembersAdapter
and bind user data to the view.
AddMembersActivity
which uses a ScreenFactory
to create views.
Start an activity
You can start a add members activity by using the method show()
of AddMembersActivity
as shown below:
AddMembersFragment
use the ScreenFactory
, how to create a AddMembersFragment
is shown in the example below:
AddMembersScreenSettings
you can customize the AddMembersFragment
to change various aspects of the screen. The AddMembersScreenSettings
class allows you to configure AddMembersFragment
components. If you want to customize the fragment beyond using the APIs provided in the AddMembersScreenSettings
, you need to inherit the AddMembersScreenSettings
and extend the functionality.
The following table shows the main classes used in the AddMembersFragment
to display and customize the add members screen.
Fragment | ScreenSettings | Components | Theme | RecyclerView |
---|---|---|---|---|
AddMembersFragment | AddMembersScreenSettings | HeaderWithIconComponentUsersComponent | UiKitTheme | AddMembersAdapter |