Code Monkey home page Code Monkey logo

pinview's Introduction

PinView

Provides a widget for enter PIN/OTP/password etc on Android 4.1+ (API 16).

Dependency

JCenter(Deprecated)

repositories {
    maven {
        jcenter()
    }
}

dependencies {
   implementation 'com.chaos.view:pinview:1.4.4'
}

MavenCentral

repositories {
    maven {
        mavenCentral()
    }
}

dependencies {
   implementation 'io.github.chaosleung:pinview:1.4.4'
}

Note that MavenCentral uses io.github.chaosleung as the group id

Usage

PinView inherits from EditText, which means you can use all the APIs from EditText.

Step 1:

Add PinView in your layout.

XML

<com.chaos.view.PinView
    android:id="@+id/firstPinView"
    style="@style/PinWidget.PinView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:cursorVisible="true"
    android:hint="Hint."
    android:inputType="text"
    android:itemBackground="@mipmap/ic_launcher"
    android:padding="@dimen/common_padding"
    android:textColor="@color/text_colors"
    android:textSize="18sp"
    android:textStyle="bold"
    app:cursorColor="@color/line_selected"
    app:cursorWidth="2dp"
    app:hideLineWhenFilled="true"
    app:itemCount="5"
    app:itemHeight="48dp"
    app:itemRadius="4dp"
    app:itemSpacing="0dp"
    app:itemWidth="48dp"
    app:lineColor="@color/line_colors"
    app:lineWidth="2dp"
    app:viewType="rectangle" />

Java

final PinView pinView = findViewById(R.id.secondPinView);
pinView.setTextColor(
        ResourcesCompat.getColor(getResources(), R.color.colorAccent, getTheme()));
pinView.setTextColor(
        ResourcesCompat.getColorStateList(getResources(), R.color.text_colors, getTheme()));
pinView.setLineColor(
        ResourcesCompat.getColor(getResources(), R.color.colorPrimary, getTheme()));
pinView.setLineColor(
        ResourcesCompat.getColorStateList(getResources(), R.color.line_colors, getTheme()));
pinView.setItemCount(4);
pinView.setItemHeight(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_size));
pinView.setItemWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_size));
pinView.setItemRadius(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_radius));
pinView.setItemSpacing(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_spacing));
pinView.setLineWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_line_width));
pinView.setAnimationEnable(true);// start animation when adding text
pinView.setCursorVisible(false);
pinView.setCursorColor(
        ResourcesCompat.getColor(getResources(), R.color.line_selected, getTheme()));
pinView.setCursorWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_cursor_width));
pinView.addTextChangedListener(new TextWatcher() {...});
pinView.setItemBackgroundColor(Color.BLACK);
pinView.setItemBackground(getResources().getDrawable(R.drawable.item_background));
pinView.setItemBackgroundResources(R.drawable.item_background);
pinView.setHideLineWhenFilled(false);
pinView.setPasswordHidden(false);
pinView.setTransformationMethod(new PasswordTransformationMethod());

Step 2:

Specifies pinViewStyle in your theme,

<style name="AppTheme" parent="Theme.AppCompat.Light">
    ...
    <item name="pinViewStyle">@style/PinWidget.PinView</item>
</style>

or use the PinWidget.PinView style.

<com.chaos.view.PinView
    android:id="@+id/pinView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/PinWidget.PinView" />

Step 3 (Optional):

To highlight current item, use 'selected' state, in other words,

add android:state_selected="true" to app:lineColor

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Use for the item to be input, set the value as the default to disable it -->
    <item android:color="@color/line_selected" android:state_selected="true" />
    <item android:color="@color/line_focused" android:state_focused="true" />
    <item android:color="@color/line_default" />
</selector>

or add android:cursorVisible="true".

Attributes

  • 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 PinView, currently this will be one of rectangle, line or none.
  • cursorVisible, show cursor or not.
  • cursorColor, the cursor color.
  • cursorWidth, the width of cursor.
  • itemBackground, the item background.
  • hideLineWhenFilled, specifies whether the line (border) should be hidden or visible when text entered.

Thanks

License

Copyright 2017-2018 Chaos Leong

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.

pinview's People

Contributors

alexcohn avatar chaosleung avatar rafaeltoledo avatar tobiasschuerg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pinview's Issues

getText from pinView

hi,
how can I get text or char from pinView to compare written text and my default pin.Thanks in advance

Not Compatible with below 21 API android

I tried to run my application with this pin view layout in the tablet with version 4.4.2 and it goes break off i.e., a message pop up with "Unfortunately, it stops working." But it is working fine on version 5 ( lollipop ).

rtl - it does not start from right to left

What kind of issue is this?

  • Question.The cursor start from left side only even my locale is in arabic.
  • PinView version: 1.4.2
  • Device OS version:
  • Device Name:
Description:Even my application's locale is in arabic but the cursor of pin view start from left side. it should be start from right side.
Reproduction Steps:
What did I do:

Can't switch between hide and view password

What kind of issue is this?

  • Feature Request. A function that switch the view between password view to text view.
Info:
  • PinView version: 1.4.3
  • Device OS version: 9
  • Device Name: Oneplus5
Description:

Is there a clever way to let the user switch between hide and view password in an android PinView? A number of apps let the user do this.

Reproduction Steps:
What did I do:

In layout file I have by defauult made the PinVew's password label to true, now I want to disable the view using a button. In code i tried pinView.setTransformationMethod(new PasswordTransformationMethod()); but it doesn't do anything.

[Change Request] Prefix the attrs values.

Description:

Would be possible to prefix the attrs values in order to not conflict with other libraries?

At the moment, the attribute attr/viewType conflicts with one with the same name in the new Androidx Media2 library androidx.media2:media2-widget. Prefixing to something like pin_viewType pin_backgroundColor would almost 100% prevent conflict issues of attributes.

Set spacing between 2 specific items only

What kind of issue is this?

  • Question. If you want to ask how to do something, or to understand why something isn't
    working the way you expect it to.

  • Bug report. Please provide your device name, device OS version, and describe the reproduction steps.

  • Feature Request. Telling us what problem you’re trying to solve.

Info:
  • PinView version: 1.4.2
Description:

Hi and first, thank you for this great lib ! 👍

I would like to set a larger spacing between 2 items than between the others. Something like that :

Capture d’écran 2019-04-01 à 15 27 50

How can I do it please ?

Thank you in advance

Give support for custom masking of pinView

Please give support for custom masking of password field like masking of entered text with asterik because right now it is by default drawing circle and I couldnt find any way to change that.
I have already doing this using below code but it is still drawing the circle as mask of entered text,

 val asterik = AsteriskPasswordTransformationMethod()
firstPinView.transformationMethod = asterik


public class AsteriskPasswordTransformationMethod extends PasswordTransformationMethod {
    @Override
    public CharSequence getTransformation(CharSequence source, View view) {
        return new PasswordCharSequence(source);
    }

    private class PasswordCharSequence implements CharSequence {
        private CharSequence mSource;

        public PasswordCharSequence(CharSequence source) {
            mSource = source; // Store char sequence
        }

        public char charAt(int index) {
            return '*'; // This is the important part
        }

        public int length() {
            return mSource.length(); // Return default
        }

        public CharSequence subSequence(int start, int end) {
            return mSource.subSequence(start, end); // Return default
        }
    }
}

Open keyboard programmatically

.callOnClick() does nothing, Adding OnClickListener shows that onClick was called programmatically, but keyboard not shown. Keyboard will appear only after manually click.
Please fix it ASAP

JCenter is shutting down, are there plans to migrate?

What kind of issue is this?

  • Question. If you want to ask how to do something, or to understand why something isn't
    working the way you expect it to.

  • Bug report. Please provide your device name, device OS version, and describe the reproduction steps.

  • Feature Request. Telling us what problem you’re trying to solve.

Description:

JCenter is shutting down, are there plans to migrate? - https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/

Bug: Keyboard not showing

  • PinView type number but it did not open when I click.
Info:
  • PinView version: 1.4.3
  • Device OS version: Android 7.0
  • Device Name: Tablet: reeeder_T8

Not working for android api 28

Hi this library not working for android 9 api 28 in which it try to convert from java to androidx.

below error code come out when run in android studio.

`Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0-rc02] AndroidManifest.xml:22:18-91

is also present at [androidx.core:core:1.0.0-rc01] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory). Suggestion: add 'tools:replace="android:appComponentFactory"' to element at AndroidManifest.xml:5:5-19:19 to override.`

How to set value with Java?

Hey, I'm trying to read SMS pin automatically. But I didn't find setValue or etc in Java. How can I set a value?

Visual feedback if input is "full"

There should be some kind of visual feedback (shaking, blinking, ...) if all fields are already filled and another number is entered.

change square box color

  • Feature Request. how to change box color
Info:
  • PinView version:
  • Device OS version:8
  • Device Name:Mi note 5 pro
Description:
Reproduction Steps:
What did I do:

viewType line isn't a straight line

For some reason using viewType="line" does not produce a line, but has some odd coloring on the sides. Below is the snippet of code I am using as well as a screenshot

<com.chaos.view.PinView android:id="@+id/pinView" style="@style/PinWidget.PinView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="number" android:singleLine="true" app:itemCount="6" app:lineWidth="2dp" app:viewType="line" />

screen shot 2017-12-22 at 10 21 30 am

Enable Similar softkeyboard for Pin and Password

What kind of issue is this?

  • Feature Request. Telling us what problem you’re trying to solve.
Info:
  • PinView version: 1.4.3
  • Device OS version: API 28
  • Device Name: Pixel
Description:

I am using PinView as a toggle option for password input with the show and hide option where I am changing showing and hiding number using InputType.TYPE_CLASS_NUMBER and InputType.TYPE_NUMBER_VARIATION_PASSWORD. But while toggling between the showing and hiding thing, the soft keyboard is also changing.

Is there a way to have consistent keyboard?

Feature request

image

Need support for splitting characters with specific fomrat

Auto open keyboard

Hi, do not work auto open keyboard for view. I can't open implicit too.

Text is invisible on some devices

  • Bug report.
Info:
  • PinView version: 1.4.4
  • Device OS version: android 11
  • Device Name:Samsung S10E
Description:

it seems that user is able to proceed, but digits are not shown, which is undesirable
PinView is in a RecyclerView, code is below.
got a video:

t_video5415848847089863359.mp4
class BmgPinView(
    val pin: String,
    val callback: (String) -> Unit,
) : DisplayDiffItem(R.layout.item_bmg_pinview, "bmg_pin", "") {

    class ViewHolder(view: View) : DisplayViewHolder<BmgPinView>(view) {

        override fun bind(item: BmgPinView) {
            pin_view.setText(item.pin)
            pin_view.doAfterTextChanged {
                item.callback(it)
            }
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="@dimen/activity_horizontal_margin"
    android:layout_marginTop="16dp">

    <com.chaos.view.PinView
        android:id="@+id/pin_view"
        style="@style/PinWidget.PinView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:cursorVisible="true"
        android:imeOptions="actionDone"
        android:inputType="number"
        android:paddingTop="20dp"
        android:paddingBottom="10dp"
        android:textSize="16sp"
        app:itemCount="4"
        app:itemHeight="65dp"
        app:itemRadius="15dp"
        app:itemWidth="65dp"
        app:lineColor="@color/defaultBg"
        tools:text="1234" />

</FrameLayout>

Hiding pin lines when symbol entered

Hello, @chaosleong

I have a proposal for a little enhancement. I think it's a usual UX that when you entered the symbol in PinView the line (or rectangle) under it is not drawn.

Something like on this image pin with no lines

Would you mind if I will realize that little feature through additional attribute?

Issue with checkItemRadius

<com.chaos.view.PinView
            android:id="@+id/pin_view"
            style="@style/PinWidget.PinView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="48dp"
            android:cursorVisible="false"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:imeOptions="flagNoFullscreen"
            android:inputType="numberPassword"
            android:textColor="@color/grey"
            android:textSize="18sp"
            app:itemCount="4"
            app:itemHeight="36dp"
            app:itemRadius="18dp"
            app:itemSpacing="16dp"
            app:itemWidth="36dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txt_description"
            app:lineColor="@color/grey"
            app:lineWidth="2dp"
            app:viewType="rectangle" />

I'm using the above code and the app crashes with the following:

Caused by java.lang.RuntimeException The itemRadius can not be greater than itemWidth
com.chaos.view.PinView.checkItemRadius (PinView.java:193)
com.chaos.view.PinView. (PinView.java:150)
com.chaos.view.PinView. (PinView.java:104)

The radius is exactly half the item width but the app crashes.

Happening on Galaxy S3, S7 and Pixel 2 XL

im using target version 29 not showing keyboard

What kind of issue is this?

  • Question. If you want to ask how to do something, or to understand why something isn't
    working the way you expect it to.

  • Bug report. Please provide your device name, device OS version, and describe the reproduction steps.

  • Feature Request. Telling us what problem you’re trying to solve.

Info:
  • PinView version:
  • Device OS version:
  • Device Name:
Description:
Reproduction Steps:
What did I do:

Editing Item at particular Position

Suppose I enter 5 numbers in the edit text & I want to edit item at 2nd position only, so now I have delete all the items from the last till 2nd to edit one particular item. Is it possible to place cursor at particular item and delete only that item instead of all the items leading up to it.

Enable blinking in the current selected item

Thank you for this library! 💪

  • Feature Request.
Info:
  • PinView version: 1.4.3
  • Device OS version: 29
Description:

Is there a way to make the line under the focused character blink?

What did I do:

I tried adding statlistanimator but didn't get it to work.

duplicate value for resource attr/itemBackground with config ''

-I have added this library to my android project and everything was working fine until I added design support library ( 'com.android.support:design:27.1.1'), after adding this my gradle build failed with following error
Caused by: org.gradle.internal.UncheckedException: java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource compilation failed MyAppDirectory\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml:2489: error: duplicate value for resource 'attr/itemBackground' with config ''.
and when I remove the design support library dependency then everything becomes fine.

Complete problem description : https://stackoverflow.com/questions/51709716/android-resource-compilation-failed

Change FontFamily

Hi, awesome work.

It would be nice if you could add the feature to change font family with the new feature added in support lib 26 font in XML.

Keyboard does not appear, by any means

Hi,
I have tried many methods just to bring the keyboard, but it doesn't appear. I used its method to showSoftInput but still nothing.
Does any one have got the same problem?

Any way to fill in circles when user inputs pin?

Currently, there's gap between the stroke and the circle that gets drawn when user enters pin.

Is there any way to remove the gap?

Also, is there another option where we can have filled circles for default state and same look with different colour when pin is entered?

Method to set the cursor on a specific postion

Thanks for the awesome library

Is it possible to set the cursor position on top of a specific position

image

like in the above screen setting the focus to the last or any of the rest of the box.

How to enable copy-paste option ?

Question.
Copy paste functionality not working in pinview even setting
android:textIsSelectable="true" on the com.chaos.view.PinView

Change Pin Item Color if text is written on it

What kind of issue is this?

  • Question. If you want to ask how to do something, or to understand why something isn't
    working the way you expect it to.

  • Bug report. Please provide your device name, device OS version, and describe the reproduction steps.

  • [1] Feature Request. Telling us what problem you’re trying to solve.

Info:
  • PinView version: 1.4.3
  • Device OS version: Oreo
  • Device Name: Realme 3 Pro
Description: I want to highlight pin item border if the text is filled on that item
Reproduction Steps:
What did I do:

DataBinding doesn't work with drawables

I'm trying to do something like this:
app:lineColor="@{viewmodel.isError ? @drawable/selector_pin_view_error : @drawable/selector_pin_view}"
but there is no setter for attribute "app:lineColor" with parameter type Drawable. Worth mentioning that databinding does work with colors, like this:
app:lineColor="@{viewmodel.isError ? @color/error : @color/default}"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.