This is custom input widget for OTP and passwords. It's beautiful and easy to you!
Kotlin Language
Add it in your root build.gradle at the end of repositories: allprojects{repositories{... maven{url 'https://jitpack.io' } } } ... Addthisdependency: dependencies{compile 'com.github.Temidtech:AndroidOtpCustomViewmaster:1.0' }OtpCustomView is written in Kotlin language, it's light-weight and simple to implement.OtpCustomView inherits from EditText, which implies you can use all the APIs from EditText.
Include OtpCustomView in your layout.
<com.swiftsynq.otpcustomview.CustomOtpView android:id="@+id/otpView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:cursorVisible="true"app:cursorColor="@color/colorAccent"app:cursorWidth="2dp"app:itemCount="6"app:itemHeight="52dp"app:itemRadius="2dp"app:itemSpacing="0dp"app:itemWidth="36dp"android:hint="Hello."android:inputType="text"android:padding="@dimen/common_padding"android:textColor="@color/colorBlack"android:textSize="21sp"app:lineColor="@color/line_colors"app:lineWidth="1dp"app:viewType="rectangle" />val customOtpView = findViewById(R.id.secondPinView) asCustomOtpView customOtpView.setTextColor( ResourcesCompat.getColor(getResources(), R.color.colorAccent, getTheme())) customOtpView.setTextColor( ResourcesCompat.getColorStateList(getResources(), R.color.text_colors, getTheme())) customOtpView.setLineColor( ResourcesCompat.getColor(getResources(), R.color.colorPrimary, getTheme())) customOtpView.setLineColor( ResourcesCompat.getColorStateList(getResources(), R.color.line_colors, getTheme())) customOtpView.setItemCount(4) customOtpView.setItemHeight(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_size)) customOtpView.setItemWidth(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_size)) customOtpView.setItemRadius(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_radius)) customOtpView.setItemSpacing(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_spacing)) customOtpView.setLineWidth(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_line_width)) customOtpView.setAnimationEnable(true)// start animation when adding text customOtpView.setCursorVisible(false) customOtpView.setCursorColor( ResourcesCompat.getColor(getResources(), R.color.line_selected, getTheme())) customOtpView.setCursorWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_cursor_width)) customOtpView.addTextChangedListener(object:TextWatcher(){})CustomOtpViewcustomOtpView = (CustomOtpView) findViewById(R.id.secondPinView); customOtpView.setTextColor( ResourcesCompat.getColor(getResources(), R.color.colorAccent, getTheme())); customOtpView.setTextColor( ResourcesCompat.getColorStateList(getResources(), R.color.text_colors, getTheme())); customOtpView.setLineColor( ResourcesCompat.getColor(getResources(), R.color.colorPrimary, getTheme())); customOtpView.setLineColor( ResourcesCompat.getColorStateList(getResources(), R.color.line_colors, getTheme())); customOtpView.setItemCount(4); customOtpView.setItemHeight(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_size)) customOtpView.setItemWidth(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_size)) customOtpView.setItemRadius(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_radius)) customOtpView.setItemSpacing(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_spacing)) customOtpView.setLineWidth(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_item_line_width)) customOtpView.setAnimationEnable(true);// start animation when adding textcustomOtpView.setCursorVisible(false); customOtpView.setCursorColor( ResourcesCompat.getColor(getResources(), R.color.line_selected, getTheme())); customOtpView.setCursorWidth(getResources().getDimensionPixelSize(R.dimen.otp_customotp_view_cursor_width)); customOtpView.addTextChangedListener(newTextWatcher(){...});Specifies otpViewStyle in your theme,
<stylename="AppTheme"parent="Theme.AppCompat.Light"> ... <itemname="otpViewStyle">@style/OtpWidget.CustomOtpView</item> </style>or use the OtpWidget.CustomOtpView style.
<com.swiftsynq.otpcustomview.CustomOtpView android:id="@+id/otpView"android:layout_width="wrap_content"android:layout_height="wrap_content"style="@style/OtpWidget.CustomOtpView" />To highlight current item,
add android:state_selected="true" to app:lineColor
<selectorxmlns:android="http://schemas.android.com/apk/res/android"> <!-- Use for the item to be input, set the value as the default to disable it --> <itemandroid:color="@color/line_selected"android:state_selected="true" /> <itemandroid:color="@color/line_focused"android:state_focused="true" /> <itemandroid:color="@color/line_default" /> </selector>or add android:cursorVisible="true".
- itemCount, the length of your pin code.
- itemWidth, the width of each item.
- itemHeight, the height of each item.
- itemSpacing, the spacing between two items.
- lineWidth, the line (border) width.
- lineColor, the line (border) colors.
- viewType, the view type of CustomOtpView, currently this will be one of
rectangleorline. - cursorColor, the cursor color.
- cursorWidth, the width of cursor.
- Inspired by PasswordInput in EthanCo
Maintained by Temidayo Adefioye
- Bug reports and pull requests are welcome.
- Make sure you use square/java-code-styles to format your code.
Copyright 2018 Temidayo Adefioye Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.