Building a To Do List Android Mobile App – Part 1

In this tutorial you will develop a simple to-do-list native app for android. You will learn the following:

  • Setup development environment using Android Studio for android.
  • Preview your android app using actual device (smart phone).
  • Develop android app using Java programming language.
  • Create activities for android app.
  • Connect android app with API.

Download the required software packages

Download and install Android Studio and Android SDK.

Android Studio + SDK – http://developer.android.com/sdk/index.html

Setting up your development environment

Open your Android Studio and choose Start a new Android Studio project.

Start a new Android Studio project

Start a new Android Studio project

Enter your custom Application name, Company Domain and select Project location. Click Next.

Configure your new project.

Configure your new project.

Select Phone and Tablet. Make sure API 15 selected. Click Next.

Configure your new project.

Configure your new project.

Select Empty Activity and click Next.

Add an activity to Mobile.

Add an activity to Mobile.

Click Finish.

Customize the activity.

Customize the activity.

Your app must request the INTERNET and ACCESS_NETWORK_STATE permissions, if it isn’t doing so already. Add the following lines inside the tag in yourAndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Create a new blank activity. Right click on my.intellij.androidtodolist package > New > Activity > Blank Activity.

Create a new blank activity.

Create a new blank activity.

Name Activity Name as ListActivity and leave it others default value. Click Finish.

Customize the activity.

Customize the activity.

Do it twice for two new blank activities.

Customize the activity.

Customize the activity.

 

Customize the activity.

Customize the activity.

Open activity_list.xml in app > layout > activity_list.xml. Update activity_list.xml with this one.

<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" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="my.intellij.androidtodolist.ListActivity">

    <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Create Task" android:id="@+id/btnCreate" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" />

    <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Detail Task" android:id="@+id/btnUpdate" android:layout_below="@+id/btnCreate" android:layout_centerHorizontal="true" />
    <ListView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/lv_task" android:layout_below="@+id/btnUpdate" android:layout_centerHorizontal="true" />
</RelativeLayout>
activity_list layout design.

activity_list layout design.

Create a new Layout XML file. Right click on app/res/layout  New > XML > Layout XML File. Name it as list_item and click Finish.

Create a new Layout XML File.

Create a new Layout XML File.

Update with this code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5sp"
        android:textSize="25sp" />

</LinearLayout>

Open activity_create.xml in app > layout >activity_create.xml. Update activity_create.xml with this one.

<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" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="my.intellij.androidtodolist.CreateActivity">

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/txtName" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:hint="Name"/>

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/txtDescription" android:layout_below="@+id/txtName" android:layout_centerHorizontal="true" android:hint="Description"/>

    <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Create Task" android:id="@+id/btnCreate" android:layout_below="@+id/txtDescription" android:layout_centerHorizontal="true" />

    <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Back" android:id="@+id/btnBack" android:layout_below="@+id/btnCreate" android:layout_centerHorizontal="true" />
</RelativeLayout>
activity_create layout design.

activity_create layout design.

Open activity_update.xml in app > layout >activity_update.xml. Update activity_update.xml with this one.

<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" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="my.intellij.androidtodolist.UpdateActivity">

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/txtName" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:hint="Name"/>

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/txtDescription" android:layout_below="@+id/txtName" android:layout_centerHorizontal="true" android:hint="Description"/>

    <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Update Task" android:id="@+id/btnUpdate" android:layout_below="@+id/txtDescription" android:layout_centerHorizontal="true" />

    <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Back" android:id="@+id/btnBack" android:layout_below="@+id/btnUpdate" android:layout_centerHorizontal="true" />
</RelativeLayout>
activity_update layout design.

activity_update layout design.

Delete MainActivity and activity_main.xml.

Go your AndroidManifest.xml, replace .MainActivity with .ListActivity.

<activity
            android:name=".ListActivity"

Update these three classes (ListActivity, CreateActivity and UpdateActivity).

ListActivity

package my.intellij.androidtodolist;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;

public class ListActivity extends ActionBarActivity {

    private Button btnCreate;
    private Button btnUpdate;

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

        btnCreate = (Button) findViewById(R.id.btnCreate);
        btnCreate.setOnClickListener(new View.OnClickListener() {

            public void onClick(View arg0) {

                Intent createActivity = new Intent(getApplicationContext(), CreateActivity.class);
                startActivity(createActivity);

            }
        });

        btnUpdate = (Button) findViewById(R.id.btnUpdate);
        btnUpdate.setOnClickListener(new View.OnClickListener() {

            public void onClick(View arg0) {

                Intent updateActivity = new Intent(getApplicationContext(), UpdateActivity.class);
                startActivity(updateActivity);

            }
        });
    }
}

CreateActivity

package my.intellij.androidtodolist;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;


public class CreateActivity extends ActionBarActivity {

    private Button btnBack;

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

        btnBack = (Button) findViewById(R.id.btnBack);
        btnBack.setOnClickListener(new View.OnClickListener() {

            public void onClick(View arg0) {

                Intent listActivity = new Intent(getApplicationContext(), ListActivity.class);
                startActivity(listActivity);

            }
        });
    }

}

UpdateActivity

package my.intellij.androidtodolist;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;


public class UpdateActivity extends ActionBarActivity {

    private Button btnBack;

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

        btnBack = (Button) findViewById(R.id.btnBack);
        btnBack.setOnClickListener(new View.OnClickListener() {

            public void onClick(View arg0) {

                Intent listActivity = new Intent(getApplicationContext(), ListActivity.class);
                startActivity(listActivity);

            }
        });

    }

}

Next tutorial, part 2 here (http://intellij.my/2016/08/16/building-a-to-do-list-android-mobile-app-part-2/).

One thought on “Building a To Do List Android Mobile App – Part 1

Leave a Reply

Your email address will not be published. Required fields are marked *