Introducing New Android Development Widgets
- Recipe: Displaying the Calendar in an Android Application
- Recipe: Displaying and Selecting Numbers Through NumberPicker
- Recipe: Creating a Stack of Images Using StackView
- Recipe: Displaying a List of Options Using ListPopupWindow
- Recipe: Suggesting Options Using PopupMenu
- Summary
Read The Android Tablet Developer’s Cookbook and more than 24,000 other books and videos on Safari Books Online. Start a free trial today.
This chapter is from the book
This chapter is from the book
This chapter is from the book
In this chapter, you are going to discover the new widgets that have become available since API 11 level. You will learn to display the calendar in the Android application through CalendarView and display a range of numbers through NumberPicker. You will also learn to display a stack of images using the StackView widget. Finally, you will learn to display a list of options using ListPopupWindow and display suggestions through PopupMenu.
Recipe: Displaying the Calendar in an Android Application
To display the calendar in an Android application, you will use CalendarView. This is a configurable widget that displays and selects dates. By default, the calendar of the current month is displayed, but you can scroll through to the desired date. To select a date, just tap on it.
To view a calendar, create an Android project called CalendarViewApp. The application will display a calendar of the current month by default. The user can scroll through the calendar to display dates of a particular month. After selecting a date, it will be displayed through Toast. The application will also contain a Button control that, when clicked, will display DatePickerDialog, allowing the user to display the calendar of the desired month.
Because your application needs a button and a calendar, you must define both Button and CalendarView in the activity layout file. After you define the Button and CalendarView, the activity layout file activity_calendar_view_app.xml will appear as shown in Listing 4.1.
Listing 4.1. Code Written in the Activity Layout File activity_calendar_view_app.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button android:id="@+id/date_picker_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Open Date Picker"
android:textSize="@dimen/text_size" />
<CalendarView
android:id="@+id/calendar_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
To access and identify Java code, the Button and CalendarView are assigned the ID, date_picker_button and calendar_view, respectively. Next, you need to write Java code to perform the following tasks:
- Display the CalendarView defined in the activity layout file.
- Associate an event listener, setOnClickListener, to the Button control to display DatePickerDialog.
- Associate OnDateSetListener to DatePickerDialog to display the calendar of the selected date through CalendarView.
- Associate an event listener to the CalendarView to display the selected date on the screen.
To accomplish the preceding tasks, you write code as shown in Listing 4.2 in the Java activity file CalendarViewAppActivity.java.
Listing 4.2. Code Written in the Java Activity File CalendarViewAppActivity.java
package com.androidtablet.calendarviewapp;
import android.os.Bundle;
import android.app.Activity;
import android.widget.CalendarView;
import android.widget.CalendarView.OnDateChangeListener;
import android.widget.Toast;
import java.util.Calendar;
import android.app.DatePickerDialog;
import android.widget.DatePicker;
import android.widget.Button;
import android.view.View;
import android.view.View.OnClickListener;
public class CalendarViewAppActivity extends Activity {
private CalendarView calendarView;
private int yr, mon, dy;
private Calendar selectedDate;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_calendar_view_app);
Calendar c = Calendar.getInstance();
yr = c.get(Calendar.YEAR);
mon = c.get(Calendar.MONTH);
dy = c.get(Calendar.DAY_OF_MONTH);
Button datePickerButton = (Button) findViewById(
R.id.date_picker_button);
calendarView = (CalendarView) findViewById(
R.id.calendar_view);
datePickerButton.setOnClickListener(new
OnClickListener() {
public void onClick(View v) {
new DatePickerDialog(CalendarViewAppActivity.
this, dateListener, yr, mon, dy).show();
}
});
calendarView.setOnDateChangeListener(new
OnDateChangeListener() {
@Override
public void onSelectedDayChange(CalendarView view,
int year, int month, int dayOfMonth) {
Toast.makeText(getApplicationContext(),"Selected
date is "+(month+1)+"-"+dayOfMonth+"-"+
year, Toast.LENGTH_SHORT). show();
}
});
}
private DatePickerDialog.OnDateSetListener dateListener =
new DatePickerDialog.OnDateSetListener() {
public void onDateSet(DatePicker view, int year, int
monthOfYear, int dayOfMonth){
selectedDate=Calendar.getInstance();
yr=year;
mon=monthOfYear;
dy=dayOfMonth;
selectedDate.set(yr, mon, dy);
calendarView.setDate(selectedDate.getTimeInMillis());
}
};
}
You can see in the preceding code that the CalendarView with ID calendar_view is accessed from the layout file and is mapped to the CalendarView object calendarView. Also, the Button control with ID date_picker_button is accessed from the layout file and is mapped to the Button object datePickerButton. setOnClickListener is associated to the Button control, and its callback method, onClick, executes when the Button is clicked. In the onClick callback method, DatePickerDialog is invoked to display the current date.
The OnDateSetListener is associated to the Date Picker dialog so that when any date is selected from the Date Picker dialog, the CalendarView is set to display the calendar of the selected month and year.
The setOnDateChangeListener is associated to the CalendarView. When any date is selected or changed in the CalendarView, the callback method onSelectedDayChange() is called. Using the onSelectedDayChange() method, you display the selected date through Toast. The thing to remember here is that the month is 0 based, so you must add 1 to it before displaying.
After running the application, you see the CalendarView displaying the calendar of the current month (see Figure 4.1 [top]). To see the calendar of the desired month, select the Open Date Picker button, which opens DatePickerDialog. From DatePickerDialog, you can select the date from the calendar (see Figure 4.1 [middle]). After selecting a date from DatePickerDialog and selecting Done, the calendar of the selected date will be displayed. Also, after you select a date from the CalendarView, it is displayed through Toast, as shown in Figure 4.1 (bottom).
)
Figure 4.1. CalendarView showing the calendar of the current month (top); DatePickerDialog opens after selecting the Open Date Picker button (middle); CalendarView displays the calendar of the date selected from DatePicker (bottom).