Today, we’re gonna make a simple Todo app for Android using Android Studio 3. At first, this app only allows the user to add
Check out my full video here: (just be aware that my Englist is bad)
Create the App Layout
The first thing we need to do is lay out our application, thanks to Android studio, this hasn’t been that easy before. I suppose that all of you know how to set up an Android Studio project.
We’ll need these three main components:
- EditText: where user types in a task they want to do
- Button: where the user taps to add the task into the list
- Listview: where list all the tasks of user’s
Should give every component a meaning id so that you can easily recall it while doing the Java code.
With button, don’t forget to give a value to onClick attribute, this value will be the name of the function you will define later on to be trigger when the button is hit.
You can take my layout by copying the XML code below and replace your activity_main.xml code with it. You can see the XML screen by clicking the XML tab in the bottom.
<?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"
android:baselineAligned="false"
android:orientation="vertical"
tools:context=".MainActivity">
<EditText
android:id="@+id/inputText"
android:layout_width="369dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:layout_marginTop="13dp"
android:ems="10"
android:hint="@string/placeholder"
android:inputType="textPersonName" />
<Button
android:id="@+id/addButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="57dp"
android:onClick="onClickAdd"
android:text="@string/buttonText" />
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="0dp"
android:layout_marginTop="107dp" />
</RelativeLayout>
Note that in my activity_main.xml I have 2 string variable for button android:text="@string/buttonText"android:hint="@string/placeholder"
I also assigned the onClick attribute of the button with a function name “onClickAdd” you can name it whatever you want, and you will use it later in your code. android:onClick="onClickAdd"
<resources>
<string name="app_name">TodoAppJava</string>
<string name="buttonText">Add</string>
<string name="placeholder">type here..</string>
</resources>
Start to code
Now, we go to the file MainActivity.java or whatever your main java file for the main screen is. I will show you the code first
package com.samderlust.todoappjava;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
Button button;
EditText inputText;
ListView listView;
ArrayList<String> list;
public void onClickAdd(View v){
String text = inputText.getText().toString();
list.add(text);
ArrayAdapter adapter = new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,list);
listView.setAdapter(adapter);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button= findViewById(R.id.addButton);
inputText=findViewById(R.id.inputText);
listView=findViewById(R.id.listView);
list = new ArrayList<>();
}
}
1. Import things:
We need to import the API and components that we need to use for making the application
2. Declare Component
- Button button;
- EditText inputText;
- ListView listView;
- ArrayList<String> list;
We declare the components in the top of the class since we want to use them in many functions inside the class. As you know, if we declared it inside a function, it couldn’t be accessed from other function. You will be more clear about this when we go on.
3. onCreate Function
This function is auto-generated with the java file, this function will be call at first when the application runs. It’s similar to the main function in a Java application.
That’s why we define all the component inside this method. Remember when we made the layout, we give each component an Id, this is the time we need it. The function findViewById allows you to assign the layout component to a Java variable. It takes one parameter, which is the Id of the component and we provide the Id follow R.id
- button= findViewById(R.id.addButton);
- inputText=findViewById(R.id.inputText);
- listView=findViewById(R.id.listView);
We use the arraylist list = new ArrayList<>(); to stored all the task that user add to the list. Later on, we will render all elements inside this arraylist to the ListView layout component and that’s how all the items will be display on the screen.
4. onClickAdd function
When we created a button, we give set the attribute onClick = onClickAdd, and we have to define this function so it will be trigger every time the button is tapped.
When user input something, this function will add it to the list, therefore we need to access some layout components inside this function.
- String text = inputText.getText().toString(): We create a new variable to hold the text of the inputText field.
- list.add(text); we add the text to the arraylist.
- ArrayAdapter adapter = new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,list); we need the ArrayAdapter to make data in an
arraylist could be sync to the ListView component. The constructor function of ArrayAdapter takes 3 arguments: the context of the class (this),2nd argument defines the layout of the list, the last argument is the data itself. - listView.setAdapter(adapter): Tell the ListView component to take the data from the array adapter and show it to the screen.
So far, we can run the application we there is an issue we need to fix.
After adding an item, users need to delete the text in the input field to make new items. we solve it by setting the text of the field to be empty at the end of the function. inputText.setText("");
A user can add an empty item: we solve this by using an if statement to check the value of the input field. If it’s not empty we will allow the function to work as normal. If it’s not, just do nothing.
So, the refactored onClickAdd function will look as below:
public void onClickAdd(View v){
String text = inputText.getText().toString();
if(!text.equals("")){
list.add(text);
ArrayAdapter adapter = new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,list);
listView.setAdapter(adapter);
inputText.setText("");
}
}
