React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
REST@Composable
private fun CustomAttachmentsPicker(
attachmentsPickerViewModel: AttachmentsPickerViewModel,
onAttachmentsSelected: (List<Attachment>) -> Unit,
onDismiss: () -> Unit,
tabFactories: List<AttachmentsPickerTabFactory> = ChatTheme.attachmentsPickerTabFactories,
) {
var shouldShowMenu by remember { mutableStateOf(true) }
var selectedOptionIndex by remember { mutableStateOf(-1) }
Box( // Gray overlay
modifier = Modifier
.fillMaxSize()
.background(ChatTheme.colors.overlay)
.clickable(
onClick = onDismiss,
indication = null,
interactionSource = remember { MutableInteractionSource() },
),
) {
Card(
modifier = Modifier
.heightIn(max = 350.dp)
.align(Alignment.BottomCenter)
.clickable(
indication = null,
onClick = {},
interactionSource = remember { MutableInteractionSource() },
),
elevation = 4.dp,
shape = ChatTheme.shapes.bottomSheet,
backgroundColor = ChatTheme.colors.inputBackground,
) {
Box(modifier = Modifier.padding(vertical = 24.dp)) {
if (shouldShowMenu) {
// Show the menu with Images, Files, Camera options
// See implementation in dedicated section below
AttachmentsTypeMenu(
tabFactories = tabFactories,
onClick = {
selectedOptionIndex = it
shouldShowMenu = false
},
)
} else {
// Show the selected tabFactory content, with a back and submit buttons toolbar
Column(
modifier = Modifier.padding(horizontal = 8.dp),
) {
// See implementation in dedicated section below
AttachmentsPickerToolbar(
onBackClick = {
shouldShowMenu = true
selectedOptionIndex = -1
},
isSubmitEnabled = attachmentsPickerViewModel.hasPickedAttachments,
onSubmitClick = {
onAttachmentsSelected(attachmentsPickerViewModel.getSelectedAttachments())
},
)
tabFactories.getOrNull(selectedOptionIndex)
?.PickerTabContent(
onAttachmentPickerAction = { pickerAction ->
when (pickerAction) {
AttachmentPickerBack -> onDismiss.invoke()
is AttachmentPickerPollCreation -> Unit
}
},
attachments = attachmentsPickerViewModel.attachments,
onAttachmentItemSelected = attachmentsPickerViewModel::changeSelectedAttachments,
onAttachmentsChanged = { attachmentsPickerViewModel.attachments = it },
onAttachmentsSubmitted = {
onAttachmentsSelected(attachmentsPickerViewModel.getAttachmentsFromMetaData(it))
},
)
}
}
}
}
}
}Custom Attachments Picker
The AttachmentsPicker component allows users to pick media, files or capture media attachments. You can find more info about it here.
By default, it looks like below:
| Default - Images tab selected | Default - Files tab selected |
|---|---|
 |  |
When we’re done, our custom attachments picker will look this this:
| Custom - Attachment type menu | Custom - File picker with Back and Submit |
|---|---|
 |  |
Although AttachmentsPicker can be customized extensively, as you can read here, for this example we’ll create our own component. We’ll mostly keep the signature of the standard AttachmentsPicker and rely on the default tabFactories parameter value to show pickers for several attachments types (Images, Files, Camera).
Main Composable
Let’s define the main composable for our custom attachment picker. Notice that it expects an AttachmentsPickerViewModel, which is part of our SDK. Also, notice the usage of ChatTheme.attachmentsPickerTabFactories as a default value for the tabFactories parameter. It provides the standard selector content for Images, Files and Camera attachment type.
Attachment Type Menu
The attachment type menu (Images, Files, Camera) is drawn by a simple composable that shows a menu item for each tabFactory.
@Composable
private fun AttachmentsTypeMenu(
tabFactories: List<AttachmentsPickerTabFactory>,
onClick: (Int) -> Unit,
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically,
) {
tabFactories.forEachIndexed { index, tabFactory ->
AttachmentsTypeMenuItem(
tabFactory = tabFactory,
isEnabled = tabFactory.isPickerTabEnabled(),
index = index,
onClick = onClick,
)
}
}
}Each menu item is represented by a circle with a label underneath. So we need a Column, a circle-shaped Box with a certain background color, and a Text.
@Composable
private fun AttachmentsTypeMenuItem(
tabFactory: AttachmentsPickerTabFactory,
isEnabled: Boolean,
index: Int,
onClick: (Int) -> Unit,
) {
Column(
modifier = Modifier.clickable(enabled = isEnabled) { onClick(index) },
horizontalAlignment = Alignment.CenterHorizontally,
) {
val backgroundColor: Color
val label: String
when (tabFactory.attachmentsPickerMode) {
is Images -> {
backgroundColor = Color(0xFFCCCCFF)
label = "Images"
}
is Files -> {
backgroundColor = Color(0xFFFFCCCC)
label = "Files"
}
is MediaCapture -> {
backgroundColor = Color(0xFFFFCC99)
label = "Camera"
}
else -> {
backgroundColor = Color.LightGray
label = "Other"
}
}
Box(
modifier = Modifier
.padding(8.dp)
.size(48.dp)
.background(backgroundColor, shape = CircleShape),
contentAlignment = Alignment.Center,
) {
tabFactory.PickerTabIcon(isEnabled, isSelected = false)
}
Text(text = label)
}
}Picker Toolbar
Above each picker, we draw a toolbar with Back and Submit buttons. Back navigates to the menu and Submit attaches the selected file to the message contents.
@Composable
private fun AttachmentsPickerToolbar(
onBackClick: () -> Unit,
isSubmitEnabled: Boolean,
onSubmitClick: () -> Unit,
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
IconButton(onClick = onBackClick) {
Icon(
painter = painterResource(id = R.drawable.ic_back),
contentDescription = "Back",
modifier = Modifier.size(24.dp),
)
}
IconButton(
enabled = isSubmitEnabled,
onClick = onSubmitClick
) {
Icon(
painter = painterResource(id = R.drawable.ic_check),
contentDescription = "Submit Attachments",
modifier = Modifier.size(24.dp),
tint = if (isSubmitEnabled) {
ChatTheme.colors.primaryAccent
} else {
ChatTheme.colors.textLowEmphasis
},
)
}
}
}Usage
We’ll place our custom attachments picker in a screen that contains other components, like a header, a messages list and a message composer. We’ll also use the BackHandler standard component.
In order to show the attachments picker, we’ll use an isShowingAttachments flag. We’ll wrap all components in a Box, so that the attachments picker appears on top of other content.
fun CustomScreen(cid: String, onBackClick: () -> Unit = {}) {
val viewModelFactory = MessagesViewModelFactory(LocalContext.current, channelId = cid)
val listViewModel = viewModel(modelClass = MessageListViewModel::class.java, factory = viewModelFactory)
val composerViewModel = viewModel(modelClass = MessageComposerViewModel::class.java, factory = viewModelFactory)
val attachmentsPickerViewModel = viewModel(modelClass = AttachmentsPickerViewModel::class.java, factory = viewModelFactory)
val isShowingAttachments = attachmentsPickerViewModel.isShowingAttachments
val backAction = remember(composerViewModel, attachmentsPickerViewModel) {
{
// First close the attachments picker, if visible, then call onBackClick
when {
attachmentsPickerViewModel.isShowingAttachments -> {
attachmentsPickerViewModel.changeAttachmentState(false)
}
else -> onBackClick()
}
}
}
BackHandler(enabled = true, onBack = backAction) // Standard SDK component
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
// Screen content
Scaffold(
topBar = {
// MessageListHeader
},
bottomBar = {
// MessageComposer
},
content = {
// MessageList
}
)
// Attachments picker
if (isShowingAttachments) {
CustomAttachmentsPicker(
attachmentsPickerViewModel = attachmentsPickerViewModel,
onAttachmentsSelected = { attachments ->
attachmentsPickerViewModel.changeAttachmentState(false)
composerViewModel.addSelectedAttachments(attachments)
},
onDismiss = {
attachmentsPickerViewModel.changeAttachmentState(false)
attachmentsPickerViewModel.dismissAttachments()
}
)
}
}
}More Resources
If you want to learn how to use our Compose UI Components, see this page.
Also, check the other pages in this Cookbook to find out how to create custom versions of our components.