Skip to main content

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

  1. Create the assets folder

    Right click on src/main and go to new -> folder>Assets FolderCreate Assets folder

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

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

  4. 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.Override TypeFace Method

  5. Select the setTypeface from the List and modify it to use the new font

    setTypeface





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


Comments

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit. What is Retrofit? If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps. Further, you can check the Retrofit Library here . So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website. Prerequisite for using the Retrofit for WordPress Android App Ther

How to Read and Write JSON data in Kotlin with GSON

Kotlin is now official language for Android development and it is well supported in Android Studio. So here in this tutorial, we are going to learn about how to read and write JSON data in Kotlin using GSON. If you would like to learn the java version of this tutorial check out the last tutorial " How to Read and Write JSON data using GSON ". Introduction In this tutorial, we will write two methods. In the first method, we will create a JSON file and in second method we will read the file and print in a text box.  If you like to know more about the basic entity of JSON you can check out Basic JSON entity here . What is JSON? JSON stands for J ava S cript O bject N otation JSON is a lightweight data-interchange format It is "self-describing" and easy to understand JSON is language independent and can we used in any language JSON Syntax Rules Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold