What Will I Learn?
- The user will learn how to write a basic app and run it on an Android Phone.
- The user will learn how to create buttons and texts.
- The user will learn how to add an OnClickListener to a button.
Requirements
- A computer System is required for this tutorial.
- Java Software Development Kit(JDK) must be installed on your computer.
- Android Studio
Get JDK here
Get Android Studio here
Difficulty
Intermediate.
Tutorial Contents
This is the first tutorial on Android App Development and so we will look at how to create a Button, a TextView and an EditText widget.
Buttons
A button in general programming is a class which refers to a clickable component. In Android and most programming languages, buttons exist in various types.
Different types of Buttons include:
- Push Button
- Radio Button
- Sticky Buttons
This tutorial will concern itself with Push Buttons.
Buttons can perform functions and can also perform no action.
Buttons when created can be associated with Listeners. Listeners make it possible for buttons to perform an action when clicked or when pressed.
In Android, the Listener interface associated with the click of a button is called an OnClick Listener and this has a method “OnClick” which must always be implemented.
TextView
TextView provides the user with the opportunity to view text. This text can also be edited. A programmer may choose to make text in a TextView editable or un-editable.
TextView can also serve as a text editor, e.g Notepad. The basic job of TextView is to display readable text on the screen.
EditText
EditText is an extension of TextView. This provides the user with the means to provide input to the program. EditText also allows the user to enter input in different text styles and fonts.
The primary job of EditText is to allow the user to enter input through keypad.
In this tutorial we will create these three components prompting the user to enter a name. When the user enters a name, the user clicks a button and a message is returned confirming the user’s actions.
This tutorial is done in assumption that the user followed previous Java programming tutorials and has general knowledge of programming terms.
When a new project is started, the project is devided into two sections; activity_main and MainActivity.
activity_main
This section contains two areas; The Text Area and the Design Area.
Text
Text area is the code section. Adjustments can be made to the codes of the widgets to suite the programmers needs.
Text Area
Design
Design area contains all the GUI widgets in a palette and can be dragged on to an Activity.
Design Area
MainActivity
This section contains the main codes required to run the program.
CODE BLOCK
activity_main Text
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.example.ugonnaagharanya.firstapp.MainActivity">
<Button
android:id="@+id/button"
android:background="@color/colorPrimaryDark"
android:textColor="@android:color/white"
android:textStyle="bold"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/click_me" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/holo_red_dark"
android:layout_alignParentTop="true"
android:textSize="40sp"
android:layout_alignStart="@+id/button"
android:layout_marginStart="1dp"
android:layout_marginTop="28dp"
android:text="@string/enter_name" />
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:ems="15"
android:inputType="textPersonName"
android:text=""
tools:ignore="LabelFor" />
</RelativeLayout>
MainActivity
package com.example.ugonnaagharanya.firstapp;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
Button bt1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bt1 = (Button) findViewById(R.id.button);
bt1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(), "You Have Entered your name!", Toast.LENGTH_LONG).show();
}
});
}
}
Output
activity_main Text
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.example.ugonnaagharanya.firstapp.MainActivity">
The above code is generated by default in the activity_main. They represent the Extensible Markup Language(XML) tags and codes used for layout desing. XML makes an android program consume less space.
<Button
android:id="@+id/button"
android:background="@color/colorPrimaryDark"
android:textColor="@android:color/white"
android:textStyle="bold"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/click_me" />
When a widget is selected on the design panel, the default codes for it is generated, however, the programmer can edit these codes to suite his purposes.
When a button is selected, a number of components is set by default. If a button is selected and dragged to the center of the activity, the layout_centerHorizontal and layout_centerVertical becomes true.
We can also set some button attributes such as background, textColor and textStyle to suit the programmers specifications. Android has inbuilt codes for initiating these colors and text styles.
Every construct has an id. This id is basically for identification when the construct is being referred to in the MainActivity.
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/holo_red_dark"
android:layout_alignParentTop="true"
android:textSize="40sp"
android:layout_alignStart="@+id/button"
android:layout_marginStart="1dp"
android:layout_marginTop="28dp"
android:text="@string/enter_name" />
The same applies to TextView, when selected, some components and attributes are set by default, but the programmer may choose to adjust textSize and textColor to suit his needs.
layout_marginStart and layout_marginTop describes the distance between the component above and the component itself. In this case the distance is set to 28dp.
As of button, TextView also needs an id for identification purposes.
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:ems="15"
android:inputType="textPersonName"
android:text=""
tools:ignore="LabelFor" />
As with the above two constructs the same attributes are set by default, but the programmer may change as the programmer wishes.
The layout = “wrap content”. This means that the space in the EditText only goes as far as the text goes. This applies for both layout_centerVertical and layout_centerHorizontal.
MainActivity
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
Import statements containing widgets classes.Objects of these classes will be created in the program.
public class MainActivity extends AppCompatActivity {
Button bt1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MainActivity Class
An activity provides a template where the programmer can write codes and implement codes written in the activity_main.
It also allows programmers to import classes and GUI components.
onCreate Method
The onCreate method is called when Activity class is created.
setContentView
The setContentView(R.layout.activity_main) this method provides information about the layout resource.
bt1 = (Button) findViewById(R.id.button);
bt1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(), "You Have Entered your name!", Toast.LENGTH_LONG).show();
}
});
}
}
The button object named “bt1” is created. The findViewById method is used to refer to it in activity_main.
An OnClickListener is the listener interface associated with Buttons in Android. The onClick method is the method which has to be implemented when a button is clicked. TheToast.makeText ``` method is responsible for displaying messages to the screen. You can display the toast notification by calling show() method.
When the button is clicked, the method is called and the text it contains is displayed on the bottom of the screen.
To test the program, you need an android device and a USB cable or you may have an android emulator installed on your computer.
This tutorial uses an Android device connected to the computer via a USB cable.
When the program is run, the user is prompted to input a name, when this is done and the user hits the Done button, the name entered is returned in a message at the bottom of the screen.
Source Codes from GitHub Account.
You can get the codes at my GitHub Account if you want to try it on your own.
REFERENCES
Curriculum
This is the first contribution on Android Development but previous contributions on Java are: