ANDROID-contoh aplikasi

 

Membuat Aplikasi ToDo List Sederhana di Android

https://wirasetiawan29.wordpress.com/2016/01/05/membuat-aplikasi-todo-list-sederhana-di-android/

Hai guys, saya sedikit berbagi tentang cara implementasi ListView di Android, implementasi Swipe to Dismiss di Android atau cara membuat aplikasi To Do List di Android menggunakan Android Studio di beberapa hari belakangan ini. Dipostingan ini nantinya dibahas tentang bagaimana membuat aplikasi daftar kegiatan sederhana di Android atau yang biasa disebut dengan ToDo List.

#1. New Project

Baik kita mulai saja, buat Project baru dengan nama ToDoList, dengan cara File>New Project>Congfigure your new project, isikan nama project, dsb lalu finish. Kita akan menemukan layout Hello World untuk layout default new project Android. Didalam project terdapat file/komponen AndroidManifest.xml, dimana akan terlihat seperti berikut:

	<?xml version="1.0" encoding="utf-8"?>
	<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.logbook.wira.todolist" >
	<application
	android:allowBackup="true"
	android:icon="@mipmap/ic_launcher"
	android:label="@string/app_name"
	android:supportsRtl="true"
	android:theme="@style/Theme.AppCompat.Light.NoActionBar" >
	<activity
	android:name=".MainActivity"
	android:label="@string/app_name"
	android:theme="@style/AppTheme.NoActionBar" >
	<intent-filter>
	<action android:name="android.intent.action.MAIN" />
	<category android:name="android.intent.category.LAUNCHER" />
	</intent-filter>
	</activity>
	</application>
	</manifest>

view raw

AndroidManifest.xml

hosted with ❤ by GitHub

Dan juga file MainActivity.java seperti berikut:

	package com.logbook.wira.todolist;
	import android.app.Activity;
	import android.os.Bundle;
	public class MainActivity extends Activity {
	/**
	* Called when the activity is first created.
	*/
	@Override
	public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);
	}
	}

view raw

MainActivity.java

hosted with ❤ by GitHub

Selain itu kita juga akan menemukan file content_main.xml yang memiliki struktur seperti berikut:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res-auto" 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"
	app:layout_behavior="@string/appbar_scrolling_view_behavior"
	tools:showIn="@layout/activity_main" tools:context=".MainActivity">
	<TextView
	android:text="Hello World!"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content" />
	</RelativeLayout>

view raw

content_main.xml

hosted with ❤ by GitHub

---

 

#2. Membuat View-nya

Oke mari kita mulai dengan membuat daftar list kegiatan dengan cara menimpa code dibawah ini yang berada di file content_main.xml:

	<TextView
	android:text="Hello World!"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content" />

view raw

content_main.xml

hosted with ❤ by GitHub

menjadi seperti ini:

	<ListView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:id="@android:id/list"
	android:layout_weight="1" />

view raw

content_main.xml

hosted with ❤ by GitHub

Ok next, buat layout baru didalam folder res/layout dengan nama file task_view.xml, lalu isikan code berikut kedalamnya:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="match_parent"
	android:layout_height="match_parent">
	<RelativeLayout
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="New Text"
	android:id="@+id/list"
	android:layout_alignParentTop="true"
	android:layout_alignParentLeft="true"
	android:layout_alignParentStart="true"
	android:textSize="20dp"
	android:layout_toLeftOf="@+id/delete"
	android:layout_alignBottom="@+id/delete"
	android:gravity="center_vertical" />
	<Button
	android:onClick="onDeleteButtonClick"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Delete"
	android:id="@+id/delete"
	android:layout_alignParentTop="true"
	android:layout_alignParentRight="true"
	android:layout_alignParentEnd="true" />
	<Button
	android:onClick="update"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Update"
	android:id="@+id/update"
	android:layout_alignParentTop="true"
	android:layout_toLeftOf="@+id/delete"
	android:layout_toStartOf="@+id/delete" />
	</RelativeLayout>
	</LinearLayout>

view raw

task_view.xml

hosted with ❤ by GitHub

---

 

#3. Membuat Fungsi-nya

Selanjutnya buka file MainActivity.java, lalu buat method baru dengan nama addtask(). Isikan code berikut pada method tersebut.

	public void addtask () {
	Log.d("MainActivity", "Add a new task");
	}

view raw

addtask_method.java

hosted with ❤ by GitHub

lalu timpa method onCreate yang sebelumnya sudah ada pada file MainActivity.java dengan code berikut:

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	getMenuInflater().inflate(R.menu.menu,menu);
	return true;
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	switch (item.getItemId()) {
	case R.id.action_add_task:
	Log.d("MainActivity","Add a new task");
	return true;
	default:
	return false;
	}
	}

view raw

MainActivity.java

hosted with ❤ by GitHub

Hal ini bertujuan untuk menampilkan dialog add new task, dimana nantinya pada baris code ini kita akan membuat fungsi tambah task baru. Coba jalankan aplikasi, dan lihat LogCat nya di Android Monitor. Harusnya akan tampil seperti ini:

1	com.logbook.wira.todolist D/MainActivity﹕ Add a new task

Nah kalau udah berhasil menanpilkan LogCat nya, mari kita buat fitur tambah task, dengan cara mengupdate method addtask() sebelumnya dengan code berikut:

	public void addtask () {
	AlertDialog.Builder builder = new AlertDialog.Builder(this);
	builder.setTitle("Add a task");
	builder.setMessage("What do you want to do?");
	final EditText inputField = new EditText(this);
	builder.setView(inputField);
	builder.setPositiveButton("Add", new DialogInterface.OnClickListener() {
	@Override
	public void onClick(DialogInterface dialogInterface, int i) {
	Log.d("MainActivity",inputField.getText().toString());
	}
	});
	builder.setNegativeButton("Cancel", null);
	builder.create().show();
	}

view raw

addtask_method.java

hosted with ❤ by GitHub

Sebelum menjalankan aplikasi, mari kita buat tombol untuk menjalankan method diatas dengan cara memanfaatkan FloatingActionButton yang sudah ada saat pertama kali kita membuat project. Cari code yang hampir sama seperti code dibawah ini

1	FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

lalu jadikan seperti code ini.

	FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
	fab.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {
	// Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
	// .setAction("Action", null).show();
	addtask();
	}
	});

view raw

onCreate.java

hosted with ❤ by GitHub

Nah sekarang kita sudah bisa jalankan aplikasi, dan seharusnya sih akan terlihat seperti gambar dibawah ini.

Gambar tambah task baru

Nah saat kita menginputkan teks pada form input task, maka logcat akan menampilkan teks yang kita inputkan sebelumnya. Ini bertujuan untuk menjelaskan bahwa disinilah nantinya fungsi yang harus kita tambahkan untuk bisa membuat task baru. Contohnya saya menginputkan teks: futsal, maka logcat akan tampil seperti berikut:

1	com.logbook.wira.todolist D/MainActivity﹕ futsal

---

 

#4. Membuat Database-nya

Yup, yang perlu dilakukan selanjutnya adalah membuat databasenya. Taukah Anda bahwa Android itu telah di embed dengan database yang dinamakan dengan SQLite.

Untuk membuat databasenya, pertama kali buat package baru dengan nama db didalam folder com.logbook.wira.todolist. Selanjutnya buat class baru pada packaged db yang telah dibuat tadi dengan nama classnya: TaskContact.java, lalu isikan code berikut kedalamnya:

	/**
	* Created by wira on 1/4/16.
	*/
	import android.provider.BaseColumns;
	public class TaskContract {
	public static final String DB_NAME = "com.example.TodoList.db.tasks";
	public static final int DB_VERSION = 1;
	public static final String TABLE = "tasks";
	public class Columns {
	public static final String TASK = "task";
	public static final String _ID = BaseColumns._ID;
	}
	}

view raw

TaskContract.java

hosted with ❤ by GitHub

Lalu buat class baru lagi dengan nama TaskDBHelper.java, dan tambahkan juga code dibawah ini kedalamnya:

	/**
	* Created by wira on 1/4/16.
	*/
	import android.content.Context;
	import android.database.sqlite.SQLiteDatabase;
	import android.database.sqlite.SQLiteOpenHelper;
	import android.util.Log;
	public class TaskDBHelper extends SQLiteOpenHelper {
	public TaskDBHelper(Context context) {
	super(context, TaskContract.DB_NAME, null, TaskContract.DB_VERSION);
	}
	@Override
	public void onCreate(SQLiteDatabase sqlDB) {
	String sqlQuery =
	String.format("CREATE TABLE %s (" +
	"_id INTEGER PRIMARY KEY AUTOINCREMENT, " +
	"%s TEXT)", TaskContract.TABLE,
	TaskContract.Columns.TASK);
	Log.d("TaskDBHelper","Query to form table: "+sqlQuery);
	sqlDB.execSQL(sqlQuery);
	}
	@Override
	public void onUpgrade(SQLiteDatabase sqlDB, int i, int i2) {
	sqlDB.execSQL("DROP TABLE IF EXISTS "+TaskContract.TABLE);
	onCreate(sqlDB);
	}
	}

view raw

TaskDBHelper.java

hosted with ❤ by GitHub

Pada baris code 18-21 diatas, kita telah membuat table database baru dengan struktur seperti:

1 2 3

CREATE TABLE tasks (     id int primary key auto_increment,     task text) auto_increment = 1

---

 

#5. Menambahkan Task ke Database

Selanjutnya kita buat fungsi untuk menambahkan task yang kita input agar tersimpan kedalam database. Update method addtask() pada baris code dibawah ini:

1	Log.d("MainActivity",inputField.getText().toString());

menjadi seperti berikut:

	public void addtask () {
	AlertDialog.Builder builder = new AlertDialog.Builder(this);
	builder.setTitle("Add a task");
	builder.setMessage("What do you want to do?");
	final EditText inputField = new EditText(this);
	builder.setView(inputField);
	builder.setPositiveButton("Add", new DialogInterface.OnClickListener() {
	@Override
	public void onClick(DialogInterface dialogInterface, int i) {
	String task = inputField.getText().toString();
	helper = new TaskDBHelper(MainActivity.this);
	SQLiteDatabase db = helper.getWritableDatabase();
	ContentValues values = new ContentValues();
	values.clear();
	values.put(TaskContract.Columns.TASK, task);
	db.insertWithOnConflict(TaskContract.TABLE, null, values, SQLiteDatabase.CONFLICT_IGNORE);
	updateUI();
	}
	});
	builder.setNegativeButton("Cancel", null);
	builder.create().show();
	}

view raw

addtask_method.java

hosted with ❤ by GitHub

Oya, pastikan adalah telah menambahkan class db dibawah ini pada MainActivity.java.

1 2	import com.example.TodoList.db.TaskContract; import com.example.TodoList.db.TaskDBHelper;

Dan tambahkan juga variabel global dibawah ini pada MainActivity.java

1	private TaskDBHelper helper;

---

 

#6. Menampilkan Task dari Database

Untuk menampilkan data/task yang telah kita buat dari database, yang perlu dilakukan adalah menambahkan method updateUI() pada MainActivity.java, seperti berikut:

	private void updateUI() {
	helper = new TaskDBHelper(MainActivity.this);
	SQLiteDatabase sqlDB = helper.getReadableDatabase();
	Cursor cursor = sqlDB.query(TaskContract.TABLE,
	new String[]{TaskContract.Columns._ID, TaskContract.Columns.TASK},
	null, null, null, null, null);
	listAdapter = new SimpleCursorAdapter(
	this,
	R.layout.task_view,
	cursor,
	new String[]{TaskContract.Columns.TASK},
	new int[]{R.id.list},
	0
	);
	this.setListAdapter(listAdapter);
	}

view raw

updateUI_method.java

hosted with ❤ by GitHub

Nah sekarang kita sudah bisa menambahkan task kegiatan dan menampilkan task tersebut dari database seperti yang terlihat pada gambar dibawah ini.

Daftar Kegiatan

---

 

#7. Membuat Fitur Delete

Swipe to Dismiss

Jika kita telah berhasil menambahkan task baru, yang perlu kita lakukan selanjutnya adalah bagaimana cara menghapusnya atau menandakan bahwa task ini sudah selesai dikerjakan. Pada tutorial kali ini akan dibahas dua metode untuk menghapus, pertama cara konvensional (tombol delete), dan yang kedua swipe to dismiss. Tapi alangkah baiknya kita mulai bertahap dari cara konvesional.

Jika sebelumnya kita telah membuat button delete dengan id seperti ini:

1	android:onClick="onDoneButtonClick"

Maka selanjutnya kita membuat fungsinya, yaitu dengan menambahkan method onDoneButtonClick. Yang artinya method ini akan dipanggil ketika tombol diatas di sentuh. Buat method onDoneButtonClick seperti dibawah ini, dan tambahkan pada MainActivity.java.

	public void onDeleteButtonClick(View view) {
	View v = (View) view.getParent();
	TextView taskTextView = (TextView) v.findViewById(R.id.list);
	String task = taskTextView.getText().toString();
	String sql = String.format("DELETE FROM %s WHERE %s = '%s'",
	TaskContract.TABLE, TaskContract.Columns.TASK, task);
	helper = new TaskDBHelper(MainActivity.this);
	SQLiteDatabase sqlDB = helper.getWritableDatabase();
	sqlDB.execSQL(sql);
	updateUI();
	}

view raw

onDeleteButtonClick_method.java

hosted with ❤ by GitHub

Nah sekarang coba jalankan aplikasi, dan tekan tombol delete. Seharusnya daftar task yang kita hapus tidak akan terlihat lagi di aplikasi seperti yang terlihat pada gambar dibawah ini.

Daftar Task yang telah dihapus

---

 

#8. Membuat Fitur Update

Next, jika sebelumnya kita telah berhasil menghapus maka selanjutnya harus bisa update dong. Nah, karena tombol update di tampilan aplikasi sudah dibuat sebelumnya, maka mari kita buat fungsinya. Dimana pada view (content_main.xml) sebelumnya kita telah membuat onclick seperti dibawah ini:

1	android:onClick="update"

Button diatas akan memanggil method update(). Oleh karena itu kita perlu menambahkan method update() pada MainActivity.java yang berisikan code dibawah ini:

	public void update (View view) {
	View u = (View) view.getParent();
	TextView taskUpdateView = (TextView) u.findViewById(R.id.list);
	final int id = u.getId();
	AlertDialog.Builder builder = new AlertDialog.Builder(this);
	builder.setTitle("Update Data");
	final EditText inputField = new EditText(this);
	builder.setView(inputField);
	builder.setPositiveButton("Update", new DialogInterface.OnClickListener() {
	@Override
	public void onClick(DialogInterface dialogInterface, int i) {
	String update = inputField.getText().toString();
	helper = new TaskDBHelper(MainActivity.this);
	SQLiteDatabase db = helper.getWritableDatabase();
	//db.execSQL(sql);
	ContentValues values = new ContentValues();
	values.clear();
	values.put(TaskContract.Columns._ID, id);
	values.put(TaskContract.Columns.TASK, update);
	db.replace(TaskContract.TABLE, null, values);
	updateUI();
	}
	});
	builder.setNegativeButton("Cancel", null);
	builder.create().show();
	}

view raw

update_method.java

hosted with ❤ by GitHub

Nah, sekarang coba jalankan aplikasi dan update salah satu task. Pada percobaan saya, saya mencoba mengupdate task blogging menjadi tidur dan hasilnya task ter-update seperti yang terlihat pada gambar dibawah ini:

Update Task

Well, mungkin cukup sekian pembuatan aplikasi ToDo List sederhana di Android, untuk impelementasi fitur delete dengan cara Swipe to Dismiss akan kita bahas di postingan selanjutnya.

Semoga bermanfaat .. 🙂