Page 1 of 6
Pickers are important ways to get user input, but they have been through so many revisions that they lack simple documentation or guidelines how to use them. Working with Pickers - date, time or number - can be a confusing mess. Let's see if we can make it all seem logical.
Android Adventures With Android Studio
- Getting Started With Android Studio
- The Activity And The UI
- Building The UI and a Calculator App
- Basic Controls And Events
- Layout Containers
- UI Graphics A Deep Dive
- Menus & The Action Bar
- Menus, Context & Popup
- Beginning Bitmap Graphics
- Staying Alive! Lifecycle & State
- ListView And Adapters
- Using Android Studio (coming soon)
If you are interested in creating custom template also see:
Custom Projects In Android Studio
A picker is a "dial" that you can use to select one of a predetermined set of values. In this sense it is a lot like the Spinner covered in the previous installment, but one that has a more restricted set of choices. Android currently supports three Pickers for dates, times and general numbers.
Using A Picker
The first big confusion to clear up is that there are two ways to make use of a Picker - as a widget or as a dialog box.
Of the three well-known Pickers, the TimePicker and the DatePicker come as widgets and as dialog boxes. The NumberPicker is only supplied as a widget, but of course you can put it in a Dialog box if you want to.
In most cases you probably do want to create a Dialog box and in this case you need to use a DialogFragment to wrap the Dialog and manage its lifecycle. The only problem with this is that a Fragment is a complicated UI component and there are many situations where using the raw widget will do the job well enough.
In short it makes sense to first look at the underlying Picker widgets before we get round to looking at Dialogs and DialogFragments.
TimePicker is a very easy place to get started.
If you create a new Android project, called TimeAndDate and accept all of the defaults you can place a TimePicker on the design surface just like any other widget - no need to worry about Fragments or Dialogs.
You can find the TimePicker in the Date & Time section of the Toolbox where you will also find the DatePicker.
Place the TimePicker on the design surface and size and locate it as required.
In its default configuration it shows in the designer using the style AppCompat.Light.DarkActionBar and has an analog clock face and an input area that can be used to set the time by dragging the hands on the clock face:
Pickers are complex widgets that have multiple components each of which can change its appearance depending on how they are styled. We haven't covered styles and themes, this is for a slightly more advanced look at the UI.
The problem is that the appearance of the pickers depends on which version of Android you are targeting and how you are targeting them. There are a range of different themes you can select but they don't all work with all SDK/APIs.
For example the theme used for pre-API 14 looked like:
The post API 14 adopted the Holo theme and the picker looked like this:
Since the introduction of Material Design it has been easier to write a compatible app but only if you can accept the default look and use. If you really like the original "spinner" dials then it can take a lot of work to get what you want. Also it isn't easy to back port the new Material Design look to earlier than Lollipop. It can be done but you need to replace the widget code i.e. essentially make your own compatibility support code.
What follow is what you get if you don't struggle against the way things "just work".
What you can do is to switch off the new Material Design look and go back to the Holo look on all versions of Android.
All you have to do is find timePickerMode in the properties window and use the drop down list to select spinner or clock depending on the type you need. Again it is important to note that while the designer shows the old Android "spinner" form of the picker the actual runtime shows the Holo version.
So to sum up:
If you want to us pickers within a range of Android versions then the simplest solution is to use the compatibility library v7 appcompat which is included in your projects automatically by Android Studio. In this case the you can target the latest SDK - which at the time of writing is Android 6 Marshmallow API 23. (Note the MNC Previews didn't work with the pickers so upgrade to the latest API.) You can also expect your app to work with earlier APIs but with some differences.
In most cases you need to leave the default theme set to App Theme which isn't really a theme but a reference to a theme declared in styles.xml. By default this file contains the lines:
<!-- Base application theme. -->
<!-- Customize your theme here. -->
You can change the them in this file to anything you like but my advice is to restrict your choose to the AppCompat themes.
While on the subject of themes it is worth pointing out, but without going into much detail, that the theme drop down in the designer only changes how the designer displays the UI. If you want to change it in your app then you have to edit the styles.xml file.
If you stay with the AppCompat themes then the pickers will show differently according to the version of Android they are run on - without you having to do any additional work.
You can also see what your app will look like using the Android version drop down - although it has to be said that this doesn't work accurately and will often show a pre-Holo theme instead of a Holo theme. You can also use the Preview Android Versions command to see a side-by-side view of the way your UI looks: