Site icon Android Tutorial Online

A custom text field to enter a code usually used in cases of authentication

Otp View – Jetpack Compose

A custom text field to enter a code usually used in cases of authentication.

https://user-images.githubusercontent.com/26419059/224510388-47722cb1-5584-4266-8b86-7d5f91bd9be3.mp4

Getting Started

Step 1. Include repository jitpack io in gradle (project).

allprojects {
    repositories {
 	maven { url 'https://jitpack.io' }
    }
}

Step 2. Add the dependency in gradle (app).

dependencies {
    implementation("com.sugarspoon.otpview:$latest_version")
}

How to use the component?

var otpValue by remember { mutableStateOf("") }
var isError by remember { mutableStateOf(false) }
OtpView(
    modifier = Modifier,
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = BackgroundPinColor,
        textColor = TextColor,
        errorLabelColor = FeedbackError,
        errorCursorColor = FeedbackError,
        errorIndicatorColor = FeedbackError
    ),
    onAllDigitsFilled = { digitsFilled ->
        otpValue = digitsFilled
        isError = otpValue != "1234"
    },
    isError = isError,
    isEnable = true,
    isSecret = true,
    onPressedDelKey = {
        isError = false
    },
    styles = OtpViewStyles.default(otpSize = OtpSize.FOUR, shape = state.shape)
)
ParamDescription
modifierAn ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listenersdecorate or add behavior to rows, text or buttons.
colorsRepresents the colors of the input text, background and content used in a text field in different states.
stylesDefines text style, shape and number of text fields.
isSecretDefines whether to show or hide the entered number. Default [false]
isErrorIndicates if the text field’s current value is in error state. If set to true, the label, shape and border will be displayed in error color. Default [false]
isEnabledControls the enabled state of the [OtpView]. When false, the text field will be neither editable nor focusable, the input of the text field will not be selectable.
keyboardTypeThe keyboard type to be used in this text field. Note that this input type is honored by keyboard and shows corresponding keyboard but this is not guaranteed. For example, some keyboards may send non-ASCII character even if you set KeyboardType.Ascii.
visualTransformationtransforms the visual representation of the input value.When [isSecret] is true this visual transformation will be applied. Default [OtpViewVisualTransformation]
onAllDigitsFilledIndicates when all fields are filled.
onPressDellKeyIndicates when delete key is pressed.

GitHub

View Github

Exit mobile version