How can I create a custom dialog with two datepicker? - android

I just started to learn Android as a hobby and I would like to create a dialog with two datepicker
final Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.data_picker_dialog);
dialog.setTitle(R.string.date_period_picker);
dialog.show();
return true;
How can I get the selected values from the dialog? Is there a possibility to include the OK/Cancel button automatically on the dialog?
Is there a library which has such a functionality(Start and end date/period selection)?

It's probably best to read about Dialogs and Pickers first.
As for the implementation, you can have two buttons: One to show a date picker for the start date and another for the end date.
Edit: If you really want to show 2 date pickers in 1 dialog, here's an example of how to do it. First, create a custom XML layout.
/res/layout/custom_date_picker.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<DatePicker
android:id="#+id/dpStartDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:calendarViewShown="false" />
<DatePicker
android:id="#+id/dpEndDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:calendarViewShown="false" />
</LinearLayout>
Next is to use the above layout in a dialog:
// These variables will hold the date values later
private int startYear, startMonth, startDay, endYear, endMonth, endDay;
/**
* Displays the start and end date picker dialog
*/
public void showDatePicker() {
// Inflate your custom layout containing 2 DatePickers
LayoutInflater inflater = (LayoutInflater) getLayoutInflater();
View customView = inflater.inflate(R.layout.custom_date_picker, null);
// Define your date pickers
final DatePicker dpStartDate = (DatePicker) customView.findViewById(R.id.dpStartDate);
final DatePicker dpEndDate = (DatePicker) customView.findViewById(R.id.dpEndDate);
// Build the dialog
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setView(customView); // Set the view of the dialog to your custom layout
builder.setTitle("Select start and end date");
builder.setPositiveButton("OK", new DialogInterface.OnClickListener(){
#Override
public void onClick(DialogInterface dialog, int which) {
startYear = dpStartDate.getYear();
startMonth = dpStartDate.getMonth();
startDay = dpStartDate.getDayOfMonth();
endYear = dpEndDate.getYear();
endMonth = dpEndDate.getMonth();
endDay = dpEndDate.getDayOfMonth();
dialog.dismiss();
}});
// Create and show the dialog
builder.create().show();
}
Finally, you can show this dialog by simply calling showDatePicker().

Same for your layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<DatePicker
android:id="#+id/datePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<DatePicker
android:id="#+id/datePicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Just you want create date picker to your xml layout(data_picker_dialog).
And get data from your id

Related

DatePicker and TimePicker Android don't show year, month, day, hour and minute

I'm getting some problems with the control DatePicker and TimePicker for a device with this dimensions (400 x 800px) and Android 4.2.2.
Then, I show you the problem in this link:
http://imgur.com/X1PRVKX
Instead of appear the numbers for the date and time, it appears anything, only white spaces. In other devices with differents screen dimensions and versions works normally.
Thanks!!
This is my code for both
<DatePicker
android:id="#+id/dpFecha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dip" />
<TimePicker
android:id="#+id/tpHora"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
And JAVA; in this code I put Date and Time picker controls into a AlertDialog:
View tituloView = getLayoutInflater().inflate(R.layout.dtitle, null);
FrameLayout flTitulo = (FrameLayout) tituloView
.findViewById(R.id.flTitulo);
Builder bdialog = new AlertDialog.Builder(frmCitaInfo.this)
.setCustomTitle(tituloView).setView(
getLayoutInflater().inflate(R.layout.dcdatetime, null));
final AlertDialog dialog = bdialog.create();
dialog.setInverseBackgroundForced(true);
dialog.show();
final DatePicker dpFecha = (DatePicker) dialog
.findViewById(R.id.dpFecha);
final TimePicker tpHora = (TimePicker) dialog.findViewById(R.id.tpHora);

Android AlertDialog produces black text with black background

I am having an issue with a custom view in a dialog on android API 10.
I use AlertDialog.Builder to construct my dialog. I include a custom view panel using the setView command on the builder.
This works on most of the API's I've tested with. The style changes somewhat from device to device, but that is what I want, for the style to match the device default.
My problem is that on API 10, any text that is in my custom view shows up as black on a black background.
Any text I insert using AlertDialog.Builder.setMessage() appears correctly.
What magical attribute/style is the dialog builder using to determine text appearance?
My app's theme is Theme.AppCompat.Light.
Here is my onCreateDialog method:
public Dialog onCreateDialog(Bundle savedInstanceState) {
LayoutInflater inflater = getActivity().getLayoutInflater();
final View view = inflater.inflate(R.layout.fragment_status_dialog, null);
mStatusTextView = (TextView) view.findViewById(R.id.text_status);
mConnectedDeviceTextView = (TextView) view.findViewById(R.id.text_connected_device);
MainService.ServiceState state = null;
if (getArguments().containsKey(SERVICE_STATUS_ARG_KEY)) {
state = (MainService.ServiceState) getArguments().getSerializable(SERVICE_STATUS_ARG_KEY);
}
setState(state);
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
builder.setView(view);
builder.setMessage("This will show up just fine.");
builder.setTitle(getString(R.string.status_title));
builder.setNegativeButton(R.string.dialog_back_button_text, null);
builder.setNeutralButton(R.string.dialog_connect_to_text, new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialog, int which) {
mListener.onDialogConnectTo();
}
});
// Create the AlertDialog object and return it
return builder.create();
}
Here's my fragment_status_dialog layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="18dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/status_starting"
android:id="#+id/text_status"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/status_connected_to_unknown"
android:paddingStart="4dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:id="#+id/text_connected_device"
android:layout_toRightOf="#+id/text_status"
android:layout_toEndOf="#+id/text_status"/>
</RelativeLayout>
Note, I've tried https://stackoverflow.com/a/24505312/2350083 but it didn't fix it.
Try calling AlertDialog#setInverseBackgroundForced(true).
What about simply setting the color of the text? Ex:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white"
android:text="#string/status_starting"
android:id="#+id/text_status"/>
The TextView is using the default text color of the device (or the app). If you set the color specifically to the TextView it will be overriden on devices irrespective of the API.

Android Alert Dialog replace default blue with another color

I'm using a single choice alert dialog in which I'd like to replace the default blue (the title line and the radio buttons) to the orange that I am using in the title bar. I was able to change to the title bar using setCustomTitle(), but I am lost trying to get rid of this damn blue.
For the title bar
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/orange" >
<TextView
android:id="#+id/alertTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="14dp"
android:gravity="center"
android:text="Alert Title"
android:textColor="#color/white"
android:textSize="18sp" />
</LinearLayout>
Building the AlertDialog
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
View customTitle = View.inflate(MainActivity.this, R.layout.custom_alert_title, null);
builder.setCustomTitle(customTitle);
builder.setSingleChoiceItems(mAlertOptions, -1, new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialog, int which) {
// do stuff
dialog.dismiss();
}
}).create().show();
This is what it looks like
I need to get rid of this blue! Help!
The only way to change the title divider color is to use Resources.getIdentifier in combination with Window.findViewById. The checkmark can be easily changed by calling AlertDialog.Builder.setSingleChoiceItems(ListAdapter, int, OnClickListener).
Here's an example:
Single choice item layout
: I generated your_radio_button using Android Holo Colors.
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checkMark="#drawable/your_radio_button"
android:ellipsize="marquee"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:paddingEnd="16dip"
android:paddingStart="16dip"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="?android:attr/textColorAlertDialogListItem" />
Implementation
final ListAdapter adapter = new ArrayAdapter<String>(this,
R.layout.select_dialog_singlechoice, android.R.id.text1, new String[] {
"Option 1", "Option 2"
});
final AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setCustomTitle(getLayoutInflater().inflate(R.layout.custom_alert_title, null));
builder.setSingleChoiceItems(adapter, -1, new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialog, int which) {
// Do something
}
});
// Show the AlertDialog
final AlertDialog dialog = builder.show();
// Change the title divider
final Resources res = getResources();
final int titleDividerId = res.getIdentifier("titleDivider", "id", "android");
final View titleDivider = dialog.findViewById(titleDividerId);
titleDivider.setBackgroundColor(res.getColor(android.R.color.holo_orange_dark));
Results

How to use xml timepicker?

I have dialog button and timepicker created in the same xml code below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TimePicker
android:id="#+id/timePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout android:id="#+id/LinearLayout02" android:layout_height="wrap_content" android:layout_width="fill_parent">
<Button android:layout_height="wrap_content" android:id="#+id/dialog_ok" android:text="OK" android:layout_width="fill_parent" android:layout_weight="1"></Button>
<Button android:layout_height="wrap_content" android:text="Cancel" android:id="#+id/dialog_cancel" android:layout_width="fill_parent" android:layout_weight="1"></Button>
</LinearLayout>
</LinearLayout>
And then i created dialog in java code and also bring in the dialog and timepicker from xml code as showen below:
public void TimePickerDialog(){
final Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.sign_in_dialog);
/////////////////////updated code////////////////////
TimePicker timePicker1 = (TimePicker) findViewById(R.id.timePicker1);
timePicker1.setIs24HourView(true);
/////////////////////////////////
dialog.setTitle("Quick Mute");
//Allow the dialog to be cancelable
dialog.setCancelable(true);
// Here we add functionality to our dialog box's content. In this example it's the two buttons
//reference the button
Button okButton = (Button) dialog.findViewById(R.id.dialog_ok);
//Create a click listener
okButton.setOnClickListener(new OnClickListener() {
//override the onClick function to do something
public void onClick(View v) {
}
});
//reference the button
Button cancelButton = (Button) dialog.findViewById(R.id.dialog_cancel);
//Create a click listener
cancelButton.setOnClickListener(new OnClickListener() {
//override the onClick function to do something
public void onClick(View v) {
//Close the dialog</span>
dialog.dismiss();
}
});
//finally show the dialog
dialog.show();
}
The problem i have is how do i get access to the timepicker that was created in xml code so that i can make the timepicker 24 hour timepicker? ... and also how do i get the time from the timepicker that is in xml code?
Just like its usually done:
TimePicker timePicker = (TimePicker)dialog.findViewById(R.id.timePicker1);
and as usual this only works after dialog.setContentView is called. Then, to get the time picked, call:
timePicker.getCurrentHour();
timePicker.getCurrentMinute();
You can't set the 24 hours mode in the XML, use MyTimePicker.setIs24HourView(boolean) instead.
See this example on how to get the time.
These are the steps to get the instance of a TimePicker:
final Dialog mTimeDialog = new Dialog(this);
final RelativeLayout mTimeDialogView = (RelativeLayout)getLayoutInflater().inflate(R.layout.time_dialog, null);
final TimePicker mTimePicker = (TimePicker) mTimeDialogView.findViewById(R.id.TimePicker);
mTimePicker.setIs24HourView(true);

Android TimePicker looks cropped

I create a dialog box with TimePicker inside it. This works very well on portrait mode, however, once it is changed into landscape mode, the TimePicker minus button looks cropped.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time = " android:textSize="28dp"/>
<TimePicker android:id="#+id/PickTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/text1"
android:layout_alignLeft="#id/text1"/>
<Button android:id="#+id/StartStop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:layout_below="#id/text1"
android:layout_toRightOf="#id/PickTime"/>
</RelativeLayout>
My code for displaying the dialog box:
LayoutInflater factory;
factory = LayoutInflater.from(this);
View textEntryView = factory.inflate(R.layout.test, null);
AlertDialog dialog = new AlertDialog.Builder(this)
// .setTitle("Auto-Shutdown Setting")
.setView(textEntryView)
.setPositiveButton("Close", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {
dialog.cancel();
/* User clicked OK so do some stuff */
}
})
.create();
dialog.show();
TimePicker timePicker = (TimePicker) dialog.findViewById(R.id.PickTime);
timePicker.setIs24HourView(true);
timePicker.setCurrentHour(12);
timePicker.setCurrentMinute(15);
timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
// ...
}
});
Anyone knows why this is happening? Is it possible to customize the size of the dialog box (make it bigger)? Any other solution would be appreciated.
Edit by JJD:
Since I have a similar case with a combined date and time picker layout in a ScrollView I want to add screenshots here. #lwijono Please feel free to remove them if they do not show what you originally described. Or leave a comment and I will do so.

Categories

Resources