Create Custom EditText View in Android

We use the EditText for taking the input from the user and use it at several places in our project. We required to do lots of customization for each time and there are lots of redundant code we write. Writing and managing these redundant codes is very difficult for example if we want to change the look and feel of the view them we need to modify it at each place where our EditText is getting used. So to avoid these kinds of the problem we can create our own Custom EditText View by just. The EditText view is just an extension of the TextView with lots of editing option and properties that required for the user input.

How To Create Custom EditText View

For creating the Custom EditText we need to extend the AppCompatEditText and override all three constructors of the view as given below.

import android.content.Context;
import android.graphics.Typeface;
import android.support.annotation.Nullable;
import android.support.v7.widget.AppCompatEditText;
import android.util.AttributeSet;

public class CustomEditText extends AppCompatEditText {
    public CustomEditText(Context context) {
        super(context);
    }

    public CustomEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

Use The Custom EditText In Your Layout

We have just created the custom EditText but actually, don't change anything into this. But for now, we will use the same into our layout so that we can see the changes that we will do later. So let's set up the CustomEditText into your layout.

 <com.nplix.demo.CustomEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:text="Welcome to Custom Edit Text!!"/>

This is the default EditText View without any customization. So let's start the customization check how its getting changed.

How to change the font of the in Custom EditText

So the first customization we are going to do that customization of the font style. If you want you can use font awesome. So, first of all, we need to download the font *.ott or *.ttf file. You can download the lots of font from https://www.fontsquirrel.com/fonts/list/popular as per your requirements. Let's add the downloaded font to our Custom EditText.

Create the Assets folder in your project

Create the assets folder
Right click on src/main and go to new -> folder>Assets Folder
Create the fonts folder
Inside the assets, folder creates a new directory with the name of fonts. Just right-click on the assets and then new->directory.
Copy your downloaded font to fonts folder
Copy your downloaded font to the fonts directory, make sure all the characters of the file name is in a small case.
Override the setTypeface method in your CustomEditText class
Right-click inside your customEditText Class anywhere in android studio and select generates-->override method and select the Typeface.
Select the setTypeface from the List and modify it to use the new font

 @Override
    public void setTypeface(@Nullable Typeface tf, int style) {
        if(style==Typeface.BOLD) {
            tf=Typeface.createFromAsset(getContext().getAssets(), "fonts/josefinsans_bold.ttf");
            super.setTypeface(tf, style);
        }
        else if (style==Typeface.ITALIC){
            tf=Typeface.createFromAsset(getContext().getAssets(), "fonts/josefinsans_italic.ttf");
            super.setTypeface(tf, style);
        }
        else {
             tf=Typeface.createFromAsset(getContext().getAssets(), "fonts/fontawesome.otf");
            super.setTypeface(tf, style);
        }
    }

We are done, let's test our custom EditText after the font modification. Good thing is that you don't need to change it for every view. You just change at one place and applicable for every view where you want the custom view.

Add function to save the content of the Custom Edit Text

In general, when we take the input in the EditText we often required to save the content of the EditText, so that we can refer it later. So we are creating a custom method inside our custom EditText save the content of the EditText to a preference which can be referred from anywhere of your code and for saving the content to preference you have just use the editText.save(). Let's create the save method of the custom EditText.

public void Save(){
       if(this.getTextSize()>0) {
           if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
               String text= Objects.requireNonNull(this.getText()).toString();
               preferences=getContext().getSharedPreferences("CustomEditTextPreference",Context.MODE_PRIVATE);
               preferences.edit().putString("text",text).apply();
           }
       }
    }

and we can use this function like other function as given below.

 val editText:CustomEditText=findViewById(R.id.custom_edit_Text)
    
        val btn_save: Button =findViewById(R.id.btn_save)
        btn_save.setOnClickListener{
            editText.Save()
        }

You notice we just call the editText.Save() method and content of the Edit Text has saved to our preference. You can do lots of other thing inside your custom EditText by adding the custom method and overriding the existing method.

NPLIX

Search This Blog