Adding text input
In the previous section we added a button that will be our send button.
Now that we have a send button, we need to add a way for a user to type out a chat message.
If you are skipping to this section
If you are skipping to this section you can download the code for the button section from the following link
https://github.com/Purdue-ACM-SIGAPP/fall16-tutorials/
If you are familiar with Git, clone this repository, if not, there is a download button in the top corner of the window.
The code for the button section of this tutorial is in the 0927Button folder.
Text Input in Android
In android the view that handles accepting text input is called an EditText. We will be adding an EditText to the XML file res/layout/activity_main.xml in a similar way to how we added the Button in the previous section.
XML
Open res/layout/activity_main.xml in Android Studio.
Just like how we dragged in a Button in the previous section, we will be dragging in an EditText. Specifically a "Plain Text" EditText. Find the Plain Text entry in the sidebar and drag it next to your button.
Make the button and EditText fill the bottom of the screen as shown.
Using the text tab, take a look at the XML for the EditText you just inserted.
Because we used the drag and drop features of the Layout Designer, your XML may not look exactly the same as what is shown here. This is okay. However feel free to make yours match if you wish.
Note: Sometimes you need to have more control over how a layout is organized. The drag and drop feature may not give you the level of control that you want to have. You can have this control by editing the XML file directly. We will be selectively editing the XML directly in this tutorial.
android:id
We need a way to access this new EditText in Android. Because we want to get text from this view element rather than just receiving clicks, we need to access it in a different way.
Just like you can use id tags in HTML to apply CSS to an element, we will be using an android:id attribute to access the EditText from our Java code.
Look closely at the XML that was created for your EditText. Make sure that there is an android:id attribute on this EditText. If there is no id then add one. For example:
Notice the ID attribute three lines from the bottom. (The order of these attributes does not matter.)
For the sake of making this tutorial easier to follow, I recommend naming the ID the same as above, editText.
Note about best practices: In Android, the IDs of elements can get very confusing. It is recommended that IDs be descriptive of the element they are representing. I am using a basic ID in this tutorial, but a better ID in this case could be mainactivity_edittext_messageentry.
Java
Before we can interact with our EditText we need to find it. Literally.
- We need to create a field for the EditText to store it
- We need to "find" it.
Creating a variable for the EditText
Create the following variable in your MainActivity.
Just like we did with the interface, you can press [alt]+[enter] to automatically import EditText. Do that now.
Finding the EditText
We now need to find the editText. Android activities have a method that will search the current view for a View based on its ID.
We want to do this before the EditText is displayed to the user. Android's onCreate(Bundle) method is called automatically for us before the screen is shown to the user, so we will be adding code to that method.
Add the following to your onCreate(Bundle).
Lets take a closer look at this line. Notice that the we are using the ID that we assigned to our EditText, but we are accessing that using R.id.editText. The R class is automatically created by Android to store all of the IDs, layouts, strings, and other things that you store in your res/ folder. It works just like any other Java class, but it is created automatically for you.
We give findViewById(...)the ID in the form of R.id.editText and it returns to us a View that has that ID. We know that the view in question is an EditText (because we assigned that ID), so we can cast it to an EditText and store it in the variable we created.
Doing something with the user's input
Now that we have an EditText, we want to be able to grab data from it and display that on the screen. Let's do that now.
EditText has a method called getText() that we will use to get the text that the user has typed.
But we need a place to display this data. For now let's use a TextView. Conveniently, the default template that we used to create our MainActivity includes a TextView already.
Let's take a look at that TextView now.
Open activity_main.xml and go to the design tab.
Drag the TextView so that it fills the entire top of the activity as shown.
Just like how we did with the EditText, we need to make sure this TextView has an ID so we can access it from Java.
Check for an ID by opening the text tab and looking for an android:id attribute. If there is no ID, add one as shown.
Make note of this ID, we will be using it again in a moment.
Java
Go back to MainActivity.java. We will be adding the same member and findViewById() lines that we did for the EditText, but now for the TextView.
Do that now, the result should be this.
Pulling it together
We have now created an EditText to take user input, and modified a TextView for displaying the user's input. But now let's pull it all together.
Add the following to your onClick(View).
When the button is pressed, the text that the user has inputted will be appended as a new line in the TextView, then the EditText will be cleared.
Running the app.
Now our app is finally starting to function like a chat app. Let's take a look at what we have completed.
Run your app by plugging in your device, or starting your emulator, then pressing the play button at the top of Android Studio. For information on preparing your phone or enabling developer mode please refer to the start of this tutorial.
Your app at this point should look like this:
Congratulations
You have now learned how to interact with View elements, and how to take user input in the form of text.
If you have had any issues with this section of the tutorial, the code is available for reference here:
https://github.com/Purdue-ACM-SIGAPP/fall16-tutorials/tree/master/0929EditText