The EditText is one of the important UI element which takes the data as input from the user. The usual EditText in Android which looks decent enough has only the hint text and line which makes the user click on that line and insert the data. Refer to the article EditText widget in Android using Java with Examples, which explains basics about the normal AppCompat EditText. In this article, it’s been discussed how to customize the AppCompat EditText. Have a look at the following image to differentiate between the usual non-customized AppCompat EditText and the customized AppCompat EditText.
Steps to customize the AppCompat EditText in Android
Step 1: Create an empty Activity Project
- Create an empty activity Android Studio Project.
- Refer to Android | How to Create/Start a New Project in Android Studio?
Step 2: Working with the activity_main.xml file
- Only two EditText widgets are implemented in the main layout file. One is Username and another is Password field.
- Invoke the following code to implement the same UI.
XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="HardcodedText">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--E-mail field-->
<EditText
android:id="@+id/emailField1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:hint="Email" />
<!--Password field-->
<EditText
android:id="@+id/passwordField1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:hint="Password" />
</LinearLayout>
</ScrollView>
|
Output UI:
Step 3: Import vector icons
- Import vector icons into the drawable folder.
- To import the vector icons right-click on the drawable folder > New > Vector Asset.
- Make sure to make copies of the single icon in the drawable folder. One icon when the edit text is out of focus and when the edit text is in focus.
- Set the color of the icon to grey when the edit text is out of focus and set the color of the icon to colorPrimary when the EditText is in focus.
- Refer to the following image to get the steps discussed above.
- And combining both the icons make a selector XML layout custom_mail_icon as following.
XML
<?xml version="1.0" encoding="utf-8"?>
<!--the icon turns to green when the edit text is in focus-->
<item android:drawable="@drawable/ic_mail_focused" android:state_focused="true" />
<!--the icon turns to grey when the edit text is out of focus-->
<item android:drawable="@drawable/ic_mail" android:state_focused="false" />
</selector>
|
- The same goes for the password field icon.
First, the EditText with the cut-cornered layout is discussed
Step 1: Create a Selector layout background for the EditText
- This is the layout that gives the cut-cornered box for the EditText field.
- To implement the same create a custom_edit_text_cut.xml file under the drawable folder and invoke the following code.
XML
<?xml version="1.0" encoding="utf-8"?>
<!--the outline box turns to green when the edit text is in focus-->
<item android:state_enabled="true" android:state_focused="true">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<stroke android:width="2dp" android:color="@color/colorPrimary" />
</shape>
</item>
<!--the outline box turns to grey when the edit text is out of focus-->
<item android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<stroke android:width="2dp" android:color="@android:color/darker_gray" />
</shape>
</item>
</selector>
|
Step 2: Working with the activity_main.xml file
- In the activity_main.xml file invoke the background for the EditText as custom_edit_text_cut.xml.
XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="HardcodedText">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--invoke the background as the
custom_edit_text_cut-->
<EditText
android:id="@+id/emailField1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:background="@drawable/custom_edit_text_cut"
android:drawableStart="@drawable/custom_mail_icon"
android:drawablePadding="12dp"
android:hint="Email"
android:paddingStart="12dp"
android:paddingEnd="12dp" />
<!--same background for the password field
as the custom_edit_text_cut-->
<EditText
android:id="@+id/passwordField1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="@drawable/custom_edit_text_cut"
android:drawableStart="@drawable/custom_vpn_icon"
android:drawablePadding="12dp"
android:hint="Password"
android:paddingStart="12dp"
android:paddingEnd="12dp" />
</LinearLayout>
</ScrollView>
|
Output: Run on Emulator
Second, the EditText with the round-cornered layout is discussed
Step 1: Create a Selector layout background for the EditText
- This is the layout that gives the cut-cornered box for the EditText field.
- To implement the same create a custom_edit_text_rounded.xml file under the drawable folder and invoke the following code.
XML
<?xml version="1.0" encoding="utf-8"?>
<!--The outline turns to colorPrimary when the EditText is in focus-->
<item android:state_enabled="true" android:state_focused="true">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="12dp" />
<stroke android:width="2dp" android:color="@color/colorPrimary" />
</shape>
</item>
<!--The outline turns to grey when the EditText is out of focus-->
<item android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="12dp" />
<stroke android:width="2dp" android:color="@android:color/darker_gray" />
</shape>
</item>
</selector>
|
Step 2: Working with the activity_main.xml file
- In the activity_main.xml file invoke the background for the EditText as custom_edit_text_rounded.xml.
XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="HardcodedText">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--invoke the background as the
custom_edit_text_rounded-->
<EditText
android:id="@+id/emailField1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:background="@drawable/custom_edit_text_rounded"
android:drawableStart="@drawable/custom_mail_icon"
android:drawablePadding="12dp"
android:hint="Email"
android:paddingStart="12dp"
android:paddingEnd="12dp" />
<!--same background for the password field
as the custom_edit_text_rounded-->
<EditText
android:id="@+id/passwordField1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:background="@drawable/custom_edit_text_rounded"
android:drawableStart="@drawable/custom_vpn_icon"
android:drawablePadding="12dp"
android:hint="Password"
android:paddingStart="12dp"
android:paddingEnd="12dp" />
</LinearLayout>
</ScrollView>
|