Android EditText implements a flat login interface

Let's take a look at the effect drawing of the login interface

2. Listen to EditText and clear it with one click

three check@R_ 392_ 2419 @ uniform color

code

Next, let's talk about how to implement this interface. I'll post all the code.

Several key issues

It can be seen from the figure that the whole layout is distributed from top to bottom. Then we will analyze according to this sequence. 1. How to display a picture circularly. 2. The layout of the overall input box (the implementation of the vertical line in the input box) 3. Monitor whether EditText has input. 4. Put check@R_ 392_ The color of 2419 @ is consistent with the interface

1. How to display a picture circularly

I use an open source project, circleimageview, which can be used to easily realize the rounding of images. First, add the dependency compile 'de.hdodenhof: circleimageview: 2.1.0' in build.gradle, and replace the ImageView with < de.hdodenhof. Circleimageview. Circleimageview > in the XML layout

2. Layout of overall input box (implementation of vertical line in input box)

The whole input box is realized by conventional ImageView and textview. It is a vertical line separating pictures and prompt text. We need to write it ourselves with view.

Such a vertical line is written, and the distance can be adjusted according to your input box. To be very concise when writing EditText, you need to set the background to "@ null" and write a "shape" yourself

"ColorCursor" is the style of its own interface

3. Listen to EditText for input

I'll post the code first

First, you can see from the layout that the delete button is hidden by default. Android: visibility = "invisible" then listen to the input event of EditText. If the length of the input content is greater than 0, the delete icon will be displayed and the input can be cleared. The above code is a tool class. Refer to this blog - androidmsky, which also writes a login interface.

The code that is invoked in the program:

The above is the overall implementation of the login interface. Here is just a demo level example. We have better implementation methods and can communicate more. If there are errors, please don't hesitate to comment.

And if you see here, thank you very much. After reading my article, there is another partner on the Android road who can discuss and communicate together.

Project address: https://github.com/DongXUU/LoginDemo , you can download the complete project

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.