Here is a result of this tutorial:
This project is developed in Eclipse 4.2.0.
1. Make application interface:
The main layout of this app demo is very simple layout. It have one edit test, one button. When user touch on the button the DateTimePicket will show for choose the date and time, the result will be show on edit text. Here is some xml code to make main layout:
<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" >
<EditText android:id="@+id/edittext1"
android:hint="date and time"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/button1"
android:maxLines="1"
android:layout_alignParentLeft="true"
/>
<Button android:id="@+id/button1"
android:text="Choose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:onClick="button_click"
/>
</RelativeLayout>
To show the custom picker shown in picture above i created a dialog contains three buttons and a new custom view DateTimePicker. The xml file design for dialog is shown here:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/DateTimeDialog" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<DateTimePicker.DateTimePicker
android:id="@+id/DateTimePicker" android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<LinearLayout android:id="@+id/ControlButtons"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_below="@+id/DateTimePicker"
android:padding="5dip">
<Button android:id="@+id/SetDateTime" android:layout_width="0dip"
android:text="@android:string/ok" android:layout_weight="1"
android:layout_height="wrap_content" />
<Button android:id="@+id/ResetDateTime" android:layout_width="0dip"
android:text="Reset" android:layout_weight="1"
android:layout_height="wrap_content" />
<Button android:id="@+id/CancelDialog" android:layout_width="0dip"
android:text="@android:string/cancel" android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Finally, we need to create an interface for new DateTimePicker view. It simply has only some button and edit text. Here is all following xml codes to do that. Of course, you can make it better than me.
<?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="wrap_content" android:fitsSystemWindows="true"
android:padding="5dip" android:id="@+id/DateTimePicker">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAligned="true"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/month_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="@+id/month_plus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_up"/>
<EditText
android:id="@+id/month_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:focusable="false"
android:gravity="center"
android:singleLine="true"
android:textColor="#C0C0C0">
</EditText>
<Button
android:id="@+id/month_minus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_down"/>
</LinearLayout>
<LinearLayout
android:id="@+id/date_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="@+id/date_plus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_up" />
<EditText
android:id="@+id/date_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:gravity="center"
android:inputType="number"
android:textColor="#C0C0C0"
android:singleLine="true"/>
<Button
android:id="@+id/date_minus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_down"/>
</LinearLayout>
<LinearLayout
android:id="@+id/year_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="@+id/year_plus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_up"/>
<EditText
android:id="@+id/year_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:gravity="center"
android:inputType="number"
android:textColor="#C0C0C0"
android:singleLine="true"/>
<Button
android:id="@+id/year_minus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_down" />
</LinearLayout>
<LinearLayout
android:id="@+id/hour_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/hour_plus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_up"/>
<EditText
android:id="@+id/hour_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:gravity="center"
android:inputType="number"
android:textColor="#C0C0C0"
android:singleLine="true" >
</EditText>
<Button
android:id="@+id/hour_minus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_down"/>
</LinearLayout>
<LinearLayout
android:id="@+id/min_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/min_plus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_up"/>
<EditText
android:id="@+id/min_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:gravity="center"
android:inputType="number"
android:textColor="#C0C0C0"
android:singleLine="true"/>
<Button
android:id="@+id/min_minus"
android:layout_width="40dp"
android:layout_height="28dp"
android:background="@drawable/image_button_down"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
2. Time for java code:
The following code below implement when click on the button in main screen.
public void button_click(View view){
// Create the dialog
final Dialog mDateTimeDialog = new Dialog(this);
// Inflate the root layout
final RelativeLayout mDateTimeDialogView = (RelativeLayout) getLayoutInflater().inflate(R.layout.date_time_dialog, null);
// Grab widget instance
final DateTimePicker mDateTimePicker = (DateTimePicker) mDateTimeDialogView.findViewById(R.id.DateTimePicker);
mDateTimePicker.setDateChangedListener(this);
// Update demo edittext when the "OK" button is clicked
((Button) mDateTimeDialogView.findViewById(R.id.SetDateTime)).setOnClickListener(new OnClickListener() {
public void onClick(View v) {
mDateTimePicker.clearFocus();
// TODO Auto-generated method stub
String result_string = mDateTimePicker.getMonth() + "/" + String.valueOf(mDateTimePicker.getDay()) + "/" + String.valueOf(mDateTimePicker.getYear())
+ " " + String.valueOf(mDateTimePicker.getHour()) + ":" + String.valueOf(mDateTimePicker.getMinute());
edit_text.setText(result_string);
mDateTimeDialog.dismiss();
}
});
// Cancel the dialog when the "Cancel" button is clicked
((Button) mDateTimeDialogView.findViewById(R.id.CancelDialog)).setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
mDateTimeDialog.cancel();
}
});
// Reset Date and Time pickers when the "Reset" button is clicked
((Button) mDateTimeDialogView.findViewById(R.id.ResetDateTime)).setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
mDateTimePicker.reset();
}
});
// Setup TimePicker
// No title on the dialog window
mDateTimeDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
// Set the dialog content view
mDateTimeDialog.setContentView(mDateTimeDialogView);
// Display the dialog
mDateTimeDialog.show();
}
All we do in this function is create a new dialog, Inflate the root layout for that dialog then set OnClick Listener for three button in interface of dialog, finally we show diallog to the screen. When user click on one of three button, we must execute some task associate with each button. Exactly, cancel the dialog when the "Cancel" button is clicked, Reset Date and Time pickers when the "Reset" button is clicked and Update demo edittext when the "OK" button is clicked.
The most important thing is we declare a DateTimePicker object mDateTimePicker and use many methods are defined in the java class file like reset(), getDay(), getMonth() etc. The source code of DateTimePicker class available here.
3. DEMO
3.1. Run application
3.2. After click on the Choose button
3.3. click "OK" button on DateTimePicker Dialog
Reference: http://datetimepicker.googlecode.com/svn/trunk/
and
https://github.com/luminousman/DatePicker
PS: May be i make a lot of English grammar mistakes when create this tutorial cause my low level of English. Sorry about that.
0 Response to "How to create custom Date Time Picker in Android"
Post a Comment