OhTeePee

Demo

Implementation

Add the Jitpack repository to your root build.gradle file. If you’re using the settings.gradle file, include it there.

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

Then add OhTeePee dependency to your module build.gradle file.

implementation "com.github.composeuisuite:ohteepee:$versionName"

Usage

First of all, create a basic composable then start to build on it.

@Composable
fun OtpInput() {
    // a mutable state to handle OTP value changes…
    var otpValue: String by remember { mutableStateOf("") }

    // this config will be used for each cell
    val defaultCellConfig = OhTeePeeCellConfiguration.withDefaults(
        borderColor = Color.LightGray,
        borderWidth = 1.dp,
        shape = RoundedCornerShape(16.dp),
        textStyle = TextStyle(
            color = Color.Black
        )
    )

    OhTeePeeInput(
        value = otpValue,
        onValueChange = { newValue, isValid ->
            otpValue = newValue
        },
        configurations = OhTeePeeConfigurations.withDefaults(
            cellsCount = 6,
            emptyCellConfig = defaultCellConfig,
            cellModifier = Modifier
                .padding(horizontal = 4.dp)
                .size(48.dp),
        ),
    )
}

To customize it further, you can use config parameters such as filledCellConfig, activeCellConfig, errorCellConfig and errorAnimationConfig to create different UI behaviour for different situations.

@Composable
fun OtpInput() {
    ...

    OhTeePeeInput(
        ...
        configurations = OhTeePeeConfigurations.withDefaults(
            ...,
            emptyCellConfig = defaultCellConfig,
            filledCellConfig = defaultCellConfig,
            activeCellConfig = defaultCellConfig.copy(
                borderColor = Color.Blue,
                borderWidth = 2.dp
            ),
            errorCellConfig = defaultCellConfig.copy(
                borderColor = Color.Red,
                borderWidth = 2.dp
            ),
            errorAnimationConfig = null, // default is OhTeePeeErrorAnimationConfig.Shake(),
            placeHolder = "-", // a place holder (great comment isn't it)
        ),
    )
}

This is just the tip of the iceberg when it comes to customization of OhTeePee libray. If you want to see more, definitely check out this amazing article written by co-author Ilyas Ipek

Todo List

• Read OTP Code directly from SMS
• Add animations
• Write UI tests

Authors

Ilyas Ipek

• Medium: @ilyasipek
• Github: @ilyasipek
• LinkedIn: @ilyas-ipek

Tarik Yasar

• Medium: @tyasar
• Github: @tarikyasar
• LinkedIn: @tarik-yasar

Contributing

We are always open to new ideas! To contribute, please check following steps:

1. Open an issue first to discuss what you would like to change.
2. Fork the Project
3. Create your feature branch (git checkout -b feature/new_feature)
4. Format code using Ktlint (./gradlew ktlintFormat)
5. Commit your changes (git commit -m 'Add some new feature')
6. Push to the branch (git push origin feature/new_feature)
7. Open a pull request

Show your support

⭐️ Give us a star if this project helped you! ⭐️

LICENSE