How to Create a Simple ListView in Android

The display of elements in a lists is a very common pattern in mobile applications. The user sees a list of items and can scroll through them. If he selects one item, this can update the ActionBar or triggers a detailed screen for the selection.
Android provides the ListView class which is capable of displaying a scrollable list of items. These items can be of any type(Array Of anytype).

For example the following listing shows a layout file with includes a ListView.
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical” >
<ListView
android:id=”@+id/listView1″
android:layout_width=”match_parent”
android:layout_height=”wrap_content” >
</ListView>
</LinearLayout>

Adapters and ListView implementations

A ListView receives its data via an adapter. The adapter also defines how each row in the ListView is displayed.
The adapter is assigned to the list via the setAdapter method on the ListView object.
An adapter extend the BaseAdapter class. Android provides several standard adapters; Like ArrayAdapter and CursorAdapter.

ArrayAdapter:

ArrayAdapter can handle data based on Arrays or java.util.List.The ArrayAdapter class can handle any Java object as input. It maps the data of this input to a TextView in the layout. You can define one in the constructor otherwise the android.R.id.text1 ID will be used.
ArrayAdapter uses the toString() method of the data input object to determine the String which should be displayed.

   [Except these two another adapter is SimpleCursorAdapter,which can handle database related data. (Check other post)]

The Android platform provides default layouts for rows in ListViews. For example
android.R.layout.simple_list_item1. By default ArrayAdapter uses the
android.R.id.text1 ID, but you can define another one in the ArrayAdapter constructor.

The following coding shows an example of the usage of the ArrayAdapter class and a predefinedlayout from the Android system.

Let’s get start by creating a project in Android ADT.

1. Create a new project by going to File ⇒ New Android Application. Fill all the details  As Application Name:SimpleListView,Project Name:SimpleListView,Package Name:com.test.simplelistview  and click on Next button to finish .

2 .Once the project is created open your activity_main.xml (res/layout) and paste the ListView (Shown above) code.

3.Open MainActivity.java class and paste following code.

import android.os.Bundle;
import android.app.ListActivity;
import android.content.Intent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Switch;
import android.widget.Toast;

public class MainActivity extends Activity {

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

ListView listView = (ListView) findViewById(R.id.listView1);
String[] values = new String[] {“sunday”,”monaday”,”tuesday”,”wednesday”,”thrusday”,”friday”,”saturday”};
// First paramenter – Context
// Second parameter – Layout for the row
// Third parameter – ID of the TextView to which the data is written
// Forth – the Array of data
final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,  values);
// Assign adapter to ListView
listView.setAdapter(adapter);

listView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,int position, long id) {
String filename = adapter.getItem(position).toString();

 // ListView Clicked item value
//   String  filename= (String) listView.getItemAtPosition(position);
//   remove final from ArrayAdapter to use.

Toast.makeText(getApplicationContext(), “Slected File=” + filename+”;”+ ” Selected Position=”+position, Toast.LENGTH_LONG).show();
}
});

}

}

4. The final step is to  AndroidManifest.xml file. Open you AndroidManifest.xml file and modify the code as below.

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
package=”com.testview.listviewtest”
android:versionCode=”1″
android:versionName=”1.0″ >

<uses-sdk
android:minSdkVersion=”8″
android:targetSdkVersion=”16″ />

<application
android:allowBackup=”true”
android:icon=”@drawable/ic_launcher”
android:label=”@string/app_name”
android:theme=”@style/AppTheme” >
<activity
android:name=”com.testview.listviewtest.MainActivity”
android:label=”@string/app_name” >
<intent-filter>
<action android:name=”android.intent.action.MAIN” />

<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
<activity android:name=”com.testview.listviewtest.SundayActivity”></activity>
<activity android:name=”.MondayActivity”></activity>
</application>

</manifest>

6. Finally run your project by right clicking on your project folder ⇒ Run As ⇒ 1 Android Application.

ListViewListView

How to Create Custom Calendar in Android

Android  does not provide any calender view ,so its a very big draw back for developer but we can create our own custom calender using grid-view. This article is all about creating custom calender in Android.

Let’s get start by creating a project in Android ADT.

1. Create a new project by going to File ⇒ New Android Application. Fill all the details  As Application Name:AndroidCalender ,Project Name:AndroidCalender,Package Name:com.example.adroidcalender  and click on Next button to finish .

2 .Once the project is created open your activity_main.xml (res/layout) and paste the following code.

Add colors.xml and styles_calendar_events.xml under res/values folder.

colors.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>

<color name=”white”>#FFFFFF</color>
<color name=”black”>#000000</color>
<color name=”symptom_color_selected”>#003366</color>
<color name=”reaction_color_selected”>#003366</color>
<color name=”static_text_color”>#003366</color>
<color name=”journal_entry_listitem_text_color”>#003366</color>
<color name=”note_text_disabled”>#333333</color>
<color name=”blue”>#0000FF</color>
<color name=”navy”>#6699FF</color>
<color name=”sky”>#0099CC</color>
<color name=”gray”>#808080</color>
<color name=”lightgray”>#e7e7e7</color>
<color name=”lightgray02″>#bfbfbf</color>
<color name=”dark”>#000015</color>
<color name=”lightgreen”>#336666</color>
<color name=”orrange”>#e33d1b</color>
<color name=”darkorrange”>#cc2303</color>

</resources>

styles_calendar_events.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>

<style name=”calendar_event_style” parent=”@android:style/TextAppearance.Small”>
<item name=”android:textColor”>#FF6600</item>
<item name=”android:textStyle”>bold</item>
<item name=”android:textSize”>8sp</item>
</style>

</resources>

activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”@color/lightgray”
android:orientation=”vertical”
tools:ignore=”InefficientWeight,ContentDescription” >

<LinearLayout
android:id=”@+id/buttonlayout”
android:layout_width=”fill_parent”
android:layout_height=”60sp”
android:background=”@drawable/topbar”
android:gravity=”left|top”
android:height=”60sp”
android:orientation=”horizontal” >

<Button
android:id=”@+id/settings”
android:layout_width=”54sp”
android:layout_height=”60sp”
android:background=”@drawable/meenu” />

<ImageView
android:id=”@+id/prevMonth”
android:layout_width=”20sp”
android:layout_height=”fill_parent”
android:layout_gravity=”center”
android:layout_marginLeft=”10sp”
android:src=”@drawable/calendar_left_arrow_selector” >
</ImageView>

<TextView
android:id=”@+id/currentMonth”
android:layout_width=”fill_parent”
android:layout_height=”60sp”
android:layout_weight=”0.6″
android:gravity=”center”
android:textAppearance=”?android:attr/textAppearanceMedium”
android:textColor=”#FFFFFF” >
</TextView>

<ImageView
android:id=”@+id/nextMonth”
android:layout_width=”20sp”
android:layout_height=”fill_parent”
android:layout_gravity=”center”
android:layout_marginRight=”10sp”
android:src=”@drawable/calendar_right_arrow_selector” >
</ImageView>

<Button
android:id=”@+id/addEvent”
android:layout_width=”54sp”
android:layout_height=”60sp”
android:background=”@drawable/plus” />
</LinearLayout>

<Button
android:id=”@+id/selectedDayMonthYear”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:background=”@drawable/calendar_top_header”
android:textAppearance=”?android:attr/textAppearanceMedium”
android:textColor=”#FFFFFF” >
</Button>

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”center” >

<ImageView
android:id=”@+id/calendarheader”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:src=”@drawable/calendar_days” >
</ImageView>
</LinearLayout>

<GridView
android:id=”@+id/calendar”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:numColumns=”7″ >
</GridView>

</LinearLayout>

 3.Create another Xml under res/layout as a screen_gridcell.xml and paste following code .

screen_gridcell.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/calendar_button_selector”
android:orientation=”vertical” >

<Button
android:id=”@+id/calendar_day_gridcell”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:background=”@drawable/calendar_button_selector”
android:textAppearance=”?android:attr/textAppearanceMedium”
android:textColor=”#FFFFFF” >
</Button>

<TextView
android:id=”@+id/num_events_per_day”
style=”@style/calendar_event_style”
android:layout_width=”10dip”
android:layout_height=”10dip”
android:layout_gravity=”right” >
</TextView>

</RelativeLayout>

4.Open MainActivity.java class and paste following code.

MainActivity.java

package com.test.androidcalender;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;
import java.util.HashMap;
import java.util.List;
import java.util.Locale;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.text.format.DateFormat;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

@TargetApi(3)
public class MainActivity extends Activity implements OnClickListener {
private static final String tag = “MyCalendarActivity”;

private TextView currentMonth;
private Button selectedDayMonthYearButton;
private ImageView prevMonth;
private ImageView nextMonth;
private GridView calendarView;
private GridCellAdapter adapter;
private Calendar _calendar;
@SuppressLint(“NewApi”)
private int month, year;
@SuppressWarnings(“unused”)
@SuppressLint({ “NewApi”, “NewApi”, “NewApi”, “NewApi” })
private final DateFormat dateFormatter = new DateFormat();
private static final String dateTemplate = “MMMM yyyy”;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

_calendar = Calendar.getInstance(Locale.getDefault());
month = _calendar.get(Calendar.MONTH) + 1;
year = _calendar.get(Calendar.YEAR);
Log.d(tag, “Calendar Instance:= ” + “Month: ” + month + ” ” + “Year: ”
+ year);

selectedDayMonthYearButton = (Button) this
.findViewById(R.id.selectedDayMonthYear);
selectedDayMonthYearButton.setText(“Selected: “);

prevMonth = (ImageView) this.findViewById(R.id.prevMonth);
prevMonth.setOnClickListener(this);

currentMonth = (TextView) this.findViewById(R.id.currentMonth);
currentMonth.setText(DateFormat.format(dateTemplate,
_calendar.getTime()));

nextMonth = (ImageView) this.findViewById(R.id.nextMonth);
nextMonth.setOnClickListener(this);

calendarView = (GridView) this.findViewById(R.id.calendar);

// Initialised
adapter = new GridCellAdapter(getApplicationContext(),
R.id.calendar_day_gridcell, month, year);
adapter.notifyDataSetChanged();
calendarView.setAdapter(adapter);
}

/**
*
* @param month
* @param year
*/
private void setGridCellAdapterToDate(int month, int year) {
adapter = new GridCellAdapter(getApplicationContext(),
R.id.calendar_day_gridcell, month, year);
_calendar.set(year, month – 1, _calendar.get(Calendar.DAY_OF_MONTH));
currentMonth.setText(DateFormat.format(dateTemplate,
_calendar.getTime()));
adapter.notifyDataSetChanged();
calendarView.setAdapter(adapter);
}

@Override
public void onClick(View v) {
if (v == prevMonth) {
if (month <= 1) {
month = 12;
year–;
} else {
month–;
}
Log.d(tag, “Setting Prev Month in GridCellAdapter: ” + “Month: ”
+ month + ” Year: ” + year);
setGridCellAdapterToDate(month, year);
}
if (v == nextMonth) {
if (month > 11) {
month = 1;
year++;
} else {
month++;
}
Log.d(tag, “Setting Next Month in GridCellAdapter: ” + “Month: ”
+ month + ” Year: ” + year);
setGridCellAdapterToDate(month, year);
}

}

@Override
public void onDestroy() {
Log.d(tag, “Destroying View …”);
super.onDestroy();
}

// Inner Class
public class GridCellAdapter extends BaseAdapter implements OnClickListener {
private static final String tag = “GridCellAdapter”;
private final Context _context;

private final List<String> list;
private static final int DAY_OFFSET = 1;
private final String[] weekdays = new String[] { “Sun”, “Mon”, “Tue”,
“Wed”, “Thu”, “Fri”, “Sat” };
private final String[] months = { “January”, “February”, “March”,
“April”, “May”, “June”, “July”, “August”, “September”,
“October”, “November”, “December” };
private final int[] daysOfMonth = { 31, 28, 31, 30, 31, 30, 31, 31, 30,
31, 30, 31 };
private int daysInMonth;
private int currentDayOfMonth;
private int currentWeekDay;
private Button gridcell;
private TextView num_events_per_day;
private final HashMap<String, Integer> eventsPerMonthMap;
private final SimpleDateFormat dateFormatter = new SimpleDateFormat(
“dd-MMM-yyyy”);

// Days in Current Month
public GridCellAdapter(Context context, int textViewResourceId,
int month, int year) {
super();
this._context = context;
this.list = new ArrayList<String>();
Log.d(tag, “==> Passed in Date FOR Month: ” + month + ” ”
+ “Year: ” + year);
Calendar calendar = Calendar.getInstance();
setCurrentDayOfMonth(calendar.get(Calendar.DAY_OF_MONTH));
setCurrentWeekDay(calendar.get(Calendar.DAY_OF_WEEK));
Log.d(tag, “New Calendar:= ” + calendar.getTime().toString());
Log.d(tag, “CurrentDayOfWeek :” + getCurrentWeekDay());
Log.d(tag, “CurrentDayOfMonth :” + getCurrentDayOfMonth());

// Print Month
printMonth(month, year);

// Find Number of Events
eventsPerMonthMap = findNumberOfEventsPerMonth(year, month);
}

private String getMonthAsString(int i) {
return months[i];
}

private String getWeekDayAsString(int i) {
return weekdays[i];
}

private int getNumberOfDaysOfMonth(int i) {
return daysOfMonth[i];
}

public String getItem(int position) {
return list.get(position);
}

@Override
public int getCount() {
return list.size();
}

/**
* Prints Month
*
* @param mm
* @param yy
*/
private void printMonth(int mm, int yy) {
Log.d(tag, “==> printMonth: mm: ” + mm + ” ” + “yy: ” + yy);
int trailingSpaces = 0;
int daysInPrevMonth = 0;
int prevMonth = 0;
int prevYear = 0;
int nextMonth = 0;
int nextYear = 0;

int currentMonth = mm – 1;
String currentMonthName = getMonthAsString(currentMonth);
daysInMonth = getNumberOfDaysOfMonth(currentMonth);

Log.d(tag, “Current Month: ” + ” ” + currentMonthName + ” having ”
+ daysInMonth + ” days.”);

GregorianCalendar cal = new GregorianCalendar(yy, currentMonth, 1);
Log.d(tag, “Gregorian Calendar:= ” + cal.getTime().toString());

if (currentMonth == 11) {
prevMonth = currentMonth – 1;
daysInPrevMonth = getNumberOfDaysOfMonth(prevMonth);
nextMonth = 0;
prevYear = yy;
nextYear = yy + 1;
Log.d(tag, “*->PrevYear: ” + prevYear + ” PrevMonth:”
+ prevMonth + ” NextMonth: ” + nextMonth
+ ” NextYear: ” + nextYear);
} else if (currentMonth == 0) {
prevMonth = 11;
prevYear = yy – 1;
nextYear = yy;
daysInPrevMonth = getNumberOfDaysOfMonth(prevMonth);
nextMonth = 1;
Log.d(tag, “**–> PrevYear: ” + prevYear + ” PrevMonth:”
+ prevMonth + ” NextMonth: ” + nextMonth
+ ” NextYear: ” + nextYear);
} else {
prevMonth = currentMonth – 1;
nextMonth = currentMonth + 1;
nextYear = yy;
prevYear = yy;
daysInPrevMonth = getNumberOfDaysOfMonth(prevMonth);
Log.d(tag, “***—> PrevYear: ” + prevYear + ” PrevMonth:”
+ prevMonth + ” NextMonth: ” + nextMonth
+ ” NextYear: ” + nextYear);
}

int currentWeekDay = cal.get(Calendar.DAY_OF_WEEK) – 1;
trailingSpaces = currentWeekDay;

Log.d(tag, “Week Day:” + currentWeekDay + ” is ”
+ getWeekDayAsString(currentWeekDay));
Log.d(tag, “No. Trailing space to Add: ” + trailingSpaces);
Log.d(tag, “No. of Days in Previous Month: ” + daysInPrevMonth);

if (cal.isLeapYear(cal.get(Calendar.YEAR)))
if (mm == 2)
++daysInMonth;
else if (mm == 3)
++daysInPrevMonth;

// Trailing Month days
for (int i = 0; i < trailingSpaces; i++) {
Log.d(tag,
“PREV MONTH:= ”
+ prevMonth
+ ” => ”
+ getMonthAsString(prevMonth)
+ ” ”
+ String.valueOf((daysInPrevMonth
– trailingSpaces + DAY_OFFSET)
+ i));
list.add(String
.valueOf((daysInPrevMonth – trailingSpaces + DAY_OFFSET)
+ i)
+ “-GREY”
+ “-”
+ getMonthAsString(prevMonth)
+ “-”
+ prevYear);
}

// Current Month Days
for (int i = 1; i <= daysInMonth; i++) {
Log.d(currentMonthName, String.valueOf(i) + ” ”
+ getMonthAsString(currentMonth) + ” ” + yy);
if (i == getCurrentDayOfMonth()) {
list.add(String.valueOf(i) + “-BLUE” + “-”
+ getMonthAsString(currentMonth) + “-” + yy);
} else {
list.add(String.valueOf(i) + “-WHITE” + “-”
+ getMonthAsString(currentMonth) + “-” + yy);
}
}

// Leading Month days
for (int i = 0; i < list.size() % 7; i++) {
Log.d(tag, “NEXT MONTH:= ” + getMonthAsString(nextMonth));
list.add(String.valueOf(i + 1) + “-GREY” + “-”
+ getMonthAsString(nextMonth) + “-” + nextYear);
}
}

/**
* NOTE: YOU NEED TO IMPLEMENT THIS PART Given the YEAR, MONTH, retrieve
* ALL entries from a SQLite database for that month. Iterate over the
* List of All entries, and get the dateCreated, which is converted into
* day.
*
* @param year
* @param month
* @return
*/
private HashMap<String, Integer> findNumberOfEventsPerMonth(int year,
int month) {
HashMap<String, Integer> map = new HashMap<String, Integer>();

return map;
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
if (row == null) {
LayoutInflater inflater = (LayoutInflater) _context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(R.layout.screen_gridcell, parent, false);
}

// Get a reference to the Day gridcell
gridcell = (Button) row.findViewById(R.id.calendar_day_gridcell);
gridcell.setOnClickListener(this);

// ACCOUNT FOR SPACING

Log.d(tag, “Current Day: ” + getCurrentDayOfMonth());
String[] day_color = list.get(position).split(“-“);
String theday = day_color[0];
String themonth = day_color[2];
String theyear = day_color[3];
if ((!eventsPerMonthMap.isEmpty()) && (eventsPerMonthMap != null)) {
if (eventsPerMonthMap.containsKey(theday)) {
num_events_per_day = (TextView) row
.findViewById(R.id.num_events_per_day);
Integer numEvents = (Integer) eventsPerMonthMap.get(theday);
num_events_per_day.setText(numEvents.toString());
}
}

// Set the Day GridCell
gridcell.setText(theday);
gridcell.setTag(theday + “-” + themonth + “-” + theyear);
Log.d(tag, “Setting GridCell ” + theday + “-” + themonth + “-”
+ theyear);

if (day_color[1].equals(“GREY”)) {
gridcell.setTextColor(getResources()
.getColor(R.color.lightgray));
}
if (day_color[1].equals(“WHITE”)) {
gridcell.setTextColor(getResources().getColor(
R.color.lightgray02));
}
if (day_color[1].equals(“BLUE”)) {
gridcell.setTextColor(getResources().getColor(R.color.orrange));
}
return row;
}

@Override
public void onClick(View view) {
String date_month_year = (String) view.getTag();
selectedDayMonthYearButton.setText(“Selected: ” + date_month_year);
Log.e(“Selected date”, date_month_year);
try {
Date parsedDate = dateFormatter.parse(date_month_year);
Log.d(tag, “Parsed Date: ” + parsedDate.toString());

} catch (ParseException e) {
e.printStackTrace();
}
}

public int getCurrentDayOfMonth() {
return currentDayOfMonth;
}

private void setCurrentDayOfMonth(int currentDayOfMonth) {
this.currentDayOfMonth = currentDayOfMonth;
}

public void setCurrentWeekDay(int currentWeekDay) {
this.currentWeekDay = currentWeekDay;
}

public int getCurrentWeekDay() {
return currentWeekDay;
}
}
}

5. The final step is to  AndroidManifest.xml file. Open you AndroidManifest.xml file and modify the code as below

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
package=”com.test.androidcalender”
android:versionCode=”1″
android:versionName=”1.0″ >

<uses-sdk
android:minSdkVersion=”8″
android:targetSdkVersion=”16″ />

<application
android:allowBackup=”true”
android:icon=”@drawable/ic_launcher”
android:label=”@string/app_name”
android:theme=”@style/AppTheme” >
<activity
android:name=”com.test.androidcalender.MainActivity”
android:label=”@string/app_name” >
<intent-filter>
<action android:name=”android.intent.action.MAIN” />

<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
</application>

</manifest>

6. Finally run your project by right clicking on your project folder ⇒ Run As ⇒ 1 Android Application.

OutPutOutput