Bubble.kt

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.GenericShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun Bubble(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color(color = 0xFFFFFBEF),
    borderWidth: Dp = 1.dp,
    borderColor: Color = Color(color = 0xFF7AC19F),
    content: @Composable () -> Unit,
    position: Int = 1,
    paddingStart: Dp = 12.dp,
    paddingEnd: Dp = 12.dp,
    paddingTop: Dp = 16.dp,
    paddingBottom: Dp = 16.dp,
) {
    val bubbleShape = GenericShape { size, _ ->
        // Divide the width into 4 pieces
        val pieceWidth = size.width / 4f

        val arrowPosition = when (position) {
            1 -> 0.5F
            2 -> 1.5F
            3 -> 2.5F
            4 -> 3.5F
            else -> 0.5F
        }

        // Calculate the center of the second piece (for example)
        val arrowCenterX = pieceWidth * arrowPosition // Center of the second piece

        // Arrow points
        moveTo(x = arrowCenterX - 20f, y = 0f) // Start of the arrow at the calculated position
        lineTo(x = arrowCenterX, y = -20f) // Arrow tip
        lineTo(x = arrowCenterX + 20f, y = 0f) // End of the arrow

        // Rest of the speech APBubble shape
        lineTo(x = size.width - 16f, y = 0f) // Top-right (start of the rounded corner)
        cubicTo(
            x1 = size.width - 8f,
            y1 = 0f,
            x2 = size.width,
            y2 = 8f,
            x3 = size.width,
            y3 = 16f
        ) // Top-right rounded corner
        lineTo(x = size.width, y = size.height - 16f) // Right side with rounded corner
        cubicTo(
            x1 = size.width,
            y1 = size.height - 8f,
            x2 = size.width - 8f,
            y2 = size.height,
            x3 = size.width - 16f,
            y3 = size.height
        ) // Bottom-right rounded corner
        lineTo(x = 16f, y = size.height) // Bottom-left
        cubicTo(
            x1 = 8f,
            y1 = size.height,
            x2 = 0f,
            y2 = size.height - 8f,
            x3 = 0f,
            y3 = size.height - 16f
        ) // Bottom-left rounded corner
        lineTo(x = 0f, y = 16f) // Left side with rounded corner
        cubicTo(x1 = 0f, y1 = 8f, x2 = 8f, y2 = 0f, x3 = 16f, y3 = 0f) // Top-left rounded corner
        close()
    }

    Box(
        modifier = modifier
            .padding(top = 16.dp)
            .fillMaxWidth()
            .background(
                color = backgroundColor,
                shape = bubbleShape
            )
            .border(
                width = borderWidth,
                color = borderColor,
                shape = bubbleShape
            )
            .padding(
                start = paddingStart,
                end = paddingEnd,
                top = paddingTop,
                bottom = paddingBottom
            )
    ) {
        content()
    }
}

@Preview
@Composable
private fun Preview() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(color = Color.White)
            .padding(all = 16.dp)
    ) {
        Column {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
            ) {
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "First Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Second Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Third Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Fourth Item", textAlign = TextAlign.Center)
                }
            }
            Bubble(
                content = {
                    Text(text = "Amanullah Sarker")
                },
                position = 1
            )
        }

        Column(
            modifier = Modifier
                .padding(top = 16.dp)
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
            ) {
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "First Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Second Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Third Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Fourth Item", textAlign = TextAlign.Center)
                }
            }
            Bubble(
                content = {
                    Text(text = "Amanullah Sarker")
                },
                position = 2
            )
        }

        Column(
            modifier = Modifier
                .padding(top = 16.dp)
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
            ) {
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "First Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Second Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Third Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Fourth Item", textAlign = TextAlign.Center)
                }
            }
            Bubble(
                content = {
                    Text(text = "Amanullah Sarker")
                },
                position = 3
            )
        }

        Column(
            modifier = Modifier
                .padding(top = 16.dp)
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
            ) {
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "First Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Second Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Third Item", textAlign = TextAlign.Center)
                }
                Column(
                    modifier = Modifier
                        .weight(weight = 1F),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        modifier = Modifier
                            .size(size = 54.dp),
                        imageVector = Icons.Default.Home,
                        contentDescription = null
                    )
                    Text(text = "Fourth Item", textAlign = TextAlign.Center)
                }
            }
            Bubble(
                content = {
                    Text(text = "Amanullah Sarker")
                },
                position = 4
            )
        }
    }
}