EditText Widget is a widely used widget in Android User Interface design. You will need it for almost every time when comes to input.
The default EditText widget in Android UI bundle is pretty simple but good enough for most cases. However, it will comes to sometime you want or be asked to customize the eidttext box for some purpose, maybe for Branding, or just for better looking.
The approach for this design is very simple. First got two images with all the text and icon on it, then set them as the background of the edittext box. Adjust their position and size and good to go.
However, you will encounter a problem here. The position of the cursor.
If you don’t do any modification. The default of the cursor will start at the very left of the box. When you typing, the text inputed will block the background images. That is, it will first block the ‘Username’ since it is not real text but just image, then if you input longer, it will block the end small icon.
To solve this problem, we using Padding to set the start and end position of the input cursor. I believe this trick works for any input type widget, you could go find yourself.
Here is the code in the layout file about how to do it:
We move the start position of cursor 100dp right from left end. Just avoid any blocking problem with that imaged ‘Username’ area. And same way, by setting
, We move the end position 30dp left from right end. Avoid that small icon area.
This is my approach. I am not sure whether there is some other way to do the same (I believe there is), please leave your solution here if you like!