EditText UI Element - UI Elements - Android Development - Chapter 1.1

Creating EditText element for Android Development

After going through online tutorials, few books, question/ answer portals, mega tutorial websites, I have decided to create a site of my own for sharing my little bit of Android Knowledge. 

This is exactly how I learn. There are lots of formal tutorials online. I have collected books as well. And sadly found mostly replicating what's written on Google Documentation. It takes years of hard work to get things rolling if you follow the traditional trajectory.

Learning Android is important for me to cater the last minute needs of my clients. Hiring / dependency on someone else does not really turn out conducive.  

I believe you know how to fire AndroidStudio. If not, get it fired following this AndroidStudio for Beginners Tutorial after downloading Android Studio.

I assume, you have idea on Android File Structure. If not, get a look at this page.

Now, here we go. In my first chapter, I will put a SIMPLE EditText field on my First Hello World App.

Whatever be the version of your android Studio, simply follow the step-by-step guides to create a Hello World Project. 

Now open the content_main.xml file

Type the following few lines.

<EditText

        android:id="@+id/simpleEditText"

        android:layout_height="wrap_content"

        android:layout_width="match_parent"/>

It adds an element like input box in Android App.

Now we will add a label to this TextBox

<EditText

    android:id="@+id/simpleEditText"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Enter Name"

    android:gravity="left"/>

<!--gravity of edit text-->

Here, id uniquely identifies the element

layout_width & layout_height fix the width and height of the element

text is used to display the text message (Placeholder / label)

gravity aligns the text - left / right / justify / center 

Lets' get the code to Add a Text Field and a button. When we click the button, the text typed on EditText will appear via toast.

content_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/simpleEditText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#F2F2F2"
        android:hint="Enter Your Name Here"
        android:padding="15dp"
        android:textColorHint="#000"
        android:textStyle="bold|italic"
        android:layout_marginTop="100dp" />

    <Button
        android:id="@+id/displayText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#000"
        android:padding="10dp"
        android:text="Display Text"
        android:textColor="#0f0"
        android:textStyle="bold" />


</RelativeLayout>

This is what you will write in MainActivity.java file

package example.abhiandriod.edittextexample;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final EditText simpleEditText = (EditText) findViewById(R.id.simpleEditText);//get the id for edit text
        Button displayText = (Button) findViewById(R.id.displayText);//get the id for button
        displayText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (simpleEditText.getText().toString() != null)//check whether the entered text is not null
                {
                    Toast.makeText(getApplicationContext(), simpleEditText.getText().toString(), Toast.LENGTH_LONG).show();//display the text that you entered in edit text
                }
            }
        });
    }


}

Now, press the Green Triangular Run App button. You will see the Input Field at top of your App. Read this Beginners Tutorial on Android to learn each and every steps in details. That's really extremely useful and helped me gain some confidence to move on with further development works.