Open In App

How to Customize AppCompat EditText in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Customize AppCompat EditText in Android

Steps to customize the AppCompat EditText in Android

Step 1: Create an empty Activity Project

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: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:

Customize AppCompat EditText in Android

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.

Customize AppCompat EditText in Android

  • 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.

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"?>
<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: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>


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"?>
<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: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>


Output: Run on Emulator



Last Updated : 18 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads