[Anleitung] Ein Digitaluhr Widget programmieren

Auf Wunsch (http://www.pocketpc.ch/android-allgemein/149462-digitale-uhr-sekundenanzeige-eigenen-schriftzeichen-erstellen.html) hier eine kurze Anleitung, wie man sich eine eigene digitale Uhr als Widget schreiben kann. Ich habe versucht, das Ganze so verständlich wie möglich zu halten, trotzdem jedoch ist ein klein wenig Programmieren nötig - ein Thema, welches man in einer kleinen Anleitung natürlich nicht bis in die Tiefe diskutieren kann.
Zudem habe ich irgendwie erst mitten beim Schreiben gemerkt, wie viel Aufwand sowas kleines eigentlich mit sich bringt. Deshalb habe ich dann bei den zwei grösseren Dateien auch darauf verzichtet, jedes Detail zu erklären, da dies den Umfang der Anleitung irgendwie sprengen würde. Auch kann ich recht schlecht einschätzen, wie anfängertauglich das ganze überhaupt geworden ist ohne unnötig aufgeblasen zu werden.. Hoffentlich habe ich einen gewissen Mittelweg getroffen ;).

Sollte also doch etwas unklar sein bzw. ich irgendwo einen Fehler gemacht habe (was auch sehr wahrscheinlich ist, da ich gewisse Dateien direkt hier noch editiert habe), dann meldet euch.

So, ich hoffe das hilft jemandem & viel Spass bei Programmieren.

Als Vorgeschmack; so könnte das dann zum Beispiel ausschauen:

Anhang 86525

Vorbereitung

Um für Android entwickeln zu können, müssen zuerst eine gescheite Java Entwicklungsumgebung (hier Eclipse), das ADT Plugin für Eclipse, das Java Development Kit sowie das Android Software Development Kit installiert werden. Das hört sich nach sehr viel an, geht aber recht schnell und muss nur ein einziges mal erledigt werden. Hier (http://developer.android.com/sdk/installing.html) findet ihr die Anleitung, wie ihr eure Umgebung für die Entwicklung vorbereiten könnt.

Neues Projekt

Als erstes erstellt ihr euch nun ein neues Projekt in Eclipse via File -> new -> Other... -> Android -> Android Project. Gebt nun als Projektnamen einen Namen eurer Wahl ein (zB. PocketPCUhr). Widgets wurden mit Android Version 1.5 eingeführt - Wählt als Build Target somit 1.5. Nun füllen wir noch die nötigen Properties aus. Bei ApplicationName geben wir nichts ein. Beim package wählt ihr einen persönlichen, möglichst einzigartigen Namen bestehend aus Text und Punkten. Üblich sind hier die eigene URL in umgekehrter Form. Zum Beispiel (ch.pocketpc.mobile.digitalclock). Entfernt den Hacken bei Create Activity (Denn eine Activity ist ein Teil eines Apps, welches angezeigt wird. Widgets haben sowas nicht, also brauchen wir das auch nicht.). Clickt auf finish.

Die XML Dateien

Im Package explorer seht ihr nun euer neu erstelltes Projekt. Wenn ihr die Anzeige nun via Doppelklick oder Klick auf den kleinen Pfeil expandiert, dann seht ihr die Datei AndroidManifest.xml. Jedes Android Projekt muss solch eine Datei beinhalten. Darin stehen Informationen, die das Betriebssystem über eure App wissen muss (Wie zum Beispiel den Namen, das zu verwendende Icon, die Berechtigungen, etc.). Öffnet sie via Doppelklick. Euch wird nun eine Übersicht über die Datei angezeigt. Wir wollen den Dateiinhalt aber direkt sehen - Klickt dazu auf AndroidManifest.xml am unteren Rand des neu geöffneten Fensters. Die Datei sollte nun inetwa so ausschauen:

HTML-Code:

---

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
  package="ch.pocketpc.mobile.digitalclock" 
  android:versionCode="1" 
  android:versionName="1.0">
  <application
    android:icon="@drawable/icon"
    android:label="@string/app_name">
  </application>
</manifest>

---

Das ist das Grundgerüst eines Manifests mit dem Package Namen, der aktuellen Version der App, dem zu verwendenden Icon sowie dem angezeigten Namen des Apps als externalisierten String (Das macht man so, damit man beispielsweise die angezeigte Sprache ändern kann, ohne am Code etwas ändern zu müssen).[SOURCE][/SOURCE]

Nun fügen wir noch einiges an; Einen Intent Receiver sowie Zusatzinformationen, die bei einem Widget benötigt werden. Intents sind eine Art Anweisungen, die gesendet und empfangen werden können. Wenn man beispielsweise ein Bild schiesst, dann bietet einem Android an, dieses mittels verschiedener Apps zu teilen; All diese Apps haben einen Intent receiver, der angibt, dass sie solche Bilder verarbeiten können. Auch für Widgets gibt es einen Intent, der vom System gesendet wird und ihm mitteilt, dass es sich updaten soll. Zusätzlich konfigurieren wir das ganze auch für einen eigenen Intent. Nämlich den, den wir jede Sekunde empfangen wollen, um die Zeit anzupassen.

Das Manifest sieht nun so aus:

HTML-Code:

---

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ch.pocketpc.mobile.digitalclock"
    android:versionCode="1"
    android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />
    <application android:icon="@drawable/icon">       
        <receiver android:name="ch.pocketpc.mobile.digitalclock.DigiClockWidgetProvider"   
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
                <action android:name="ch.pocketpc.mobile.digitalclock.SECONDS_UPDATE" />
            </intent-filter>
            <meta-data android:name="android.appwidget.provider"
                android:resource="@xml/digi_clock_info" />
        </receiver>
    </application>
</manifest>

---

In der im Manifest verlinkten Datei digi_clock_info geben wir nun an, wie gross das Widget sein soll und wie oft es den APPWIDGET_UPDATE Intent empfangen soll. Erstellt dazu im Ordner res einen Ordner xml und darin eine datei digi_clock_info.xml mit folgendem Inhalt:

HTML-Code:

---

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="294dp"
    android:minHeight="72dp"
    android:updatePeriodMillis="3600000">
</appwidget-provider>

---

Die Attribute minWidth und minHeight geben dabei die vom Widget mindestens geforderte Grösse in sogenannten density independent pixels an. Unterschiedliche Android Geräte können unterschiedlich grosse Rasterblöcke haben, ein Block ist jedoch im kleinsten Fall 74dip hoch und 74dip breit. Wenn wir unsere Uhr nun also 4 Blöcke breit und 1 Block hoch haben wollen, dann wählen wir 74 * 4 für die Breite und 74 * 1 für die Höhe. Von diesen Werten ziehen wir anschliessend 2dip ab, da Rundungsfehler auftreten können.
Für die updatePeriosMillis wählen wir irgendeine Zahl. Hier ist es wichtig zu verstehen, dass wir nicht 1000 (also die von uns benötigte Sekunde) wählen können, da Android solch kleine Werte nicht erlaubt. Aus genau diesem Grund haben wir im Manifest auch noch unseren eigenen Intent ch.pocketpc.mobile.digitalclock.SECONDS_UPDATE definiert. Ganz weglassen wollen wir die vom System gesendeten Updates jedoch auch nicht, denn sollte unser Timer durch irgendwelche Umstände abgeschossen worden sein, dann wird er spätestens nach 3600000 ms wieder gestartet und die Uhr läuft wieder!

Das Layout

Nun müssen wir definieren, wie das Widget ausschauen soll. Ich werde das File einfach posten, und nicht auf alle Einzelheiten eingehen. Bei Interesse gibts ja Google ;). Interessant ist vielleicht nur die Tatsache, dass die Bilder keine expliziten Grössenangaben in Pixeln haben. Dies hat den Einfachen Grund, damit die Uhr so skaliert, dass sie genau die Grösse verwendet, die Ihr in der vorherigen Datei digi_clock_info.xml angegeben habt. Sonst müsste man jedesmal mehrere Files bearbeiten, wenn man die Grössen ändern will - wäre ziemlich nervig. Erstellt nun also im Ordner layout die Datei main.xml mit folgendem Inhalt.

HTML-Code:

---

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout   
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/linear_layout_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true">
    <ImageView
        android:id="@+id/digit_one"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:src="@drawable/dig0">
    </ImageView>
    <ImageView
        android:id="@+id/digit_two"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:src="@drawable/dig0"
        android:layout_marginLeft="2dip">
    </ImageView>
    <ImageView
        android:id="@+id/dp_one"
        android:layout_width="0dip"
        android:layout_weight=".5"
        android:layout_height="fill_parent"
        android:src="@drawable/digdp"
      android:layout_marginLeft="2dip">
    </ImageView>
    <ImageView
        android:id="@+id/digit_three"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:src="@drawable/dig0"
        android:layout_marginLeft="2dip">
    </ImageView>
    <ImageView
        android:id="@+id/digit_four"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:src="@drawable/dig0"
        android:layout_marginLeft="2dip">
    </ImageView>
    <ImageView
        android:id="@+id/dp_two"
        android:layout_width="0dip"
        android:layout_weight=".5"
        android:layout_height="fill_parent"
        android:src="@drawable/digdp"
        android:layout_marginLeft="2dip">
    </ImageView>
    <ImageView
        android:id="@+id/digit_five"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:src="@drawable/dig0"
        android:layout_marginLeft="2dip">
    </ImageView>
    <ImageView
        android:id="@+id/digit_six"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:src="@drawable/dig0"
        android:layout_marginLeft="2dip">
    </ImageView>
</LinearLayout>
</RelativeLayout>

---

Ignoriert einfach die angezeigten Fehler - Das liegt daran, dass die Grafiken für die Ziffern noch Fehlen. Das kommt als nächstes (Und dann sind wir fast am Ende.. puh).

Die Grafikdateien

Erstellt nun die Grafiken für die Ziffern, die ihr verwenden wollt. Nennt sie dig0.png - dig9.png sowie digdp.png für den Doppelpunkt. Bei mir sind diese Ziffern 60px hoch und 40px breit. Der Doppelpunkt ist 60px hoch und 18 breit. Zieht diese Dateien anschliessend via Drag&Drop in den Ordner drawable-hdpi. Man könnte nun auch noch qualitativ schlechtere Versionen für Screens mit kleinerer Auflösung erstellen und diese in die Ordner ldpi und mdpi ziehen.. Aber das lassen wir weg. Wenn die einen fehlen, dann nimmt Android einfach die anderen und sklariert sie.

Wenn Ihr wollt, dann könnt ihr auch noch die bereits vorhandenen Grafikdateien icon.png durch eigene Versionen ersetzen. Dies ist das kleine Bildchen, welches euch angezeigt wird, wenn ihr das Widget im Menu auswählt.

Programmieren

Wir sind schon fast am Ziel. Nun müssen wir nur noch unseren Provider programmieren und dann wars das. Yay :).

Für den Provider erstellt ihr nun im Package ch.pocketpc.mobile.digitalclock eine neue Java Klasse via Rechtsklick -> New -> Class. In meinem Beispiel heisst diese Klasse DigiClockWidgetProvider. Sie muss genau so heissen, wie ihr es zuvor im Manifest definiert habt.

Anschliessend der benötigte Code. Mit ein wenig stöbern in einem Java Tutorial sollte das alles relativ schnell verständlich werden. Ansonsten kann man ja Fragen.

PHP-Code:

---

package ch.pocketpc.mobile.digitalclock;

import java.text.SimpleDateFormat;
import java.util.Date;
import android.app.AlarmManager;
import android.app.PendingIntent;
import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.widget.RemoteViews;


public class DigiClockWidgetProvider extends AppWidgetProvider {
    private AlarmManager mAlarmManager;
    private Intent mIntent;
    private PendingIntent mPendingIntent;
    private static final SimpleDateFormat dateStyle = new SimpleDateFormat("HHmmss");
    private static int[] mDigits = {
        R.drawable.dig0,
        R.drawable.dig1,
        R.drawable.dig2,
        R.drawable.dig3,
        R.drawable.dig4,
        R.drawable.dig5,
        R.drawable.dig6,
        R.drawable.dig7,
        R.drawable.dig8,
        R.drawable.dig9
    };
    
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {        
        super.onUpdate(context, appWidgetManager, appWidgetIds);
        //Log.v("", "onUpdate");
        if(mAlarmManager==null) {
            //Log.v(this.getClass().getName(), "Launching Clock Widget. Initiating...");
            mAlarmManager = (AlarmManager) context.getSystemService(context.ALARM_SERVICE);
            mIntent = new Intent();
            mIntent.setAction("ch.pocketpc.mobile.digitalclock.SECONDS_UPDATE");
            mPendingIntent = PendingIntent.getBroadcast(context, 0, mIntent, 0);
            mAlarmManager.setRepeating(AlarmManager.RTC, (long)0, (long)1000, mPendingIntent);
        }
    }
    
    @Override
    public void onReceive(Context context, Intent intent) {
        super.onReceive(context, intent);
        //Log.v("", "onReceive");
        Date date = new Date();
        String actualTime = dateStyle.format(date);
        int one = Integer.parseInt(""+actualTime.charAt(0));
        int two = Integer.parseInt(""+actualTime.charAt(1));
        int three = Integer.parseInt(""+actualTime.charAt(2));
        int four = Integer.parseInt(""+actualTime.charAt(3));
        int five = Integer.parseInt(""+actualTime.charAt(4));
        int six = Integer.parseInt(""+actualTime.charAt(5));
        RemoteViews rv = new RemoteViews(context.getPackageName(), R.layout.main);
        
        rv.setImageViewResource(R.id.digit_one, mDigits[one]);
        rv.setImageViewResource(R.id.digit_two, mDigits[two]);
        
        rv.setImageViewResource(R.id.digit_three, mDigits[three]);
        rv.setImageViewResource(R.id.digit_four, mDigits[four]);
        
        rv.setImageViewResource(R.id.digit_five, mDigits[five]);
        rv.setImageViewResource(R.id.digit_six, mDigits[six]);
        
        AppWidgetManager appWidgetManager = AppWidgetManager.getInstance(context);
        ComponentName thisWidget = new ComponentName(context, DigiClockWidgetProvider.class);
        appWidgetManager.updateAppWidget(thisWidget, rv);
    }
    
    @Override
    public void onDisabled(Context context) {
        super.onDisabled(context);
        //Log.v(this.toString(), "Widget removed. Disabling now.");
        AlarmManager alarmManager = (AlarmManager) context.getSystemService(context.ALARM_SERVICE);
        mIntent = new Intent();
        mIntent.setAction("ch.pocketpc.mobile.digitalclock.SECONDS_UPDATE");
        mPendingIntent = PendingIntent.getBroadcast(context, 0, mIntent, 0);
        alarmManager.cancel(mPendingIntent);        
    }
} 


---

Und das wars. Wenn nun alles geklappt hat, dann könnt ihr auf euer Projekt rechts klicken und Run As -> Android Application wählen. Sobald der Emulator gestartet wurde sollte euer Widget nun in der Widget Liste auftauchen und auch funktionieren. :)

Ich Danke dir Für deine Tolle Anleitung Werde mir die Tage Zeit nehmen und sie mir genauer an Schauen ;)

Gruss DonPascal

hi metter,

super anleitung...
vielen dank dafür.

habe jedoch ein problem...

die zeit aktualisiert sich bei mir nicht... steht immer die zeit drin in der ich das widget eingefügt habe...

eclipse spuckt keine fehler aus, nur warnings wie z.B.:


The static field Context.ALARM_SERVICE should be accessed in a static way DigiClockWidgetProvider.java

[Accessibility] Missing contentDescription attribute on image main.xml

This LinearLayout layout or its RelativeLayout parent is useless main.xml


hat jemand das selbe problem, oder kennt jmd. eine lösungsmöglichkeit ?


Gruß

dasheep

Hallo

Die drei Warnungen kannst du entweder ignorieren oder kurz beseitigen, ganz wie du willst. Keiner der Warnungen steht jedoch mit dem update Problem in Verbindung.

Should be accessed in a static way [...] kommt, weil ich im Code context.ALARM_SERVICE geschrieben habe. Ändere das einfach auf Context.ALARM_SERVICE, damit die Klasse, und nicht deren Instanz beschrieben wird.
Missing contentDescription attribute on image main.xml wird angezeigt, weil ebendiese fehlt. Einfach das Attribut android:contentDescription einfügen. Das ist ein Accessibility attribut und gehört zu den Dingen, die mir relativ egal waren für ein Tutorial ;).
This LinearLayout layout or its RelativeLayout parent is useless main.xml kommt, weil man das RelativeLayout entfernen könnte. Das war einfach noch drin, weil ich es zu Beginn noch gebraucht habe und dann in der Hitze des Gefechts übersehen habe, dass es nun nutzlos ist.

Zum eigentlichen Problem: Benutzt du einen TaskKiller, der eventuell den Alarm killt? Was anderes kommt mir grade nicht in den Sinn.

nein, habe soetwas nichteinmal installiert =)

habe das Galaxy Nexus mit 4.0.3 (CyanogenMod)...

die Originale Android Analog Uhr läuft einwandfrei...

kannst du mal das komplette eclipse projekt hochladen ? ich vermute ich habe beim übernehmen einen fehler gemacht... aber leider finde ich es nicht... =)


EDIT: / gerade soeben im AVD EMU getestet, dort das selbe problem.... =)

EDIT : // Fehler gefunden =) verweis zum provider hatte nen tippfehler =)

also.... funktioniert nun einwandfrei =) vielen dank....


Gruß

dasheep

Zitat:

---

EDIT : // Fehler gefunden =) verweis zum provider hatte nen tippfehler =)

---

Super. Ich hätte das Projekt nämlich eh nicht mehr gespeichert gehabt :)

ich bin dabei dies noch ein wenig zu erweitern... doch leider komme ich nicht weiter...

@metter : vielleicht kannst du mir ja unter die arme greifen =)


mein ziel ist es, durch klicken auf das widget das alarm/wecker app zu öffnen...

Code:

---

        String action = intent.getAction();
        if (AppWidgetManager.ACTION_APPWIDGET_UPDATE.equals(action))
        {
             
            RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.main);
           
            Intent AlarmClockIntent = new Intent(Intent.ACTION_MAIN).addCategory(Intent.CATEGORY_LAUNCHER).setComponent(new ComponentName("com.android.deskclock", "com.android.deskclock.AlarmClock"));
            PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, AlarmClockIntent, 0);
            views.setOnClickPendingIntent(R.id.linear_layout_main, pendingIntent);
                                   
            AppWidgetManager.getInstance(context).updateAppWidget(intent.getIntArrayExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS), views);
        }

---

damit funktioniert es bisher ganz gut, aber leider nur auf den android handys, die den com.android.deskclock package als alarm haben. es gibt (grad bei älteren android versionen) noch die package com.android.alarmclock

wie kann ich das nun versionsunabhängig machen ? also das es auf allen android versionen funktioniert...

soweit ich mich nun erkundigt habe, haben manche hersteller wie z.B. HTC ihre eigenen wecker die auch noch eine andere packagenamen haben.


viele grüße


dasheep

So eine Aktion würde man mit impliziten intents machen. Diese beinhalten kein package, sondern nur eine Aktion (wie zB. "öffne Uhr"). Meines Wissens gibt es für "die Uhr" keinen solchen impliziten intent -> Was du versuchst funktioniert somit nie korrekt und zuverlässig, sondern nur via hack. Mit Google findest du einige Ansätze. Aber eben, keiner davon ist gut.

Lass den User beim Erstellen (oder sonst wo in nem Konfigurations-Screen) seine Uhr/Wecker-App auswählen. Den Package Namen kannst du dann speichern und verwenden. Macht Fancy Widgets/Beautiful Widgets auch so. Ist meiner Meinung nach auch fast besser, weil es Leute gibt, die nicht den Standard-Wecker gibt.

Edit: 1'000er Post =D

@FireRider : gute Idee... so wird es wohl am besten sein...

ich werde mal schauen, das ich am wochenende ein wenig ausprobiere... jetzt unter woche habe ich leider keine zeit =)


viele grüße


dasheep

da meine programmierkentnisse noch sehr wenig sind, habe ich das nicht geschafft =)

ich habe es jetzt so umgesetzt, das je nach API-Level ne andere package genommen wird...

phones mit herstellerspezifischen alarm apps kann ich damit leider nicht berücksichtigen :(


Gruß dasheep

Trotzdem cool. Hast du noch einen Screenshot deiner Uhr? Nur aus Neugierde :)

habe das analoge aus dieser anleitung und nebenbei auch noch eine digitale uhr erstellt...

grafik lässt noch wünsche offen, habe die grafiken nur auf die schnelle gemacht... wichtig war mir erstmal die funktion der uhr selbst und das "onClick" event, das sich die Uhr app öffnet...

hier mal die zwei screens...

Anhang 91799Anhang 91800

als nächstes habe ich mir überlegt, ein einstellungsmenü einzubauen, worin sich eine preview des widgets befindet, und wo man dann verschiedene farben / Styles wählen kann...

ist bisher nur ein gedanke, habe mich damit noch nicht auseinander gesetzt =) wenn ich dies in angriff nehmen sollte, dann erst in ein paar wochen... habe z.Zt. noch für meine Prüfungen zu lernen...


Viele Grüße


dasheep

Also die digitale Version hat schon was :D Passt richtig zu ICS und deinem Hintergrund :)

Jap, die digitale sieht wirklich toll aus. Cool!

Finde ich auch, lade mal hoch :)

Gesendet von meinem HTC Sensation Z710e mit Tapatalk 2

Sehr gutes Tutorial, funktioniert auch tadellos. :D
Eine Frage hätte ich da aber noch.
Wie kann ich die Sekunden ausblenden?
Ich möchte sozusagen nur die Stunden und Minuten auf dem Widget haben.
Geht das?