{"id":25560022,"url":"https://github.com/styropyr0/otpview","last_synced_at":"2025-04-12T04:54:20.902Z","repository":{"id":269201696,"uuid":"896435501","full_name":"styropyr0/OTPView","owner":"styropyr0","description":"A fully customizable Android library to input OTP, with a lot of features.","archived":false,"fork":false,"pushed_at":"2025-04-01T13:09:09.000Z","size":240,"stargazers_count":5,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T04:54:12.721Z","etag":null,"topics":["android","android-dependency","android-library","android-otp-view","android-xml","otp-library","otp-view"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","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/styropyr0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-30T11:04:30.000Z","updated_at":"2025-04-01T13:09:13.000Z","dependencies_parsed_at":"2024-12-21T18:27:42.889Z","dependency_job_id":"7ca79ba6-c355-44c1-b68d-440d085bd65f","html_url":"https://github.com/styropyr0/OTPView","commit_stats":null,"previous_names":["styropyr0/otpview"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styropyr0%2FOTPView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styropyr0%2FOTPView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styropyr0%2FOTPView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styropyr0%2FOTPView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styropyr0","download_url":"https://codeload.github.com/styropyr0/OTPView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519472,"owners_count":21117757,"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-dependency","android-library","android-otp-view","android-xml","otp-library","otp-view"],"created_at":"2025-02-20T17:28:53.403Z","updated_at":"2025-04-12T04:54:20.895Z","avatar_url":"https://github.com/styropyr0.png","language":"Kotlin","readme":"# **OtpView Library**\n\n**Latest Version**: 1.0.0\n\n**OtpView** is a customizable OTP (One Time Password) input view for Android. It allows users to enter OTPs in a secure, visually appealing way with full flexibility in terms of appearance and behavior. You can easily customize the number of input squares, square colors, text size, and many other aspects to fit your app's design.\n\n\u003cdiv style=\"display: flex; justify-content: center; gap: 10px;\"\u003e\n    \u003cimg src=\"./images/scr1.png\" alt=\"Screenshot 1\" width=\"200\"/\u003e\n    \u003cimg src=\"./images/scr2.png\" alt=\"Screenshot 2\" width=\"200\"/\u003e\n    \u003cimg src=\"./images/scr3.png\" alt=\"Screenshot 3\" width=\"200\"/\u003e\n\u003c/div\u003e\n\n---\n\n\n\n## **Installation**\n\nTo use **OtpView** in your project, add the following to your `build.gradle`:\n\n### Gradle (App Level)\n\n```gradle\ndependencies {\n    implementation 'com.github.styropyr0:OTPView:1.0.0'\n}\n```\nor for `app:build.gradle.kts`\n\n```kotlin\ndependencies {\n    implementation(\"com.github.styropyr0:OTPView:1.0.0\")\n}\n```\n\n### Project-level `settings.gradle`\n\n```gradle\ndependencyResolutionManagement {\n    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)\n    repositories {\n        mavenCentral()\n        maven { url 'https://jitpack.io' }\n    }\n}\n```\nor for `settings.gradle.kts`\n\n```kotlin\ndependencyResolutionManagement {\n    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)\n    repositories {\n        mavenCentral()\n        maven { url = uri(\"https://jitpack.io\") }\n    }\n}\n```\n\n---\n\n## **Getting Started**\n\n### **Step 1: Add the OtpView to Your Layout**\n\nTo add the `OtpView` to your layout file, use the following XML code:\n\n```xml\n    \u003ccom.matrix.otpview.OtpView\n        android:id=\"@+id/otp\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_marginHorizontal=\"25dp\"\n        android:gravity=\"center\"\n        app:autoSize=\"false\"\n        app:borderColor=\"#F21767\"\n        app:borderWidth=\"2dp\"\n        app:cornerRadius=\"18dp\"\n        app:shape=\"rectangle\"\n        app:inputType=\"number\"\n        app:fontFamily=\"@font/dm_sans_medium\"\n        app:highlightColor=\"#5B04E0\"\n        app:hintTextColor=\"@color/white\"\n        app:hint=\"*\"\n        app:textStyle=\"bold\"\n        app:maxCountPerLine=\"6\"\n        app:textColor=\"#D10F2C\"\n        app:onCompleteBorderColor=\"#2EDB17\"\n        app:squareColor=\"#B1EF7AB6\"\n        app:squareCount=\"4\"\n        app:squareHeight=\"55dp\"\n        app:squareWidth=\"55dp\" /\u003e\n```\n\n### **Step 2: Initialize and Customize in Your Activity/Fragment**\n\nIn your activity or fragment, you can access and customize the `OtpView` as follows:\n\n```kotlin\nval otpView = findViewById\u003cOtpView\u003e(R.id.otp)\notpView.apply {\n    setSquareCount(6)\n    setOnCompleteListener { otp -\u003e\n        if (!checkOTP(otp)) {\n            otpView.onOtpError(true)\n        }\n    }\n}\n```\n\n---\n\n## **Public Methods in OtpView**\n\n`OtpView` provides several public methods to customize the appearance and behavior of the OTP input view. Below are the descriptions and examples for each method.\n\n---\n\n### **`setSquareCount(int count)`**\n\n**Description**:  \nSets the number of OTP input fields (squares).\n\n**Parameters**:\n- `count`: The number of squares (e.g., 4 for a 4-digit OTP).\n\n**Usage**:\n```kotlin\notpView.setSquareCount(6)\n```\n\n---\n\n### **`setSquareColor(int color)`**\n\n**Description**:  \nSets the color of the OTP input fields (squares).\n\n**Parameters**:\n- `color`: The color (e.g., `Color.RED`, `#FF5733`).\n\n**Usage**:\n```kotlin\notpView.setSquareColor(Color.parseColor(\"#871EA0FD\"))\n```\n\n---\n\n### **`setSquareSize(float size)`**\n\n**Description**:  \nSets the size of the OTP input squares.\n\n**Parameters**:\n- `size`: The size in pixels (e.g., 50f for 50px).\n\n**Usage**:\n```kotlin\notpView.setSquareSize(50f)\n```\n\n---\n\n### **`setCornerRadius(float radius)`**\n\n**Description**:  \nSets the corner radius for each OTP square.\n\n**Parameters**:\n- `radius`: The corner radius in pixels (e.g., 8f for 8px).\n\n**Usage**:\n```kotlin\notpView.setCornerRadius(8f)\n```\n\n---\n\n### **`setTextSize(float size)`**\n\n**Description**:  \nSets the text size inside the OTP squares.\n\n**Parameters**:\n- `size`: The text size in pixels (e.g., 16f).\n\n**Usage**:\n```kotlin\notpView.setTextSize(16f)\n```\n\n---\n\n### **`setTextColor(int color)`**\n\n**Description**:  \nSets the color of the text inside the OTP squares.\n\n**Parameters**:\n- `color`: The color for the text (e.g., `Color.BLACK`, `#835EFF`).\n\n**Usage**:\n```kotlin\notpView.setTextColor(Color.parseColor(\"#835EFF\"))\n```\n\n---\n\n### **`setHighlightColor(int color)`**\n\n**Description**:  \nSets the color that will highlight the OTP input field while typing.\n\n**Parameters**:\n- `color`: The color for highlighting the input field (e.g., `#2A5CC1`).\n\n**Usage**:\n```kotlin\notpView.setHighlightColor(Color.parseColor(\"#2A5CC1\"))\n```\n\n---\n\n### **`setHint(String hint)`**\n\n**Description**:  \nSets a hint for the OTP input fields (usually displayed when empty).\n\n**Parameters**:\n- `hint`: The hint string (e.g., \"*\").\n\n**Usage**:\n```kotlin\notpView.setHint(\"*\")\n```\n\n---\n\n### **`setOnCompleteListener(OnOTPCompleteListener listener)`**\n\n**Description**:  \nSets a listener to be called when the OTP is completed.\n\n**Parameters**:\n- `listener`: The listener to handle the OTP completion.\n\n**Usage**:\n```kotlin\notpView.setOnCompleteListener { otp -\u003e\n    if (!checkOTP(otp)) {\n        otpView.onOtpError(true)\n    }\n}\n```\n\n---\n\n### **`onOtpError(boolean hasError)`**\n\n**Description**:  \nIndicates if there is an error with the OTP input (e.g., incorrect OTP).\n\n**Parameters**:\n- `hasError`: `true` for error, `false` otherwise.\n\n**Usage**:\n```kotlin\notpView.onOtpError(true)\n```\n\n---\n\n### **`setAutoProcess(boolean autoProcess)`**\n\n**Description**:  \nEnables or disables auto-processing of the OTP once the user completes the input.\n\n**Parameters**:\n- `autoProcess`: `true` to enable auto-processing, `false` to disable.\n\n**Usage**:\n```kotlin\notpView.setAutoProcess(true)\n```\n\n---\n\n### **`setInputType(String inputType)`**\n\n**Description**:  \nSets the input type (e.g., numeric or text) for the OTP field.\n\n**Parameters**:\n- `inputType`: \"number\" or \"text\".\n\n**Usage**:\n```kotlin\notpView.setInputType(\"number\")\n```\n\n---\n\n### **`setBorderColor(int color)`**\n\n**Description**:  \nSets the color of the border around the OTP input field.\n\n**Parameters**:\n- `color`: The color for the border (e.g., `Color.BLUE`, `#779AEB`).\n\n**Usage**:\n```kotlin\notpView.setBorderColor(Color.parseColor(\"#779AEB\"))\n```\n\n---\n\n### **`setBorderWidth(float width)`**\n\n**Description**:  \nSets the width of the border around the OTP input squares.\n\n**Parameters**:\n- `width`: The border width (e.g., `2f` for 2px).\n\n**Usage**:\n```kotlin\notpView.setBorderWidth(2f)\n```\n\n---\n\n### **`setSquareHeight(float height)`**\n\n**Description**:  \nSets the height of the OTP input squares.\n\n**Parameters**:\n- `height`: The height in pixels (e.g., `50f` for 50px).\n\n**Usage**:\n```kotlin\notpView.setSquareHeight(50f)\n```\n\n---\n\n### **`setSquareWidth(float width)`**\n\n**Description**:  \nSets the width of the OTP input squares.\n\n**Parameters**:\n- `width`: The width in pixels (e.g., `50f` for 50px).\n\n**Usage**:\n```kotlin\notpView.setSquareWidth(50f)\n```\n\n---\n\n### **`setMaxCountPerLine(int count)`**\n\n**Description**:  \nSets the maximum number of OTP input squares per line.\n\n**Parameters**:\n- `count`: The number of squares to display per line.\n\n**Usage**:\n```kotlin\notpView.setMaxCountPerLine(8)\n```\n\n---\n\n### **`setAutoSize(boolean autoSize)`**\n\n**Description**:  \nEnables or disables automatic resizing of the OTP input squares.\n\n**Parameters**:\n- `autoSize`: `true` to enable, `false` to disable.\n\n**Usage**:\n```\n\nkotlin\notpView.setAutoSize(true)\n```\n\n---\n\n## **License**\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyropyr0%2Fotpview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyropyr0%2Fotpview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyropyr0%2Fotpview/lists"}