Android imitating Alipay custom password input box and security keyboard (password keyboard)

In the previous projects, there is a payment scenario: the user needs to enter the transaction password when handling business, and can choose according to the payment method issued by the platform. This is very similar to Alipay's password input. If you use Android or third party keyboard, there will be a risk of password leakage. Therefore, most applications use custom password input boxes and secure keyboards.

Since the password input method needs to achieve a pop-up effect from the bottom, it is generally decided to use bottomsheetdialog for encapsulation. At the same time, in order to improve security, the numbers on the keyboard should be generated randomly. The interface is shown in the following figure:

First, create a passwordinputview class, and pass the context object, payment amount, supported payment method and other data to be used as the parameters of this class's construction method. It will also be mentioned below that this class has a callback method. When the password entered by the user meets six digits, the password can be obtained and displayed in the callback method. The passwordinputview class is constructed as follows:

Because the entered password cannot be displayed in clear text, use "●" instead of each password. The custom attributes involved in the custom password input box mainly include: the size, color and fillet radius of the input box, as well as the size, color and radius of the password dot. Therefore, the custom attribute attrs.xml file is as follows:

Next, you need to draw custom controls. First get the custom attribute, and then draw it in ondraw(). The code is as follows:

The secure keyboard is mainly implemented through GridView. As mentioned above, in order to ensure security, the numbers on the keyboard should be randomly generated during the initialization of the secure keyboard. The code is as follows:

The security keyboard click event is handled in the passwordinputview class by sending and receiving messages by passing in the handler object in the constructor of the adapter keyadapter. The code is as follows:

The handler object is defined in the passwordinputview class and is mainly used to handle the click events of the security keyboard. The code is as follows:

To facilitate external access to the password entered by the user, design a callback interface onpwdinputlistener, and create a set method for the callback interface in the passwordinputview class. The code is as follows:

When the textwatcher object of the passwordedittext control listens that the entered password meets six digits, call the callback method and pass the password as a parameter. The code is as follows:

Call the set method externally, create the onpwdinputlistener object, and rewrite the callback method to obtain the password entered by the user. The code is as follows:

The above describes the general implementation idea of user-defined password input box and secure keyboard. Small partners interested in the source code can click to download demo to view the specific implementation process and demonstration effect.