Search code examples
androidandroid-jetpack-composeandroid-compose-textfieldandroid-compose-buttonandroid-jetpack-compose-button

JetPack Compose Button with drawable


How can we achieve this in jetpack compose

enter image description here

I'm doing something like this

Button(
    elevation = ButtonDefaults.elevation(
        defaultElevation = 0.dp,
        pressedElevation = 8.dp,
        disabledElevation = 0.dp
    ),
    onClick = { onClick },
    shape = RoundedCornerShape(28.dp),
    modifier = modifier
        .fillMaxWidth()
        .shadow(0.dp),
    contentPadding = PaddingValues(15.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
    border = BorderStroke(1.dp, Color.Grey)
) {
    Box(modifier = modifier.fillMaxWidth(),
        contentAlignment = Alignment.Center) {
        Icon(
            imageVector = imageVector,
            modifier = Modifier
                .size(18.dp),
            contentDescription = "drawable icons",
            tint = Color.Unspecified
        )
        Spacer(modifier = Modifier.width(10.dp))
        Text(
            text = buttonText,
            color = Color.Black,
            textAlign = TextAlign.Center
        )
    }
}

enter image description here

So as you can see the Google logo is just left of the text I need it at the start of the box so how can I do this.


Solution

  • @Composable
    fun GoogleButton(
        modifier: Modifier = Modifier,
        imageVector: ImageVector,
        buttonText: String,
        onClick: (isEnabled: Boolean) -> Unit = {},
        enable: Boolean = true,
        backgroundColor: Color,
        fontColor: Color,
    ) {
        Button(
            onClick = { onClick(enable) },
            modifier = modifier
                .fillMaxWidth()
                .shadow(0.dp)
                .noInteractionClickable(enabled = false) { onClick(enable) },
            elevation = ButtonDefaults.elevation(
                defaultElevation = 0.dp,
                pressedElevation = 0.dp,
                hoveredElevation = 0.dp,
                focusedElevation = 0.dp
            ),
            shape = RoundedCornerShape(28.dp),
            contentPadding = PaddingValues(15.dp),
            colors = ButtonDefaults.buttonColors(
                backgroundColor = backgroundColor,
                contentColor = fontColor
            ),
            border = BorderStroke(1.dp, MaterialTheme.colors.getButtonBorderStroke)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth(),
                contentAlignment = Alignment.Center
            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .align(Alignment.CenterStart)
                ) {
                    Spacer(modifier = Modifier.width(4.dp))
                    Icon(
                        imageVector = imageVector,
                        modifier = Modifier
                            .size(18.dp),
                        contentDescription = "drawable_icons",
                        tint = Color.Unspecified
                    )
                }
                Text(
                    modifier = Modifier.align(Alignment.Center),
                    text = buttonText,
                    color = MaterialTheme.colors.loginButtonTextColor,
                    textAlign = TextAlign.Center,
                    fontSize = 16.sp,
                    fontFamily = FontFamily(
                        Font(
                            R.font.roboto_medium
                        )
                    )
                )
            }
        }
    }