Widgets das typische Widget-Layout verpassen

Seid gegrüßt Freunde der Nacht,

in meinem letzten Beitrag habe euch die Grundlagen für ein Widget gezeigt. Nun wollen wir das Widget auch wie ein Widget aussehen lassen. Das lässt sich mit wenigen Schritten bewerkstelligen.

Für dieses Tutorial werden Kenntnisse für das Erstellen eines Widget vorausgesetzt.

Erste notwendige Schritte:

• erstellt ein Projekt
• einen AppWidgetProvider
• die Konfigurations-XML (mit height:40dp und width:250dp)

Für die grafische Veränderung bemächtigen wir uns der Property style. Dort tragen wir den passenden WidgetStyle ein. Damit werden unsere Views schon das grobe Aussehen von den Widgets haben.

widget_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:background="@drawable/widget_background" >

    <TextView
        android:id="@+id/textView1"
        style="@android:style/Widget.TextView"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_margin="5dp"
        android:layout_marginLeft="10dp"
        android:text="Simple Widget"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageView
        android:id="@+id/imageView1"
        style="@android:style/Widget.ImageWell"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_margin="5dp"
        android:src="@drawable/ic_launcher" />

    <Button
        android:id="@+id/button1"
        style="@android:style/Widget.Button"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_margin="5dp"
        android:text="Drück mich!" />

</LinearLayout>

Damit haben wir drei verschiedene Views in einer Reihe. Den durchsichtigen Hintergrund ersetzen wir durch ein drawable. In meinem Fall ist es ein Shape, gezeichnet durch eine XML.

widget_background.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <stroke
        android:width="5dp"
        android:color="#00000000" />

    <gradient
        android:angle="45"
        android:endColor="#EE33B5E5"
        android:startColor="#EE0099CC" />

    <corners android:radius="5dp" />

</shape>


Die Farben habe ich aus Android-Design, die Ecken werden abgerundet und der Stroke ist in diesem Fall ein unsichbarer Rand. Damit sieht unser erstelltes Beispiel schon etwas bunt aus :)

Haltet euch beim Designen eures Widget an die Android-Design-Richtlinien. Ihr wissts ja, immer an den Kodex halten.

Ich verabschiede mich in den frühen Morgenstunden und wünsch euch viel Vergnügen beim Widget Designen.
Alexander Fink