Android Tutorials- Part 2.3.0-EditText.

Welcome back to my ongoing blog series on the Basics of Android development. Today we will be discussing the EditText widget.

Task 1: Create and explore a new project

Open the Android Studio and, on the splash screen, click on Start a new Android Studio project. After clicking on it, the IDE will ask you to choose your project. Make sure you are on the Phone and Tablet tab, click on the Empty Activity option, then click on Next.

After clicking on this button, the IDE will show you a form that you can fill in as follows:

• Name: “EditText Demo”
• Package name: com.nerdytech.edittextdemo
• Save location: Use the default value or adjust to your needs.
• Language: “Java”
• Minimum API level: “API 22: Android 5.1 (Lollipop)”

From the properties above, there are two items that you can change: name and save location. Apart from that, you can also change the package name, but be aware that this tutorial uses this value multiple times (so, you will have to replace them a lot too). The other two properties, language, and minimum API level, must remain untouched. So, leave them like that and click on the Finish button.

Task 2: Change Constraint layout to Relative Layout

I tend to use Relative Layout over Constraint Layout because it makes the design universal. The constraint layout design is not universal for all phones. I will soon add a detailed blog on the Relative Layout and its uses.

Let’s go to the XML editor page. Select the tag below and delete it:

androidx.constraintlayout.widget.ConstraintLayout

Now Type RelativeLayout in place of the removed text so that your XML code will be similar to this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</RelativeLayout>

Here is a video for you to follow along

Task 3: Add view Elements in layout

3.1 Add EditTexts

We will now create a form type UI that will take input from the user their email, username, and password.

We will first create one edit text and then copy-paste it two more times and replace the identifying and value types attributes of it.

In your relative layout delete the default TextView tag and add EditText tag.

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

now let’s add other defining attributes.

android:padding="5dp"
android:hint="Email"
android:inputType="textEmailAddress"
android:id="@+id/emailEditText"
android:textColorHint="#6E6E6E"
android:layout_marginTop="5dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"

• android:padding=”5dp” will leave a space of 5dp from each side so that text will have equal negative space inside the EditText.
• android:hint=”Email” will act as a place holder text.
• android:id=”@+id/emailEditText will be used to identify this particular EditText while extracting data from it.
• android:textColorHint="#6E6E6E" it will give the place holder text color of dark grey complexion.
• android:layout_marginTop="5dp", android:layout_marginStart="5dp",
android:layout_marginEnd="5dp" will leave some negative space from the parent layout so that the EditText will be inside the boundary of the Parent RelativeLatout.

Now the EditText tag should look like this:

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:hint="Email"
    android:inputType="textEmailAddress"
    android:id="@+id/emailEditText"
    android:textColorHint="#6E6E6E"
    android:layout_marginTop="5dp"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"/>

Now copy-paste this tag two times and edit two attributes id and hint as :

android:hint="Username"
android:id="@+id/usernameEditText"

and

android:hint="password"
android:id="@+id/passwordEditText"

This will create two more unique EditTexts. You may be wondering that the Edit texts are overlapping. Don’t worry we can correct that as well. In RelativeLayout the child elements are by default starts their `marginTop` from the top of its parent Layout. So we just need to change that.

Add this line in usernameEditText

android:layout_below="@+id/emailEditText"

and this line in passwordEditText

android:layout_below="@+id/usernameEditText"

Now the EditTexts won’t be overlapping anymore.

3.2 Add a submit button

We have covered buttons in our previous blog. If you have not read it yet then you can visit here. You can just add this code below the passwordEditText

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:text="Send"
    android:textColor="#fff"
    android:background="@color/colorPrimary"
    android:layout_below="@+id/passwordEditText"
    android:gravity="center"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="10dp"/>

Now your entire XML code should be like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:id="@+id/emailEditText"
        android:textColorHint="#6E6E6E"
        android:layout_marginTop="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:hint="Username"
        android:id="@+id/usernameEditText"
        android:layout_below="@+id/emailEditText"
        android:textColorHint="#6E6E6E"
        android:layout_marginTop="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:hint="password"
        android:inputType="textPassword"
        android:layout_below="@+id/usernameEditText"
        android:id="@+id/passwordEditText"
        android:textColorHint="#6E6E6E"
        android:layout_marginTop="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"/>
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Send"
        android:textColor="#fff"
        android:background="@color/colorPrimary"
        android:layout_below="@+id/passwordEditText"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"/>
</RelativeLayout>

and the UI should look like:

You can follow along with this video if you have faced any problem

Task 4: Improve UI

The UI is not very visually appealing. We can improve that by adding a background resource file for EditText.

Navigate to the drawable folder by following this path app>res>drawable. Right-click on the drawable folder and select New>Drawable Resource File. A new dialog box will open. Add the name of the resource file as edittextbg and leave everything as default. Press OK.

Now a new resource file will open. Delete the sector tag and replace it with the shape tag:

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
</shape>

This will give the background resource file as a rectangular shape.

Add a few extra features like background color, stroke and round corners in your shape tag as:

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dp"
        android:color="@color/colorAccent"/>
    <solid android:color="#eee"/>
    <corners android:radius="10dp"/>
</shape>

Now go back to activity_main.xml file and add these in each of the EditTexts

android:background="@drawable/edittextbg"
android:paddingStart="15dp"

This will improve the UI a lot. The activity_main.xml file should be like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:paddingStart="15dp"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:id="@+id/emailEditText"
        android:textColorHint="#6E6E6E"
        android:background="@drawable/edittextbg"
        android:layout_marginTop="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:hint="Username"
        android:paddingStart="15dp"
        android:id="@+id/usernameEditText"
        android:layout_below="@+id/emailEditText"
        android:textColorHint="#6E6E6E"
        android:background="@drawable/edittextbg"
        android:layout_marginTop="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:hint="password"
        android:paddingStart="15dp"
        android:inputType="textPassword"
        android:layout_below="@+id/usernameEditText"
        android:id="@+id/passwordEditText"
        android:textColorHint="#6E6E6E"
        android:background="@drawable/edittextbg"
        android:layout_marginTop="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Send"
        android:textColor="#fff"
        android:background="@color/colorPrimary"
        android:layout_below="@+id/passwordEditText"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"/>

</RelativeLayout>

and the layout will look like this

Follow this video if you have faced any problems

Task 5: Make the form active.

What we will be doing now is that we will Add details in all the edit text and log the data in logcat when the Send button is clicked.

Navigate to MainActivity.java file app>java>com.nerdytech.buttondemo or in your case app>java>com.example.edittextdemo

Now add the edittext and button widgets as global variables in the MainActivity class.

//Widgets
EditText emailEditText,passwordEditText,usernameEditText;
Button sendBtn;

Press Alt+Enter if there is an error highlighting the Button or EditText.

Now in the onCreate method link the global variable to the resource files that we had created in activity_main.xml. We can do that by calling an inbuilt function View.findViewById(). This function takes in parameters as R.id.id_ofElement. R here refers to the resource-“res” directory. the id contains all the id values that have been created in the project. You need to replace the id_ofElement with a proper id that you have provided while designing the widget element in your XML file.

Add these lines below setContentView(R.layout.activity_main); line in onCreate method.

// Connecting Widgets with its resource emailEditText=findViewById(R.id.emailEditText);
passwordEditText=findViewById(R.id.passwordEditText);
usernameEditText=findViewById(R.id.usernameEditText);
sendBtn=findViewById(R.id.sendBtn);

Now all the Widgets are linked properly with their proper widget elements in the XML file.

Let’s Add OnClickHandlers to buttons

We can do this in two ways. By creating our own method which will be called when the button is pressed or by overriding the setOnClickListner method.

I will override the setOnClickListner method in the onCreate method. after the line `sendBtn=findViewById(R.id.sendBtn);` add this

sendBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        
    }
});

Now let's extract text from edit text and store it inside String variables and add the log commands to print those when the button is pressed.

sendBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String email=emailEditText.getText().toString();
        String username=usernameEditText.getText().toString();
        String password=passwordEditText.getText().toString();
        Log.i("Email",email);
        Log.i("Username",username);
        Log.i("Password",password);
    }
});

Lastly, Check the app output in logcat by running the app in an emulator or your real device. When you press Send Button in logcat three lines will be added similar to this-

2020–04–16 15:40:33.265 7696–7696/com.nerdytech.edittextdemo I/Email: faiz276482@gmail.com
2020–04–16 15:40:33.265 7696–7696/com.nerdytech.edittextdemo I/Username: faiz276482
2020–04–16 15:40:33.265 7696–7696/com.nerdytech.edittextdemo I/Password: 45dfgh

If you have faced any error, please follow along with this video:

What’s next- Android Tutorials- Part 2.4.0-Text View.