ContactsList.kt

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ContactsList(
    modifier: Modifier = Modifier,
    contacts: Map<String, List<ContactModel>> = Collections.emptyMap()
){
    LazyColumn(modifier) {
        contacts.map { entry ->
            // Our stick header displays the alphabet letters
            stickyHeader {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(MaterialTheme.colorScheme.primaryContainer)
                        .padding(start = 12.dp, top = 6.dp, bottom = 6.dp)
                ) {
                    Text(
                        text = entry.key,
                        style = TextStyle(color = MaterialTheme.colorScheme.primary, fontSize = 20.sp),
                        fontWeight = FontWeight.Bold,
                        fontFamily = FontFamily.Serif,
                    )
                }
            }
            items(
                entry.value.size
            ) { index ->
                // Our Contact list item contains just a Text composable
                // that displays the contact name and phone number.
                // There are also two ucon buttons to call/send sms
                // to that phone number.
                ContactListItem(contact = entry.value[index])
            }
        }
    }
}

@Composable
fun ContactListItem(contact: ContactModel) {
    val context = LocalContext.current
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(end = 10.dp)
            .background(MaterialTheme.colorScheme.background)
    ) {
        Image(
            painter = rememberAsyncImagePainter(
                model = contact.photoThumbnailUri,
                error = painterResource(R.drawable.ic_profile_icon)
            ),
            contentDescription = "",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .padding(10.dp)
                .size(60.dp)
                .clip(CircleShape)
        )
        Column(modifier = Modifier.weight(1f, true)) {
            Text(
                text = contact.displayName,
                fontWeight = FontWeight.Bold,
                fontSize = 16.sp,
                color = MaterialTheme.colorScheme.onSecondaryContainer,
            )
            Text(
                text = contact.phoneNumber,
                fontSize = 14.sp,
                color = MaterialTheme.colorScheme.outline
            )
        }
        IconButton(
            onClick = {
                val intent = Intent(Intent.ACTION_DIAL, Uri.parse("tel:" + contact.phoneNumber))
                context.startActivity(intent)
            },
        ) {
            Image(
                imageVector = Icons.Filled.Call,
                contentDescription ="",
                modifier = Modifier.padding(9.dp),
                colorFilter = ColorFilter.tint(
                    color = MaterialTheme.colorScheme.primary
                )
            )
        }
        IconButton(
            onClick = {
                val intent = Intent(Intent.ACTION_VIEW, Uri.parse("sms:" + contact.phoneNumber))
                context.startActivity(intent)
            }
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_message),
                contentDescription ="",
                modifier = Modifier.padding(9.dp),
                colorFilter = ColorFilter.tint(
                    color = MaterialTheme.colorScheme.primary
                )
            )
        }
    }
}