How to Customize AppCompat EditText in Android? - GeeksforGeeks

18 Feb, 2021
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.
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     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    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"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <!--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.
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"?><selector xmlns:android="http://schemas.android.com/apk/res/android">      <!--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     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    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>
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"?><selector xmlns:android="http://schemas.android.com/apk/res/android">      <!--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     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    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>
android
Android-View
Technical Scripter 2020
Android
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Android Listview in Java with Example
How to Save Data to the Firebase Realtime Database in Android?
Flexbox-Layout in Android
How to Change the Background Color After Clicking the Button in Android?