EditText and Buttons in Android Java

Guest Posts mesutyasar

In this tutorial, we will try to enrich the default project. Normally it contains just a textview and it says “Hello World!”.

Let’s define an objective here. The objective must be an easy one for the sake of the tutorial, because what we want to learn here is, how to create and use buttons in Android. So, we will try to add a text field and a button. Then we will enter something into the text field, and then if everything works out, when we click the button, it will show the text on the textview (the one that was there when we started the project).

If you don’t know how to start an Android project on Eclipse, we have a short article to teach you just that: http://www.caveofprogramming.com/frontpage/articles/android-java-nunal/starting-your-first-android-app/

I named my main activity “ButtonActivity”. It automatically created an XML file called activity_button.xml for me. This xml file is important, because what the user will see is defined here. You might realize that when you open that xml file in Eclipse, it has two tabs: Graphical Layout and the xml file. Now, adding stuff just through the Graphical Layout might sound easy and fun, but in the future, when you want to develop something more complicated, you will realize that is not the case. So, let’s examine the xml and try to add a text. Here is the important part for us:

 <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" /> 

Notice how everything related to the TextView is between the ‘<‘ and ‘>’ symbols. android:id and other properties are created automatically. What we have as the value of android:id is written into R.java (which can be found in gen folder of your project - DO NOT modify this file ever) automatically. What we have as the value of android:text is also written in R.java but if we want to modify this, we would go to our strings.xml (which can be found in /res/values folder).

So, let's try to add a text field and a button. Go to graphical layout of our xml file, activity_button.xml and add them by dragging them into the graphical interface shown on the right side. I added them and that's what I got:

 <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="17dp"
        android:ems="10" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText1"
        android:layout_below="@+id/editText1"
        android:layout_marginTop="23dp"
        android:text="Button" /> 

You can experience with these XML codes. Eclipse provides an excellent autocomplete function which makes our jobs easier. You can type some part of the keyword and press Control + Space and it will show you the available choices.

Now our text field (Android calls them EditText) needs something else. Maybe a hint to the user about the text field? Let's add this: android:hint="@string/editText1". Also, there seems to be something wrong with our Button. android:text="Button" line must be something else. Something similar to what we did with android:hint on our EditText. android:text="@string/Button".

What we did here is called externalization. Although we could use it like this, it would cause problems in the future. For example, it would be very hard to translate our application into the other languages, because these values are 'hardcoded'. Now, we need to add editText1 and Button values to strings.xml (like we learnt before, this file is in /res/values folder). You can open the file and add these lines:

     <string name="editText1">Your text here</string>
    <string name="Button">Press This!</string> 

Now we can call them and change them from our Java code if we want.

I won't be talking about layout properties of our widgets here (Android calls these buttons and text fields widgets). This is a much more complex topic for us now and we will discuss it later and talk about which would be better to use. But like I said, you can experience with them by utilizing Eclipse's autocomplete function.

Until this moment, we only created a user interface which does absolutely nothing. In Android, user interface is done using XML and what makes this UI work is Java, actually a little modified version of Java. If you don't know anything about Java, you can watch free Java tutorial. It will get you ready for some Android.

Now, this is my code to utilize our button and our text field and text view.

    public void setText(){
        Button myButton = (Button)findViewById(R.id.button1);
        final TextView myText = (TextView)findViewById(R.id.textView1);
        final EditText myInput = (EditText)findViewById(R.id.editText1);
        myButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View arg0) {
                myText.setText(myInput.getText());    
            }
        });      
    } 

Notice how we had to cast findViewById() method output to define every widget we had. That is because what findViewById returns is a View. Android can't know if it is a button or a textview. But as the developer of the application, we know what it is and we tell to Android by casting it.

If we didn't define TextView and EditText in our Java code, they would still appear on the application but we wouldn't have any means to use them. Same thing goes for Button too. But with the button, we also had to tell Android what we want to happen when user clicks on the button. This is done by listeners. When we type myButton.setOnClickListener(), we are setting a listener to the button. We could write the listener as a different class, then type myButton.setOnClickListener(listenerClassInstance);.

Listener types are another big topic as well and they are not just for buttons. We could also set a listener to our EditText or TextView. If you want to know more about listeners and how you can setup them, you can try our free Java tutorials.

We learnt that we can easily add widgets to our application by just dragging them into the user interface. But in some cases where you don't want to use Android's default layout choice (which is RelativeLayout in our example), what you see in Eclipse and what the user will see in his phone might be very different. That is why we need to experience with the xml code as well. As we are moving with Android development, we will develop an understanding of XML as well and this process can be smoother if we try to do different things with the code and use Eclipse's autocomplete function while exploring our choices.

If you want to know what we can do with XML, just delete android:ems="10" line from our EditText (Or modify the value 10) and see what happens. Although we haven't covered layouts yet, you can also try to change android:layoutwidth="wrapcontent" and android:layoutheight="wrapcontent" lines to see the results.