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 Theme Creation, Programmatic Way

Flutter and Dart is an excellent combination for creating the mobile app with material design with nice GUI. Its lots of widget which help the developer for creating the app UI very fast with respect to the other language. You may face some problem in starting due to comm, curly brace and semicolon but after some time you will find the way how to work with these all stuff and it becomes very easy for you. But in this article, we are not going to discuss all these. In this article, we will handle a very interesting topic on how to create a custom theme or multiple themes and let's user decide which theme to use.



Create a flutter project



So let's create a flutter project by selecting the appropriate option from the File menu in android studio or Visual Code. If you are new to Flutter and Dart you can check out our recent post to get started Creating Cross-platform app using flutter.



Once your project is created you will get the default counter app and you try running the app in the…

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 sync completed.
Update the project build config …

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
There is s…