Custom Compose components

components.md

Custom text field

@Composable
fun CustomTextField(
    modifier: Modifier = Modifier,
    header: String? = "header",
    value: String = "",
    onValueChange: (String) -> Unit = {},
    headerTextStyle: TextStyle = TextStyle.Default,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    label: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    textStyle: TextStyle = TextStyle.Default,
    isError: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    placeholder: String? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    singleLine: Boolean = false
) {
    Column(modifier = modifier) {
        if (header != null)
            Text(
                text = header,
                style = textStyle,
                modifier = Modifier.fillMaxWidth()
            )
        OutlinedTextField(
            value = value,
            modifier = Modifier
                .fillMaxWidth()
                .defaultMinSize(minHeight = 48.dp),
            onValueChange = onValueChange,
            visualTransformation = visualTransformation,
            colors = TextFieldDefaults.outlinedTextFieldColors(
                backgroundColor = Color.Transparent,
                unfocusedBorderColor = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
                focusedBorderColor = MaterialTheme.colors.primary,
                cursorColor = MaterialTheme.colors.primary
            ),
            enabled = enabled,
            label = label,
            readOnly = readOnly,
            trailingIcon = trailingIcon,
            keyboardActions = keyboardActions,
            keyboardOptions = keyboardOptions,
            textStyle = textStyle,
            isError = isError,
            maxLines = maxLines,
            placeholder = {
                if (placeholder != null)
                    Text(
                        text = placeholder,
                        style = TextStyle.Default.copy(
                            fontSize = 15.sp,
                            fontWeight = FontWeight.Light,
                            color = steel.copy(0.75f)
                        )
                    )
            },
            leadingIcon = leadingIcon,
            singleLine = singleLine,
        )
    }
}

Custom Button

@Composable
fun CustomButton(
    modifier: Modifier = Modifier,
    onClick: () -> Unit,
    text: String,
    enabled: Boolean = true,
    color: Color = blue,
    textColor: Color = Color.White,
    fontSize: TextUnit = 16.sp,
    textModifier: Modifier = Modifier,
    borderStroke: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    elevation: ButtonElevation = ButtonDefaults.elevation(0.dp, 0.dp)
) {
    Button(
        border = borderStroke,
        modifier = modifier,
        enabled = enabled,
        shape = RoundedCornerShape(percent = 25),
        colors = ButtonDefaults.buttonColors(backgroundColor = color, disabledBackgroundColor = greySuperLight),
        elevation = elevation,
        contentPadding = contentPadding,
        onClick = { onClick() }
    ) {
        Text(
            modifier = textModifier,
            text = text,
            textAlign = TextAlign.Center,
            color = if (enabled) textColor else Color.Black,
            fontWeight = FontWeight.Bold,
            fontSize = fontSize
        )
    }
}