Halb-Transparente Activity in Android erstellen

Inspiriert durch eine Frage auf codekicker.de habe ich versucht eine Activity zu erstellen, die sich halb-transparent über den Hintergrund legt. Das hat sich als knifflig herausgestellt, da die Doku an dieser Stelle knapp ist und die IDE zusätzlich einen kleinen Umweg verlangt. Im Folgenden beschreibe ich von Anfang an, wie ihr eine neue Activity erstellt und diese halb-transparent macht.

Ich beginne mit dem Erstellen eines neuen Projekts, in dem ich auch gleich eine Activity anlegen lasse. Bisher haben wir bloß ein HelloWorld, welches folgendermaßen aussieht:

Unsere Activity nach dem Erstellen

Eigenen Style definieren

Nun beginnt der spannende Teil. Wir definieren uns einen eigenen Style! Dafür legt ihr die Datei /res/values/style.xml in eurem Projekt an. Der Inhalt sieht so aus:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="wlami.semitransparent" parent="@android:style/Theme.Translucent">
        <item name="android:windowBackground">@color/wlami.transparent</item>
</style>
</resources>

Wichtig sind die Zeilen 3 und 4:

Zeile 3: Wir definieren einen eigenen Style, dem wir zunächst einen Namen geben. Außerdem geben wir an, dass wir unsere Eigenschaften gerne vom Style Theme.Translucent ergeben möchten. Dieser nimmt uns nämlich Arbeit ab und definiert bereits Transparenz. Wir wollen es aber etwas individueller gestalten.

Zeile 4: Nun kommt unsere Modifikation am Style. Wir definieren einen eigenen android:windowBackground. An dieser Stelle sollte eigentlich ein hexadezimaler ARGB-Wert stehen, meine IDE hat jedoch einen Fehler geworfen, sodass ich eine eigene Farbe anlegen musste. Diese heißt wlami.transparent und wird von uns im nächsten Schritt erstellt.

Eigene Farbe definieren

Nun müssen wir unsere Farbe definieren, die wir im vorangegangenen Schritt referenziert haben. Dafür legen wir die Datei /res/values/colors.xml an. Der Inhalt lautet:

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="wlami.transparent">#AA000000</color>
</resources>

Zeile 3: Wir geben einen Namen für unsere Farbe an und weisen dieser dann einen ARGB-Wert zu. Die ersten beiden Stellen der Farbe, also der Wert #AA, beschreiben die Transparenz der Farbe. Auf einer Skala von #00 (komplett durchsichtig) bis #FF (komplett undurchsichtig) könnt ihr wählen, was euch am besten gefällt. Die restlichen sechs Stellen repräsentieren einen normalen RGB-Wert, wie er auch bei CSS üblich ist. In diesem Beispiel habe ich Schwarz als Grundfarbe genommen. Ihr könnt beispielsweise auch ein halb-transparentes Rot mit der Farbe #80FF0000 darstellen.

Style der Activity zuweisen

Nun, da wir einen Style und eine eigene Farbe definiert haben, müssen wir unserer Activity sagen, dass sie unseren Style verwenden soll. Dies tun wir in der AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.wlami.android.halbtransparent"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="9" />
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name="com.wlami.android.halbtransparentActivity"
                  android:label="@string/app_name"
                  android:theme="@style/wlami.semitransparent">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Zeile 10: Unsere einzige Änderung besteht im Hinzufügen des anroid:theme Attributs zu unserer Activity-Definition. Dabei referenzieren wir unseren zuvor erstellen wlami.semitransparent-Style.

Das war es auch schon. Ihr könnt die App laufen lassen und solltet solch ein Ergebnis sehen können:

Endergebnis

Ihr seht, es ist im Grunde nicht schwer, allerdings musste ich mich durch den Prozess hangeln, bis es richtig funktioniert hat. Natürlich könnt ihr dem Style weitere Eigenschaften zuweisen, indem ihr die Titelleiste verbergt oder die Activity im Fullscreen-Modus startet. Dies folgt bei Bedarf in einem weiteren Beitrag.

Eine Übersicht mit anderen “Transparenz-Farben” seht ihr hier: