Android date/time wheel picker

Question

How can I achieve this layout for a time picker (and also for a date picker)? The default layout is either a (very big) clock or a (not beautiful) spinner style time picker. I saw this in several apps but couldn't find how to achieve this look and feel.

Answer 1

For future reference for anyone that might need this, it is possible to achieve this time picker spinner by just choosing a TimePicker among the android widgets and then, on the xml file, type android:timePickerMode="spinner".

Your widget xml code should look like this:

<TimePicker
    android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:timePickerMode="spinner" />

My answer was based on the documentation.

Answer 2

Simplest way to achieve this in my view is since api level 21:

<?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:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="8dp">

    <TimePicker
        android:id="@+id/timePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:timePickerMode="spinner" />

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:calendarViewShown="false"
        android:datePickerMode="spinner" />

</LinearLayout>

You get this:

Answer 3

This example has three pickers: NumberPicker, DatePicker and TimerPicker.

https://github.com/rodrigobusata/android-pickers

or

Use only the sample without the library and override for Android default pickers.

Answer 4

You should note that this Dialog is a Fragment.

That said, the main idea will be this: When you need to launch this Date Picker, then you will show that fragment as an overlay of the current activity. This fragment has a date picked listener: an event that is launched when the user picks a date. Ok, everything easy until here. The hardest thing to understand will be the last one: Interaction between the fragment and the activity. What for? Because the Activity needs to know whick Date was selected. To achieve this the Fragment will have a public Interface that will be implemented by the activity.

Ok, let's see the code:

MyActivity.java

public class MyActivity extends FragmentActivity implements DatePickerFragment.FragmentInteraction{

    @Override
    public void onCreate(Bundle savedInstanceState){
        Button showDatePickerButton = (Button)findViewById(R.id.dateButton);
        showDatePickerButtonsetOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View arg0) {
                DialogFragment newFragment = new DatePickerFragment();
                newFragment.show(getSupportFragmentManager(), getString(R.string.datePickerTitle));
            }
        });
    }

    @Override
    public void doSomethingWithDate(int day, int month, int year) {
        Log.d("", "SELECTED DATE " + month + "/" + day  + "/" + year);
    }
}

DatePickerFragment.java

public class DatePickerFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener{

    private FragmentInteraction mListener;

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        mListener = (FragmentInteraction) activity;
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        //Show picker with actual date presetted
        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);

        // Create a new instance of DatePickerDialog and return it
        return new DatePickerDialog(getActivity(), this, year, month, day);
    }

    @Override
    public void onDateSet(DatePicker view, int anio, int mes, int dia) {
        mListener.doSomethingWithDate(dia, mes + 1, anio);
    }

    public interface FragmentInteraction{
        public void doSomethingWithDate(int dia, int mes, int anio);
    }
}

Answer 5

Simply add timepickermode in xml like this <TimePicker android:id="@+id/time" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:gravity="center" android:timePickerMode="spinner" android:text="TimePicker" android:textSize="18sp" android:textColor="@android:color/black" android:textStyle="bold"/>