Android Alarm Clock UI

Question

I am trying to figure out how the UI was designed for the Android Alarm Clock app. This appears to be using the Holo Dark Theme.

The screenshot included is the Create/Edit Alarm Activity screen. It looks similar to Android Settings. Is this case? Because the "Turn the alarm on" & "Vibrate" rows look like ChexboxPreferences. The "Ringtone" row looks like a RingtonePreference. What about the "Time" row?

As @eric mentioned in the comments to one of the answers below, I am trying to recreate a similar interface to the alarm clock app. I do not want to send an intent to start the Alarm Manager from my app.

What about the "Label" row? That functions a lot like an EditText view. Can you have a combination of Views and Preferences inside a PreferenceScreen xml tag?

Also the ActionBar has a vertical pipe, I am not sure how this was created but is the "Done" view an ImageButton?

I am not completely convinced that it is a combination of Preferences, since the Alarm app can have multiple alarms and not just one alarm. If there are multiple alarms and you don't use multiple SharedPreferences files, it would naturally make sense to create a content provider to store the information related to multiple alarms.

Pilothouse

hey pal do u have code for android alarmclock i want to integrate in my other app – Dorita

Answer 1

The stock alarm clock app is open source, so check it out by yourself.

Preference Layout see here:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
    android:title="@string/set_alarm">
    <CheckBoxPreference android:key="on" 
        android:title="@string/enable"/>
    <Preference android:key="time" 
        android:title="@string/time"/>
    <com.android.alarmclock.AlarmPreference
        android:key="alarm" 
        android:title="@string/alert"
        android:ringtoneType="alarm"
        android:showDefault="false"
        android:showSilent="false" />
    <CheckBoxPreference android:key="vibrate" 
        android:title="@string/alarm_vibrate"/>
    <com.android.alarmclock.RepeatPreference
        android:key="setRepeat" 
        android:title="@string/alarm_repeat" />
    <EditTextPreference android:key="label"
        android:title="@string/label"
        android:dialogTitle="@string/label" />
</PreferenceScreen>

Preference activity see here, note that, the links I referenced are not from the head revision.

Some highlights:

• Time is a plain android.preference.Preference, backed by TimePickerDialog.
• Ringtone is a customized implementation of android.preference.RingtonePreference.
• Repeat is a customized implementation of android.preference.ListPreference.
• Alarms are managed by a static class com.android.alarmclock.Alarms which use Content Providers store the actual information.
• Holo theme is used by default since Android 4.0, on other Android version, you may see different theme. Note that the app implementation may also changed by different android version or device vendor.

Asaasabi

hey pal do u have code for android alarmclock i want to integrate in my other app – Dorita

Answer 2

There is not a particular class for the time preference. Just create a simple Preference, and try to open a TimePickerDialog when the preference is clicked. Change the summary of the preference when time is changed.

Illuminism

Thanks @Illuminism for the info about the TimePickerDialog. I am aware of this Class and agree with you. But what about all of the other rows in the UI? Are they just all Preferences? – Pilothouse

@toobsco42. I think only RingtonePreference is special, the others are all Preference and ChexboxPreferences. – Illuminism

Ok that makes sense. What about the "Label" row? That functions a lot like an EditText view. Can you have a combination of Views and Preferences inside a PreferenceScreen xml tag? Also the ActionBar has a vertical pipe, I am not sure how this was created but is the "Done" view an ImageButton? – Pilothouse

In your word, the Label row is just like a EditTextPreference. In fact a Preferences is just two TextView(title & summary) with an icon, the layout is com.android.internal.R.layout.preference. You can do anything with it. You can use advanced preference like CheckBoxPreference or just create a class to extend Preference in case you have special needs. – Illuminism

But the "Label" row does not open a Dialog when clicked and instead moves the cursor there similar to an EditText view. – Pilothouse

I haven't notice this. But i think different version of os have different implementation to EditTextPreference. – Illuminism

Even if thats the case, that EditTextPreference behaves differently on different API levels, is this whole UI created without Preference views since there is only one SharedPreferences file but there could be multiple alarms? – Pilothouse