Android Tutorial - Membuat Kalender dengan Eclipse

Aplikasi Kalender berbasis android ini dibuat menggunakan program eclipse. Semoga aplikasi ini bisa bermanfaat. Berikut tutorialnya...

1.    Buka eclipse, Pilih   "New -> Android application Project.
2.    Isi nama projectnya dengan

• Application Name  :  Kalender
• Project Name    :    Kalender
• Package Name  :   com.ahmadsahidin.kalender

3.    Pilih :

• Minimum SDK  :  API  8 (Android 2.2)
• Target SDK    :    API 19  (Android 4.4)
• Compile with  :  Android 19 (Android 4.4)
• Theme   :   Holo Light with Dark Action Bar

4.    Klik Next pada form-form selanjutnya biarkan default saja, kemudian klik finish.

5.    Buat folder baru di dalam  foler "res" dengan cara klik kanan di folder res  pilih  new -> folder.  Isi nama folder itu dengan  "drawable"

6.     Di dalam folder drawable isikan file-file berikut:

Download semua filenya  Disini

7.    Buka  file  "activity main"  dan  isikan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/hari" >

        <RelativeLayout
            android:id="@+id/previous"
            android:layout_width="40dip"
            android:layout_height="30dip"
            android:layout_alignParentLeft="true" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="@drawable/arrow_left" />
        </RelativeLayout>

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dip"
            android:textColor="#000000"
            android:textSize="18dip"
            android:textStyle="bold" />

        <RelativeLayout
            android:id="@+id/next"
            android:layout_width="40dip"
            android:layout_height="30dip"
            android:layout_alignParentRight="true" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="@drawable/arrow_right" />
        </RelativeLayout>
    </RelativeLayout>

    <GridView
       
        android:id="@+id/gridview"
        android:layout_below="@+id/header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:listSelector="@android:color/transparent"
        android:numColumns="7"
        android:stretchMode="columnWidth" />
    
    <LinearLayout 
        android:id="@+id/text"
        android:layout_below="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
         <!-- <TextView 
             android:id="@+id/tvView"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:visibility="gone"
             android:text=""/> -->
    </LinearLayout>

</RelativeLayout>

8. Buat file baru  pada res/layout  dengan cara klik kana pada folder layout dan pilih "New ->> Android Xml File". Isikan namanya dengan  "calendar_item.xml".  Kemudian rubah kodenya seperti berikut

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/calendar_cell"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="2dip" >

    <TextView
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#0000D7"
        android:textSize="14sp"
        android:textStyle="bold" >
    </TextView>

    <ImageView
        android:id="@+id/date_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@drawable/dot"
        android:visibility="gone" />

</LinearLayout>

9.   Buka "MainActivity.java"  dan isikan kode berikut:

package com.ahmadsahidin.kalender;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.GregorianCalendar;
import java.util.Locale;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

 public GregorianCalendar month, itemmonth;// calendar instances.

 public CalendarAdapter adapter;// adapter instance
 public Handler handler;// for grabbing some event values for showing the dot
       // marker.
 public ArrayList items; // container to store calendar items which
         // needs showing the event marker
 ArrayList event;
 LinearLayout rLayout;
 ArrayList date;
 ArrayList desc;

 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  Locale.setDefault(Locale.US);

  rLayout = (LinearLayout) findViewById(R.id.text);
  month = (GregorianCalendar) GregorianCalendar.getInstance();
  itemmonth = (GregorianCalendar) month.clone();

  items = new ArrayList();

  adapter = new CalendarAdapter(this, month);

  GridView gridview = (GridView) findViewById(R.id.gridview);
  gridview.setAdapter(adapter);

  handler = new Handler();


  TextView title = (TextView) findViewById(R.id.title);
  title.setText(android.text.format.DateFormat.format("MMMM yyyy", month));

  RelativeLayout previous = (RelativeLayout) findViewById(R.id.previous);

  previous.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
    setPreviousMonth();
    refreshCalendar();
   }
  });

  RelativeLayout next = (RelativeLayout) findViewById(R.id.next);
  next.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
    setNextMonth();
    refreshCalendar();

   }
  });

  gridview.setOnItemClickListener(new OnItemClickListener() {
   public void onItemClick(AdapterView parent, View v,
     int position, long id) {
    // removing the previous view if added
    if (((LinearLayout) rLayout).getChildCount() > 0) {
     ((LinearLayout) rLayout).removeAllViews();
    }
    desc = new ArrayList();
    date = new ArrayList();
    ((CalendarAdapter) parent.getAdapter()).setSelected(v);
    String selectedGridDate = CalendarAdapter.dayString
      .get(position);
    String[] separatedTime = selectedGridDate.split("-");
    String gridvalueString = separatedTime[2].replaceFirst("^0*",
      "");

                       // taking last part of date. ie; 2 from 2012-12-02.
    int gridvalue = Integer.parseInt(gridvalueString);
    // navigate to next or previous month on clicking offdays.
    if ((gridvalue > 10) && (position < 8)) {
     setPreviousMonth();
     refreshCalendar();
    } else if ((gridvalue < 7) && (position > 28)) {
     setNextMonth();
     refreshCalendar();
    }
    ((CalendarAdapter) parent.getAdapter()).setSelected(v);

    for (int i = 0; i < Utility.startDates.size(); i++) {
     if (Utility.startDates.get(i).equals(selectedGridDate)) {
      desc.add(Utility.nameOfEvent.get(i));
     }
    }

    if (desc.size() > 0) {
     for (int i = 0; i < desc.size(); i++) {
      TextView rowTextView = new TextView(MainActivity.this);

      // set some properties of rowTextView or something
      rowTextView.setText("Event:" + desc.get(i));
      rowTextView.setTextColor(Color.BLACK);

      // add the textview to the linearlayout
      rLayout.addView(rowTextView);

     }

    }

    desc = null;

   }

  });
 }

 protected void setNextMonth() {
  if (month.get(GregorianCalendar.MONTH) == month
    .getActualMaximum(GregorianCalendar.MONTH)) {
   month.set((month.get(GregorianCalendar.YEAR) + 1),
     month.getActualMinimum(GregorianCalendar.MONTH), 1);
  } else {
   month.set(GregorianCalendar.MONTH,
     month.get(GregorianCalendar.MONTH) + 1);
  }

 }

 protected void setPreviousMonth() {
  if (month.get(GregorianCalendar.MONTH) == month
    .getActualMinimum(GregorianCalendar.MONTH)) {
   month.set((month.get(GregorianCalendar.YEAR) - 1),
     month.getActualMaximum(GregorianCalendar.MONTH), 1);
  } else {
   month.set(GregorianCalendar.MONTH,
     month.get(GregorianCalendar.MONTH) - 1);
  }

 }

 protected void showToast(String string) {
  Toast.makeText(this, string, Toast.LENGTH_SHORT).show();

 }

 public void refreshCalendar() {
  TextView title = (TextView) findViewById(R.id.title);

  adapter.refreshDays();
  adapter.notifyDataSetChanged();

  title.setText(android.text.format.DateFormat.format("MMMM yyyy", month));
 }

 public Runnable calendarUpdater = new Runnable() {

  @Override
  public void run() {
   items.clear();

   // Print dates of the current week
   DateFormat df = new SimpleDateFormat("yyyy-MM-dd", Locale.US);
   event = Utility.readCalendarEvent(MainActivity.this);
   Log.d("=====Event====", event.toString());
   Log.d("=====Date ARRAY====", Utility.startDates.toString());

   for (int i = 0; i < Utility.startDates.size(); i++) {
    df.format(itemmonth.getTime());
    itemmonth.add(GregorianCalendar.DATE, 1);
    items.add(Utility.startDates.get(i).toString());
   }
   adapter.setItems(items);
   adapter.notifyDataSetChanged();
  }
 };
}

10.   Buat  2  class baru pada package  com.ahmadsahidin.kalender dan beri nama seperti berikut

• CalendarAdapter.java
• Utility.java

11.    Buka  file  CalendarAdaper.java   dan  isikan kode berikut

package com.ahmadsahidin.kalender;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.GregorianCalendar;
import java.util.List;
import java.util.Locale;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CalendarAdapter extends BaseAdapter {
 private Context mContext;

 private java.util.Calendar month;
 public GregorianCalendar pmonth; // calendar instance for previous month
 /**
  * calendar instance for previous month for getting complete view
  */
 public GregorianCalendar pmonthmaxset;
 private GregorianCalendar selectedDate;
 int firstDay;
 int maxWeeknumber;
 int maxP;
 int calMaxP;
 int lastWeekDay;
 int leftDays;
 int mnthlength;
 String itemvalue, curentDateString;
 DateFormat df;

 private ArrayList items;
 public static List dayString;
 private View previousView;

 public CalendarAdapter(Context c, GregorianCalendar monthCalendar) {
  CalendarAdapter.dayString = new ArrayList();
  Locale.setDefault(Locale.US);
  month = monthCalendar;
  selectedDate = (GregorianCalendar) monthCalendar.clone();
  mContext = c;
  month.set(GregorianCalendar.DAY_OF_MONTH, 1);
  this.items = new ArrayList();
  df = new SimpleDateFormat("yyyy-MM-dd", Locale.US);
  curentDateString = df.format(selectedDate.getTime());
  refreshDays();
 }

 public void setItems(ArrayList items) {
  for (int i = 0; i != items.size(); i++) {
   if (items.get(i).length() == 1) {
    items.set(i, "0" + items.get(i));
   }
  }
  this.items = items;
 }

 public int getCount() {
  return dayString.size();
 }

 public Object getItem(int position) {
  return dayString.get(position);
 }

 public long getItemId(int position) {
  return 0;
 }

 // create a new view for each item referenced by the Adapter
 public View getView(int position, View convertView, ViewGroup parent) {
  View v = convertView;
  TextView dayView;
  if (convertView == null) { // if it's not recycled, initialize some
         // attributes
   LayoutInflater vi = (LayoutInflater) mContext
     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
   v = vi.inflate(R.layout.calendar_item, null);

  }
  dayView = (TextView) v.findViewById(R.id.date);
  // separates daystring into parts.
  String[] separatedTime = dayString.get(position).split("-");
  // taking last part of date. ie; 2 from 2012-12-02
  String gridvalue = separatedTime[2].replaceFirst("^0*", "");
  // checking whether the day is in current month or not.
  if ((Integer.parseInt(gridvalue) > 1) && (position < firstDay)) {
   // setting offdays to white color.
   dayView.setTextColor(Color.WHITE);
   dayView.setClickable(false);
   dayView.setFocusable(false);
  } else if ((Integer.parseInt(gridvalue) < 7) && (position > 28)) {
   dayView.setTextColor(Color.WHITE);
   dayView.setClickable(false);
   dayView.setFocusable(false);
  } else {
   // setting curent month's days in blue color.
   dayView.setTextColor(Color.BLUE);
  }

  if (dayString.get(position).equals(curentDateString)) {
   setSelected(v);
   previousView = v;
  } else {
   v.setBackgroundResource(R.drawable.list_item_background);
  }
  dayView.setText(gridvalue);

  // create date string for comparison
  String date = dayString.get(position);

  if (date.length() == 1) {
   date = "0" + date;
  }
  String monthStr = "" + (month.get(GregorianCalendar.MONTH) + 1);
  if (monthStr.length() == 1) {
   monthStr = "0" + monthStr;
  }

  // show icon if date is not empty and it exists in the items array
  ImageView iw = (ImageView) v.findViewById(R.id.date_icon);
  if (date.length() > 0 && items != null && items.contains(date)) {
   iw.setVisibility(View.VISIBLE);
  } else {
   iw.setVisibility(View.INVISIBLE);
  }
  return v;
 }

 public View setSelected(View view) {
  if (previousView != null) {
   previousView.setBackgroundResource(R.drawable.list_item_background);
  }
  previousView = view;
  view.setBackgroundResource(R.drawable.calendar_cel_selectl);
  return view;
 }

 public void refreshDays() {
  // clear items
  items.clear();
  dayString.clear();
  Locale.setDefault(Locale.US);
  pmonth = (GregorianCalendar) month.clone();
  // month start day. ie; sun, mon, etc
  firstDay = month.get(GregorianCalendar.DAY_OF_WEEK);
  // finding number of weeks in current month.
  maxWeeknumber = month.getActualMaximum(GregorianCalendar.WEEK_OF_MONTH);
  // allocating maximum row number for the gridview.
  mnthlength = maxWeeknumber * 7;
  maxP = getMaxP(); // previous month maximum day 31,30....
  calMaxP = maxP - (firstDay - 1);// calendar offday starting 24,25 ...
  /**
   * Calendar instance for getting a complete gridview including the three
   * month's (previous,current,next) dates.
   */
  pmonthmaxset = (GregorianCalendar) pmonth.clone();
  /**
   * setting the start date as previous month's required date.
   */
  pmonthmaxset.set(GregorianCalendar.DAY_OF_MONTH, calMaxP + 1);

  /**
   * filling calendar gridview.
   */
  for (int n = 0; n < mnthlength; n++) {

   itemvalue = df.format(pmonthmaxset.getTime());
   pmonthmaxset.add(GregorianCalendar.DATE, 1);
   dayString.add(itemvalue);

  }
 }

 private int getMaxP() {
  int maxP;
  if (month.get(GregorianCalendar.MONTH) == month
    .getActualMinimum(GregorianCalendar.MONTH)) {
   pmonth.set((month.get(GregorianCalendar.YEAR) - 1),
     month.getActualMaximum(GregorianCalendar.MONTH), 1);
  } else {
   pmonth.set(GregorianCalendar.MONTH,
     month.get(GregorianCalendar.MONTH) - 1);
  }
  maxP = pmonth.getActualMaximum(GregorianCalendar.DAY_OF_MONTH);

  return maxP;
 }

}

12.   Buka  Utility.java  dan isikan kode berikut..

package com.ahmadsahidin.kalender;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;

import android.content.Context;
import android.database.Cursor;
import android.net.Uri;

public class Utility {
 public static ArrayList nameOfEvent = new ArrayList();
 public static ArrayList startDates = new ArrayList();
 public static ArrayList endDates = new ArrayList();
 public static ArrayList descriptions = new ArrayList();

 public static ArrayList readCalendarEvent(Context context) {
  Cursor cursor = context.getContentResolver()
    .query(Uri.parse("content://com.android.calendar/events"),
      new String[] { "calendar_id", "title", "description",
        "dtstart", "dtend", "eventLocation" }, null,
      null, null);
  cursor.moveToFirst();
  // fetching calendars name
  String CNames[] = new String[cursor.getCount()];

  // fetching calendars id
  nameOfEvent.clear();
  startDates.clear();
  endDates.clear();
  descriptions.clear();
  for (int i = 0; i < CNames.length; i++) {

   nameOfEvent.add(cursor.getString(1));
   startDates.add(getDate(Long.parseLong(cursor.getString(3))));
   endDates.add(getDate(Long.parseLong(cursor.getString(4))));
   descriptions.add(cursor.getString(2));
   CNames[i] = cursor.getString(1);
   cursor.moveToNext();

  }
  return nameOfEvent;
 }

 public static String getDate(long milliSeconds) {
  SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
  Calendar calendar = Calendar.getInstance();
  calendar.setTimeInMillis(milliSeconds);
  return formatter.format(calendar.getTime());
 }
}

13.  Jalankan aplikasinya.  Kalau ada masalah silahkan berkomentar di bawah

Tentang Penulis :

AHMAD SAHIDIN, Seorang anak muda asal Kaledupa yang sangat menyukai dunia Blogging. Berprofesi sebagai Mahasiswa Jurusan Pendidikan Matematika.
My facebook