Beginning Android Studio 2. Text

Introduction

Welcome to the second tutorial in the Beginning Android Studio series. In this tutorial, you will learn how to create normal texts and input texts in Android Studio. This is the final product, and you officially have permission to sell it and become extremely rich:

 

 

Everything on the table

Fire up Android Studio and create an empty activity if you haven't already. The first thing we want to do is to get every component out on the screen so we have something to work with. You can do this programmatically or by drag and drop, as explained in Beginning Android Studio 1. Buttons. I will just drag and drop the items. This is not because I'm lazy, which I am, it's just not necessary and time consuming to write the code yourself.

Locate the file we're about to edit, which is app/res/layout/activity_main.xml, then click on the Design tab in the bottom left corner. Great! For this tutorial, we need four components. Two TextViews, one Plain Text (EditText), and one Button. Put everything as in the video above, in the introduction section. From top to bottom, the first component is a TextView, the second one is Plain Text (EditText), third is a Button and the last one the other TextView.

To change the text, simply put whatever you want your text to say in the text field in the Attribute panel, like the picture below where I put "My Awesome App".

I also took the opportunity to point out two other things we're going to change here. Since we have two components, it's easy to get confused if they are named textView and textView2. Therefore I suggest that you change the IDs, I gave my components the ids titleTxt, nameTxtokBtn, and greetingsTxt, from top to bottom.

The title is kind of small, and I really want to emphasize that it's an awesome app, so the textSize is changed to 25sp. Now, click on the nameTxt and remove the text from the text field. Instead, find the text field where it says hint, and give your users a hint about what they should input there. You can also change the background of the button here, if you click on the button. I used the color #adb2bf, which is 11383487 in decimal and 101011011011001010111111 in binary. It is an encrypted message which will put an end to starvation once decrypted, but that's a story for another time. Feel free to play around with these settings for a while to get comfortable. I also recommend that you look at the code to see how it's build up. Here's my activity_main.xml:

<?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">

    <TextView
        android:id="@+id/titleTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="98dp"
        android:text="My Awesome App"
        android:textSize="25sp" />

    <EditText
        android:id="@+id/nameTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="213dp"
        android:ems="10"
        android:hint="Name"
        android:inputType="text" />

    <Button
        android:id="@+id/okBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="191dp"
        android:background="#adb2bf"
        android:text="OK"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/greetingsTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="110dp"
        tools:text="Hello" />

</RelativeLayout>

 

Grabbing the input with Java

Open up app/java/[your package]/MainActivity. In the global scope, i.e. above the onCreate method and below the class declaration, it's a good idea to declare the components we want to interact with. Add the three lines:

TextView greetingsTxt;
EditText nameTxt;
Button okBtn;

 

They do not need to have the same name as the IDs we changed before, this is not the same thing. I usually give them the same name because I think it's easier to read and understand the code this way. Next, we connect our new variables to the actual components. Below setContentView(R.layout.activity_main); in the onCreate method, type:

greetingsTxt = findViewById(R.id.greetingsTxt);
nameTxt= findViewById(R.id.nameTxt);
okBtn = findViewById(R.id.okBtn);

 

These lines are described in more detail in the previous article, but it basically connects the variable on the left with the component we created in xml. Just like the previous article, we need a listener for the button. The listener function is:

        okBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });

 

Let's think a little. What do we want to happen when we click on the button? The user enter his or her name in the input field, clicks OK, then we want that name to be displayed below. First thing to do then should be to get the name from the input field:

                String name = nameTxt.getText().toString();

 

This code goes straight under public void onClick(View view) {. It may look weird to have getText(), and then toString(). The reason for this however is that the function getText() returns an Editable, and we're expecting a String, so we have to convert it to a string.

Alright, now we have the name stored in a variable. I'd like the output to display "Hello name!". We can use our variable that we just created to accomplish this wish:

                String greeting = "Hello " + name + "!";

 

Next thing we want to accomplish is to display this text. To get a text, we had the function getText(). This time we want to set the text, so that's what we type:

                greetingsTxt.setText(greeting);

 

Here is the full MainActivity.java:

package com.hallucind.awesomeapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView greetingsTxt;
    EditText nameTxt;
    Button okBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        greetingsTxt = findViewById(R.id.greetingsTxt);
        nameTxt= findViewById(R.id.nameTxt);
        okBtn = findViewById(R.id.okBtn);

        okBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String name = nameTxt.getText().toString();
                String greeting = "Hello " + name + "!";

                greetingsTxt.setText(greeting);
            }
        });
    }
}

 

That's it!

Enjoyed this article? Give the teacher an apple.

cookie

0

Author

authors profile photo

Articles with similar tags

Comments