{"id":19146668,"url":"https://github.com/mukeshsolanki/android-otpview-pinview","last_synced_at":"2025-05-15T11:05:49.736Z","repository":{"id":9408913,"uuid":"61727297","full_name":"mukeshsolanki/android-otpview-pinview","owner":"mukeshsolanki","description":"A custom view to enter otp of different sizes used usually in cases of authentication.","archived":false,"fork":false,"pushed_at":"2024-01-27T08:18:59.000Z","size":559,"stargazers_count":727,"open_issues_count":1,"forks_count":208,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-05-10T17:30:49.787Z","etag":null,"topics":["android","android-library","android-pinview","authentication","compose","compose-library","custom-view","jetpack-compose","otp","otpview"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mukeshsolanki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"mukeshsolanki","custom":"https://www.paypal.me/mukeshsolanki"}},"created_at":"2016-06-22T14:50:38.000Z","updated_at":"2025-05-08T03:39:50.000Z","dependencies_parsed_at":"2024-02-01T15:18:48.045Z","dependency_job_id":"44c0eb9b-c9a6-40ce-aa9a-c58ffdcd218f","html_url":"https://github.com/mukeshsolanki/android-otpview-pinview","commit_stats":{"total_commits":81,"total_committers":12,"mean_commits":6.75,"dds":0.5432098765432098,"last_synced_commit":"3c000c80987c84b34bb3ad0907a7cc092ef76b30"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukeshsolanki%2Fandroid-otpview-pinview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukeshsolanki%2Fandroid-otpview-pinview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukeshsolanki%2Fandroid-otpview-pinview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mukeshsolanki%2Fandroid-otpview-pinview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mukeshsolanki","download_url":"https://codeload.github.com/mukeshsolanki/android-otpview-pinview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264926,"owners_count":22041812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-library","android-pinview","authentication","compose","compose-library","custom-view","jetpack-compose","otp","otpview"],"created_at":"2024-11-09T07:47:40.097Z","updated_at":"2025-05-15T11:05:49.686Z","avatar_url":"https://github.com/mukeshsolanki.png","language":"Java","funding_links":["https://github.com/sponsors/mukeshsolanki","https://www.paypal.me/mukeshsolanki"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eCompose OtpView/PinView\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.codacy.com/app/mukeshsolanki/android-otpview-pinview?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=mukeshsolanki/android-otpview-pinview\u0026amp;utm_campaign=Badge_Grade\"\u003e\u003cimg src=\"https://api.codacy.com/project/badge/Grade/ea98277d42924a09b5ae9daa5d10e424\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://jitpack.io/#mukeshsolanki/android-otpview-pinview\"\u003e \u003cimg src=\"https://jitpack.io/v/mukeshsolanki/android-otpview-pinview/month.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://jitpack.io/#mukeshsolanki/android-otpview-pinview\"\u003e \u003cimg src=\"https://jitpack.io/v/mukeshsolanki/android-otpview-pinview.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/mukeshsolanki/android-otpview-pinview/actions\"\u003e \u003cimg src=\"https://github.com/mukeshsolanki/android-otpview-pinview/workflows/Build/badge.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\"/\u003e\u003c/a\u003e\n  \u003cbr /\u003e\u003cbr /\u003e\n    A custom control to enter a code usually in cases of authentication.\n\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/mukeshsolanki/android-otpview-pinview/main/screenshots/ss1.png\"/\u003e \u0026nbsp;\u0026nbsp;\n\u003cimg src=\"https://raw.githubusercontent.com/mukeshsolanki/android-otpview-pinview/main/screenshots/ss2.png\" /\u003e \u0026nbsp;\u0026nbsp;\n\u003cimg src=\"https://raw.githubusercontent.com/mukeshsolanki/android-otpview-pinview/main/screenshots/ss3.png\" /\u003e \u0026nbsp;\u0026nbsp;\n\n# Supporting Compose OtpView/PinView\n\nCompose PinView/OtpView is an independent project with ongoing development and support made possible thanks to your donations.\n- [Become a backer](https://www.paypal.me/mukeshsolanki)\n\n## How to integrate into your app?\nIntegrating the project is simple. All you need to do is follow the below steps\n\nStep 1. Add the JitPack repository to your build file. Add it in your root build.gradle at the end of repositories:\n\n```java\nallprojects {\n  repositories {\n    ...\n    maven { url \"https://jitpack.io\" }\n  }\n}\n```\nStep 2. Add the dependency\nfor Compose\n```java\ndependencies {\n        implementation 'com.github.mukeshsolanki.android-otpview-pinview:otpview-compose:3.1.0'\n}\n```\n\nfor View system\n```java\ndependencies {\n        implementation 'com.github.mukeshsolanki.android-otpview-pinview:otpview:3.1.0'\n}\n```\n\n## How to use the library?\nOkay seems like you integrated the library in your project but **how do you use it**? Well its really easy.\n- Using Compose\nJust use the `OtpView` composable where you need to display the view like.\n```kotlin\nvar otpValue by remember { mutableStateOf(\"\") }\nOtpView(\n    otpText = otpValue,\n    onOtpTextChange = {\n        otpValue = it\n        Log.d(\"Actual Value\", otpValue)\n    },\n    type = OTP_VIEW_TYPE_BORDER,\n    password = true,\n    containerSize = 48.dp,\n    passwordChar = \"•\",\n    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),\n    charColor = Color.White\n)\n```\n- Using Older View System (aka XML)\nAdd the view in your xml file like\n```xml\n\u003ccom.mukeshsolanki.OtpView\n    android:id=\"@+id/otp_view\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    android:layout_marginTop=\"72dp\"\n    android:inputType=\"text\"\n    android:itemBackground=\"@drawable/bg_otp_item\"\n    android:textAllCaps=\"true\"\n    android:textColor=\"@android:color/white\"\n    app:OtpHideLineWhenFilled=\"true\"\n    app:OtpItemCount=\"6\"\n    app:OtpItemSpacing=\"6dp\"\n    app:OtpLineColor=\"@color/otp_item_state\"\n    app:OtpState_filled=\"true\"\n    app:OtpViewType=\"line\"\n/\u003e\n```\nNext in your code assign `otp_view` to a variable like\n```kotlin\nval otpView = findViewById(R.id.otp_view)\n```\nimplement OnOtpCompletionListener\n```kotlin\notpView.setOtpCompletionListener {\n    Log.d(\"Actual Value\", it)\n}\n```\nThat's pretty much it and your all wrapped up.\n\n## Author\nMaintained by [Mukesh Solanki](https://www.github.com/mukeshsolanki)\n\n## Contribution\n[![GitHub contributors](https://img.shields.io/github/contributors/mukeshsolanki/android-otpview-pinview.svg)](https://github.com/mukeshsolanki/android-otpview-pinview/graphs/contributors)\n\n* Bug reports and pull requests are welcome.\n\n## License\n```\nMIT License\n\nCopyright (c) 2018 Mukesh Solanki\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmukeshsolanki%2Fandroid-otpview-pinview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmukeshsolanki%2Fandroid-otpview-pinview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmukeshsolanki%2Fandroid-otpview-pinview/lists"}