Diese Seite wurde von der Cloud Translation API übersetzt.

Grundlagen von Android und Kotlin 10.3: Design für alle

Dieses Codelab ist Teil des Kurses „Grundlagen von Android und Kotlin“. Sie können diesen Kurs am besten nutzen, wenn Sie die Codelabs der Reihe nach durcharbeiten. Alle Codelabs des Kurses sind auf der Landingpage für Codelabs zu den Grundlagen von Android und Kotlin aufgeführt.

Einführung

Es ist sinnvoll, eine App so zu gestalten, dass sie von möglichst vielen Nutzern verwendet werden kann – ganz gleich, ob Sie sie zum Spaß oder für geschäftliche Zwecke entwickeln. Dazu gibt es mehrere Dimensionen.

Unterstützung von RTL-Sprachen: In europäischen und vielen anderen Sprachen wird von links nach rechts gelesen. Apps, die für diese Gebietsschemas entwickelt wurden, sind in der Regel für diese Sprachen optimiert. Viele andere Sprachen mit einer großen Anzahl von Sprechern werden von rechts nach links gelesen, z. B. Arabisch. Wenn Sie Ihre App für linksläufige Sprachen optimieren, können Sie Ihre potenzielle Zielgruppe vergrößern.
Auf Barrierefreiheit prüfen: Es ist riskant, nur zu vermuten, wie andere Ihre App nutzen. Die App Accessibility Scanner analysiert Ihre App und zeigt Ihnen, wo Sie die Barrierefreiheit verbessern können.
Inhaltsbeschreibungen für TalkBack Sehbehinderungen sind häufiger als man denkt und viele Nutzer, nicht nur blinde, verwenden einen Screenreader. Inhaltsbeschreibungen sind Formulierungen, die ein Screenreader vorliest, wenn ein Nutzer mit einem Element auf dem Bildschirm interagiert.
Nachtmodus unterstützen: Bei vielen sehbehinderten Nutzern wird durch das Ändern der Bildschirmfarben der Kontrast verbessert, sodass sie Ihre App besser nutzen können. Android bietet eine einfache Möglichkeit, den Nachtmodus zu unterstützen. Sie sollten den Nachtmodus immer unterstützen, um Nutzern eine einfache Alternative zu den Standardbildschirmfarben zu bieten.

In diesem Codelab sehen Sie sich die einzelnen Optionen an und fügen Unterstützung dafür in die GDG Finder App ein.

Außerdem erfahren Sie, wie Sie Chips in Ihrer Android-App verwenden können, um sie interessanter zu gestalten und gleichzeitig die Barrierefreiheit zu gewährleisten.

Was Sie bereits wissen sollten

Sie sollten mit Folgendem vertraut sein:

So erstellen Sie Apps mit Aktivitäten und Fragmenten und navigieren zwischen Fragmenten, wobei Daten übergeben werden.
Ansichten und Ansichtsgruppen zum Gestalten einer Benutzeroberfläche verwenden, insbesondere RecyclerView.
Verwendung von Architekturkomponenten, einschließlich ViewModel, mit der empfohlenen Architektur zum Erstellen einer gut strukturierten und effizienten App.
Datenbindung, Coroutinen und Verarbeitung von Mausklicks.
So stellen Sie eine Verbindung zum Internet her und speichern Daten lokal in einer Room-Datenbank im Cache.
Wie Sie Ansichtseigenschaften festlegen und Ressourcen in XML-Ressourcendateien extrahieren und verwenden.
Hier erfahren Sie, wie Sie das Erscheinungsbild Ihrer App mit Stilen und Themes anpassen können.
Verwendung von Material-Komponenten, Dimensionsressourcen und benutzerdefinierten Farben.

Lerninhalte

So machen Sie Ihre App für möglichst viele Nutzer zugänglich.
So machen Sie Ihre App für rechtsläufige Sprachen (RTL) fit.
So bewerten Sie die Barrierefreiheit Ihrer App.
So verwenden Sie Inhaltsbeschreibungen, damit Ihre App besser mit Screenreadern funktioniert.
Chips verwenden
So funktioniert Ihre App mit dem dunklen Modus.

Aufgaben

Eine vorhandene App bewerten und erweitern, um die Barrierefreiheit zu verbessern, indem sie für RTL-Sprachen optimiert wird.
Scannen Sie Ihre App, um herauszufinden, wo die Barrierefreiheit verbessert werden könnte.
Verwenden Sie Inhaltsbeschreibungen für Bilder.
Informationen zum Verwenden von Drawables
Fügen Sie Ihrer App die Möglichkeit hinzu, den Nachtmodus zu verwenden.

Die GDG-Finder-Starter-App basiert auf allem, was Sie bisher in diesem Kurs gelernt haben.

Die App verwendet ConstraintLayout, um drei Bildschirme zu gestalten. Zwei der Bildschirme sind nur Layoutdateien, mit denen Sie Farben und Text in Android untersuchen können.

Auf dem dritten Bildschirm ist eine GDG-Suchfunktion zu sehen. GDGs (Google Developer Groups) sind Communitys von Entwicklern, die sich auf Google-Technologien wie Android konzentrieren. GDGs auf der ganzen Welt veranstalten Meetups, Konferenzen, Study Jams und andere Events.

Während Sie diese App entwickeln, arbeiten Sie mit der tatsächlichen Liste der GDGs. Auf dem Finder-Bildschirm wird der Standort des Geräts verwendet, um die GDGs nach Entfernung zu sortieren.

Wenn Sie Glück haben und es in Ihrer Region eine GDG gibt, können Sie sich auf der Website informieren und sich für die Veranstaltungen anmelden. GDG-Veranstaltungen sind eine gute Möglichkeit, andere Android-Entwickler kennenzulernen und Best Practices der Branche zu lernen, die in diesem Kurs nicht behandelt wurden.

Die Screenshots unten zeigen, wie sich Ihre App im Laufe dieses Codelabs verändert.

Der Hauptunterschied zwischen links-nach-rechts- (LTR) und rechts-nach-links-Sprachen (RTL) ist die Richtung des angezeigten Inhalts. Wenn die Leserichtung der Benutzeroberfläche von LTR zu RTL (oder umgekehrt) geändert wird, spricht man oft von Spiegelung. Die Spiegelung betrifft den Großteil des Bildschirms, einschließlich Text, Textfeldsymbole, Layouts und Symbole mit Richtungsangaben (z. B. Pfeile). Andere Elemente werden nicht gespiegelt, z. B. Zahlen (Uhr, Telefonnummern), Symbole ohne Richtung (Flugmodus, WLAN), Wiedergabesteuerelemente und die meisten Diagramme.

Sprachen, die die RTL-Textrichtung verwenden, werden von mehr als einer Milliarde Menschen weltweit gesprochen. Android-Entwickler gibt es auf der ganzen Welt. Daher muss eine GDG Finder-App RTL-Sprachen unterstützen.

Schritt 1: Unterstützung für RTL hinzufügen

In diesem Schritt sorgen Sie dafür, dass die GDG Finder App mit RTL-Sprachen funktioniert.

Laden Sie die App GDGFinderMaterial herunter und führen Sie sie aus. Sie ist die Starter-App für dieses Codelab. Alternativ können Sie auch mit dem finalen Code des vorherigen Codelabs fortfahren.
Öffnen Sie das Android-Manifest.
Fügen Sie im Abschnitt <application> den folgenden Code hinzu, um anzugeben, dass die App RTL unterstützt.

<application
        ...
        android:supportsRtl="true">

Öffnen Sie activity_main.xml auf dem Tab Design.
Wählen Sie im Drop-down-Menü Sprache für die Vorschau die Option Vorschau von rechts nach links aus. Wenn Sie dieses Menü nicht finden, machen Sie den Bereich breiter oder schließen Sie den Bereich Attribute.

In der Vorschau sehen Sie, dass die Kopfzeile „GDG Finder“ nach rechts verschoben wurde. Der Rest des Bildschirms bleibt weitgehend unverändert. Insgesamt ist dieser Bildschirm in Ordnung. Die Ausrichtung in der Textansicht ist jetzt jedoch falsch, da sie links statt rechts ausgerichtet ist.

Damit das auf Ihrem Gerät funktioniert, wählen Sie in den Einstellungen Ihres Geräts oder Emulators unter Entwickleroptionen die Option RTL-Layout erzwingen aus. Wenn Sie die Entwickleroptionen aktivieren müssen, suchen Sie die Build-Nummer und klicken Sie darauf, bis Sie eine Benachrichtigung erhalten, dass Sie Entwickler sind. Dies variiert je nach Gerät und Android-Version.)

Führen Sie die App aus und prüfen Sie auf dem Gerät, ob der Hauptbildschirm genauso aussieht wie in der Vorschau. Die Schaltfläche „+“ befindet sich jetzt links und das Dreistrich-Menü rechts.
Öffnen Sie in der App die Navigationsleiste und rufen Sie den Bildschirm Suchen auf. Wie unten zu sehen ist, befinden sich die Symbole weiterhin auf der linken Seite und es ist kein Text sichtbar. Der Text befindet sich links neben dem Symbol und ist nicht auf dem Bildschirm zu sehen. Das liegt daran, dass im Code in den Ansichtseigenschaften und Layoutbeschränkungen auf den linken und rechten Bildschirmrand verwiesen wird.

Schritt 2: „start“ und „end“ anstelle von „left“ und „right“ verwenden

„Links“ und „rechts“ auf dem Bildschirm (wenn Sie auf den Bildschirm schauen) ändern sich nicht, auch wenn sich die Richtung des Textes ändert. Mit layout_constraintLeft_toLeftOf wird beispielsweise die linke Seite des Elements immer an der linken Seite des Bildschirms ausgerichtet. Im Fall Ihrer App ist der Text bei RTL-Sprachen nicht auf dem Bildschirm zu sehen, wie im Screenshot oben zu sehen ist.

Um das Problem zu beheben, verwenden Sie anstelle von „links“ und „rechts“ die Begriffe Start und End. Diese Terminologie legt den Anfang und das Ende des Texts entsprechend der Textrichtung in der aktuellen Sprache fest, sodass Ränder und Layouts an den richtigen Stellen auf den Bildschirmen angezeigt werden.

Open list_item.xml.
Ersetzen Sie alle Verweise auf Left und Right durch Verweise auf Start und End.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

Ersetzen Sie layout_marginLeft von ImageView durch layout_marginStart. Dadurch wird der Rand an die richtige Stelle verschoben, sodass das Symbol nicht mehr am Bildschirmrand angezeigt wird.

<ImageView
android:layout_marginStart="
?

Öffnen Sie fragment_gdg_list.xml. Sehen Sie sich die Liste der GDGs im Bereich Vorschau an. Das Symbol zeigt immer noch in die falsche Richtung, da es gespiegelt ist. Wenn das Symbol nicht gespiegelt ist, sehen Sie sich die Vorschau von rechts nach links an. Gemäß den Material Design-Richtlinien sollten Symbole nicht gespiegelt werden.
Öffnen Sie res/drawable/ic_gdg.xml.
Suchen Sie in der ersten Zeile des XML-Codes nach android:autoMirrored="true" und löschen Sie diesen Code, um die Spiegelung zu deaktivieren.
Sehen Sie sich die Vorschau an oder führen Sie die App noch einmal aus und öffnen Sie den Bildschirm „GDG durchsuchen“. Das Layout sollte jetzt wieder korrekt sein.

Schritt 3: Android Studio die Arbeit überlassen

In der vorherigen Übung haben Sie die ersten Schritte zur Unterstützung von RTL-Sprachen unternommen. Glücklicherweise kann Android Studio Ihre App scannen und viele Grundlagen für Sie einrichten.

Ändern Sie in list_item.xml im TextView layout_marginStart wieder in layout_marginLeft, damit der Scanner etwas findet.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

Wählen Sie in Android Studio Refactor > Add RTL support where possible (Refaktorieren > RTL-Unterstützung hinzufügen, falls möglich) aus und setzen Sie die Häkchen, um das Manifest und die Layoutdateien zu aktualisieren, damit die Eigenschaften „start“ und „end“ verwendet werden.

Suchen Sie im Bereich Refactoring Preview nach dem Ordner app und maximieren Sie ihn, bis alle Details angezeigt werden.
Im App-Ordner wird die layout_marginLeft, die Sie gerade geändert haben, als Code aufgeführt, der refaktoriert werden muss.

Beachten Sie, dass in der Vorschau auch System- und Bibliotheksdateien aufgeführt werden. Klicken Sie mit der rechten Maustaste auf layout, layout-watch-v20 und alle anderen Ordner, die nicht Teil von app sind, und wählen Sie im Kontextmenü Ausschließen aus.

Führen Sie das Refactoring jetzt durch. Wenn ein Pop-up-Fenster zu Systemdateien angezeigt wird, müssen Sie alle Ordner ausschließen, die nicht Teil des App-Codes sind.

Beachten Sie, dass layout_marginLeft wieder in layout_marginStart geändert wurde.

Schritt 3: Ordner für Gebietsschemas durchsuchen

Bisher haben Sie nur die Richtung der Standardsprache für die App geändert. Bei einer Produktions-App würden Sie die Datei strings.xml an einen Übersetzer senden, damit sie in eine neue Sprache übersetzt wird. Für dieses Codelab enthält die App eine strings.xml-Datei auf Spanisch. Die Übersetzungen wurden mit Google Übersetzer generiert und sind daher nicht perfekt.

Wechseln Sie in Android Studio zur Projektansicht Projektdateien.
Maximieren Sie den Ordner res. Sie sehen Ordner für res/values und res/values-es. Das „es“ im Ordnernamen ist der Sprachcode für Spanisch. Die Ordner values-"Sprachcode" enthalten Werte für jede unterstützte Sprache. Der Ordner values ohne Erweiterung enthält die Standardressourcen, die ansonsten angewendet werden.

Öffnen Sie in values-es die Datei strings.xml. Alle Strings sind auf Spanisch.
Öffnen Sie in Android Studio activity_main.xml auf dem Tab Design.
Wählen Sie im Drop-down-Menü Sprache für die Vorschau die Option Spanisch aus. Ihr Text sollte jetzt auf Spanisch sein.

[Optional] Wenn Sie eine RTL-Sprache beherrschen, erstellen Sie einen values-Ordner und eine strings.xml in dieser Sprache und testen Sie, wie sie auf Ihrem Gerät angezeigt wird.
[Optional] Ändern Sie die Spracheinstellungen auf Ihrem Gerät und führen Sie die App aus. Achten Sie darauf, dass Sie Ihr Gerät nicht auf eine Sprache umstellen, die Sie nicht lesen können, da es dann etwas schwierig wird, die Änderung rückgängig zu machen.

In der vorherigen Aufgabe haben Sie Ihre App manuell geändert und dann mit Android Studio nach weiteren Verbesserungen für die RTL-Unterstützung gesucht.

Die Accessibility Scanner App ist Ihr bester Verbündeter, wenn es darum geht, Ihre App barrierefrei zu gestalten. Die App wird auf Ihrem Zielgerät gescannt und es werden Verbesserungsvorschläge gemacht, z. B. zum Vergrößern von Berührungszielen, zum Erhöhen des Kontrasts und zum Bereitstellen von Beschreibungen für Bilder, um die Barrierefreiheit Ihrer App zu verbessern. Der Accessibility Scanner wird von Google entwickelt und kann im Play Store installiert werden.

Schritt 1: Accessibility Scanner installieren und ausführen

Öffnen Sie den Play Store und melden Sie sich bei Bedarf an. Das ist auf Ihrem physischen Gerät oder im Emulator möglich. In diesem Codelab wird der Emulator verwendet.

Suchen Sie im Play Store nach Accessibility Scanner von Google LLC. Achten Sie darauf, dass Sie die richtige App von Google herunterladen, da für das Scannen viele Berechtigungen erforderlich sind.

Installieren Sie den Scanner auf dem Emulator.
Klicken Sie nach der Installation auf Öffnen.
Klicken Sie auf Jetzt starten.
Klicken Sie auf OK, um die Einrichtung des Accessibility Scanners in den Einstellungen zu starten.

Klicken Sie auf den Accessibility Scanner, um zu den Bedienungshilfen des Geräts zu gelangen.

Klicken Sie auf Dienst verwenden, um ihn zu aktivieren.

Folgen Sie der Anleitung auf dem Bildschirm und erteilen Sie alle Berechtigungen.
Klicken Sie dann auf OK, verstanden und kehren Sie zum Startbildschirm zurück. Möglicherweise sehen Sie auf dem Bildschirm eine blaue Schaltfläche mit einem Häkchen. Wenn Sie auf diese Schaltfläche klicken, wird die App im Vordergrund getestet. Sie können die Schaltfläche neu positionieren, indem Sie sie ziehen. Diese Schaltfläche wird über allen Apps angezeigt, sodass Sie den Test jederzeit starten können.

Öffnen oder starten Sie die App.
Klicken Sie auf die blaue Schaltfläche und akzeptieren Sie zusätzliche Sicherheitswarnungen und Berechtigungen.

Wenn Sie zum ersten Mal auf das Symbol für den Accessibility Scanner klicken, werden Sie von der App um die Berechtigung gebeten, alles auf Ihrem Bildschirm zu sehen. Das ist eine sehr beunruhigende Berechtigung – und das ist sie auch.

Sie sollten eine solche Berechtigung fast nie erteilen, da Apps damit Ihre E-Mails lesen oder sogar Ihre Bankverbindung abrufen können. Damit Accessibility Scanner seine Arbeit erledigen kann, muss er Ihre App so untersuchen, wie ein Nutzer es tun würde. Deshalb ist diese Berechtigung erforderlich.

Klicken Sie auf die blaue Schaltfläche und warten Sie, bis die Analyse abgeschlossen ist. Sie sehen dann etwas Ähnliches wie im Screenshot unten, wobei der Titel und der schwebende Aktionsbutton rot umrandet sind. Das bedeutet, dass es auf diesem Bildschirm zwei Vorschläge zur Verbesserung der Barrierefreiheit gibt.

Klicken Sie auf das Feld um GDG Finder. Dadurch wird ein Bereich mit zusätzlichen Informationen geöffnet, wie unten dargestellt. Dort werden Probleme mit dem Bildkontrast angezeigt.
Erweitern Sie die Informationen zum Bildkontrast. Das Tool schlägt dann Korrekturen vor.
Klicken Sie auf die Pfeile rechts, um Informationen zum nächsten Element zu erhalten.

Rufen Sie in Ihrer App den Bildschirm Apply for GDG auf und scannen Sie ihn mit der Accessibility Scanner App. Dadurch erhalten Sie einige Vorschläge, wie unten links zu sehen ist. Genau 12. Einige davon sind Duplikate ähnlicher Artikel.
Klicken Sie in der unteren Symbolleiste auf das Symbol für „Stapel“ , um eine Liste aller Vorschläge aufzurufen (siehe Screenshot rechts unten). In diesem Codelab werden alle diese Probleme behandelt.

Die Android Accessibility Suite, eine Sammlung von Apps von Google, enthält Tools, mit denen Apps barrierefreier gestaltet werden können. Dazu gehört das Tool TalkBack. TalkBack ist ein Screenreader, der akustisches, haptisches und gesprochenes Feedback bietet. So können Nutzer Inhalte auf ihren Geräten abrufen und sich auf ihnen bewegen, ohne auf den Bildschirm zu sehen.

Es hat sich herausgestellt, dass TalkBack nicht nur von Blinden, sondern auch von vielen Menschen mit Sehbeeinträchtigungen verwendet wird. Oder Nutzer, die einfach nur ihre Augen ausruhen möchten.

Barrierefreiheit ist also für alle da. In dieser Aufgabe probieren Sie TalkBack aus und aktualisieren Ihre App, damit sie gut damit funktioniert.

Schritt 1: Accessibility Suite installieren und ausführen

TalkBack ist auf vielen physischen Geräten vorinstalliert. Auf einem Emulator müssen Sie es jedoch installieren.

Öffnen Sie den Play Store.
Suchen Sie nach der Accessibility Suite. Prüfen Sie, ob es sich um die richtige App von Google handelt.
Wenn sie nicht installiert ist, installieren Sie die Accessibility Suite.
Wenn Sie TalkBack auf dem Gerät aktivieren möchten, rufen Sie die Einstellungen > Bedienungshilfen auf und aktivieren Sie TalkBack, indem Sie Dienst aktivieren auswählen. Wie der Accessibility Scanner benötigt TalkBack Berechtigungen, um den Inhalt auf dem Bildschirm lesen zu können. Nachdem Sie die Berechtigungsanfragen akzeptiert haben, werden Sie von TalkBack mit einer Liste von Anleitungen begrüßt, in denen Sie erfahren, wie Sie TalkBack effektiv nutzen können.
Halten Sie hier an und sehen Sie sich die Tutorials an, wenn auch nur, um zu erfahren, wie Sie TalkBack wieder deaktivieren.
Wenn Sie das Tutorial beenden möchten, klicken Sie auf die Schaltfläche „Zurück“ und wählen Sie sie aus. Tippen Sie dann irgendwo auf dem Display doppelt.

GDG Finder App mit TalkBack verwenden Achten Sie auf Stellen, an denen TalkBack keine nützlichen Informationen zum Bildschirm oder zu einem Steuerelement liefert. Sie werden das Problem in der nächsten Übung beheben.

Schritt 2: Inhaltsbeschreibung hinzufügen

Inhaltsdeskriptoren sind beschreibende Labels, die die Bedeutung von Aufrufen erläutern. Die meisten Ihrer Ansichten sollten Inhaltsbeschreibungen haben.

Rufen Sie mit der GDG Finder App und aktiviertem Talkback den Bildschirm Apply to run GDG (GDG-Gruppe beantragen) auf.
Ich tippe auf das Hauptbild … und nichts passiert.
Öffnen Sie add_gdg_fragment.xml.
Fügen Sie in ImageView ein Attribut für die Inhaltsbeschreibung wie unten gezeigt hinzu. Der String stage_image_description wird in strings.xml bereitgestellt.

android:contentDescription="@string/stage_image_description"

Führen Sie die App aus.
Rufen Sie Apply to run GDG auf und klicken Sie auf das Bild. Sie sollten jetzt eine kurze Beschreibung des Bildes hören.
[Optional] Fügen Sie Inhaltsbeschreibungen für die anderen Bilder in dieser App hinzu. In einer Produktions-App müssen alle Bilder Inhaltsbeschreibungen haben.

Schritt 3: Hinweistext für bearbeitbare Textfelder hinzufügen

Bei bearbeitbaren Elementen wie EditText können Sie android:hint im XML verwenden, um Nutzern zu helfen, herauszufinden, was sie eingeben sollen. Ein Hinweis wird immer in der Benutzeroberfläche angezeigt, da er der Standardtext in einem Eingabefeld ist.

Sie befinden sich nach wie vor in add_gdg_fragment.xml.
Fügen Sie Inhaltsbeschreibungen und Hinweise hinzu. Der Code unten dient als Orientierungshilfe.

Zu textViewIntro hinzufügen:

android:contentDescription="@string/add_gdg"

Fügen Sie den Bearbeitungstexten Folgendes hinzu:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

Fügen Sie eine Inhaltsbeschreibung für labelTextWhy hinzu.

android:contentDescription="@string/motivation"

Fügen Sie EditTextWhy einen Hinweis hinzu. Nachdem Sie die Bearbeitungsfelder mit Labels versehen haben, fügen Sie dem Label eine Inhaltsbeschreibung und dem Feld einen Hinweis hinzu.

android:hint="@string/enter_motivation"

Fügen Sie eine Inhaltsbeschreibung für die Schaltfläche „Senden“ hinzu. Alle Schaltflächen müssen eine Beschreibung enthalten, was passiert, wenn sie gedrückt werden.

android:contentDescription="@string/submit_button_description"

Führen Sie Ihre App mit aktiviertem TalkBack aus und füllen Sie das Formular aus, um sich für die Durchführung eines GDG zu bewerben.

Schritt 4: Inhaltsgruppe erstellen

Für UI-Steuerelemente, die TalkBack als Gruppe behandeln soll, können Sie die Inhaltsgruppierung verwenden. Zusammengehörige Inhalte, die gruppiert sind, werden gemeinsam angekündigt. Nutzer von Hilfstechnologien müssen dann nicht mehr so oft wischen, scannen oder warten, um alle Informationen auf dem Bildschirm zu sehen. Das hat keine Auswirkungen darauf, wie die Steuerelemente auf dem Bildschirm angezeigt werden.

Wenn Sie UI-Komponenten gruppieren möchten, schließen Sie sie in ein ViewGroup ein, z. B. ein LinearLayout. In der GDG Finder App sind die Elemente labelTextWhy und editTextWhy hervorragende Kandidaten für die Gruppierung, da sie semantisch zusammengehören.

Öffnen Sie add_gdg_fragment.xml.
Schließen Sie LabelTextWhy und EditTextWhy in ein LinearLayout-Element ein, um eine Inhaltsgruppe zu erstellen. Kopieren Sie den folgenden Code und fügen Sie ihn ein. Diese LinearLayout enthält bereits einige der Formatierungen, die Sie benötigen. Achten Sie darauf, dass sich button AUSSERHALB von LinearLayout befindet.

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

Wählen Sie Code > Code neu formatieren aus, um den gesamten Code richtig einzurücken.
Entfernen Sie alle Layoutränder aus labelTextWhy und editTextWhy.
Ändern Sie in labelTextWhy die Einschränkung layout_constraintTop_toTopOf in contentGroup.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

Ändern Sie in editTextWhy die Einschränkung layout_constraintBottom_toBottomOf in contentGroup.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

Beschränken Sie EditTextRegion und Button auf contentGroup, um die Fehler zu beheben.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

Fügen Sie dem LinearLayout Ränder hinzu. Optional können Sie diese Marge als Dimension extrahieren.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

Wenn Sie Hilfe benötigen, vergleichen Sie Ihren Code mit dem add_gdg_fragment.xml im Lösungscode.

Führen Sie Ihre App aus und erkunden Sie den Bildschirm Apply to run GDG (GDG-Ausführung beantragen) mit TalkBack.

Schritt 5: Live-Region hinzufügen

Derzeit lautet das Label auf der Schaltfläche „Senden“ OK. Es wäre besser, wenn die Schaltfläche vor dem Senden des Formulars ein Label und eine Beschreibung hätte und sich nach dem Klicken und Senden des Formulars dynamisch in ein anderes Label und eine andere Inhaltsbeschreibung ändert. Dazu können Sie eine Live-Region verwenden.

Eine Live-Region gibt Bedienungshilfendiensten an, ob der Nutzer benachrichtigt werden soll, wenn sich eine Ansicht ändert. Wenn Sie Nutzer beispielsweise über ein falsches Passwort oder einen Netzwerkfehler informieren, können Sie die Barrierefreiheit Ihrer App verbessern. In diesem Beispiel wird der Nutzer informiert, wenn sich der Status der Schaltfläche „Senden“ ändert.

Öffnen Sie add_gdg_fragment.xml.
Ändern Sie die Textzuweisung der Schaltfläche zu Senden. Verwenden Sie dazu die bereitgestellte String-Ressource submit.

android:text="@string/submit"

Fügen Sie dem Button eine Live-Region hinzu, indem Sie das Attribut android:accessibilityLiveRegion festlegen. Während Sie tippen, haben Sie mehrere Optionen für den Wert. Je nach Wichtigkeit der Änderung können Sie entscheiden, ob Sie den Nutzer unterbrechen möchten. Mit dem Wert „assertive“ unterbrechen die Bedienungshilfen laufende Sprachausgaben, um Änderungen an dieser Ansicht sofort anzukündigen. Wenn Sie den Wert auf „none“ setzen, werden keine Änderungen angekündigt. Wenn diese Option auf „Höflich“ eingestellt ist, kündigen die Bedienungshilfen Änderungen an, warten aber, bis sie an der Reihe sind. Legen Sie den Wert auf „höflich“ fest.

android:accessibilityLiveRegion="polite"

Öffnen Sie im Paket add die Datei AddGdgFragment.kt.
Legen Sie in der showSnackBarEvent Observer nach dem Anzeigen der SnackBar eine neue Inhaltsbeschreibung und einen neuen Text für die Schaltfläche fest.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

Führen Sie die App aus und klicken Sie auf die Schaltfläche. Leider sind die Schaltfläche und die Schrift zu klein.

Schritt 6: Schaltflächenformatierung korrigieren

Ändern Sie in add_gdg_fragment.xml die Werte für width und height des Buttons in wrap_content, damit das vollständige Label sichtbar ist und der Button eine angemessene Größe hat.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Löschen Sie die Attribute backgroundTint, textColor und textSize aus der Schaltfläche, damit die App das bessere Design verwendet.
Löschen Sie das Attribut textColor aus textViewIntro. Die Designfarben sollten einen guten Kontrast bieten.
Führen Sie die App aus. Die Schaltfläche Senden ist jetzt viel besser nutzbar. Klicken Sie auf Senden. Die Schaltfläche ändert sich zu Fertig.

Chips sind kompakte Elemente, die für ein Attribut, einen Text, eine Entität oder eine Aktion stehen. Sie ermöglichen es Nutzern, Informationen einzugeben, eine Auswahl zu treffen, Inhalte zu filtern oder eine Aktion auszulösen.

Das Chip-Widget ist ein einfacher View-Wrapper für ChipDrawable, das die gesamte Layout- und Zeichenlogik enthält. Die zusätzliche Logik ist für die Unterstützung von Touch-, Maus-, Tastatur- und Bedienungshilfenavigation erforderlich. Der Hauptchip und das Schließen-Symbol werden als separate logische Unteransichten betrachtet und haben ein eigenes Navigationsverhalten und einen eigenen Status.

Für Chips werden Drawables verwendet. Mit Android-Drawables können Sie Bilder, Formen und Animationen auf dem Bildschirm zeichnen. Sie können eine feste oder dynamische Größe haben. Sie können Bilder als Drawables verwenden, z. B. die Bilder in der GDG-App. Außerdem können Sie Vektorgrafiken verwenden, um alles zu zeichnen, was Ihnen einfällt. Es gibt auch eine skalierbare Zeichnung, die als 9-Patch-Zeichnung bezeichnet wird. Sie wird in diesem Codelab nicht behandelt. Das GDG-Logo in drawable/ic_gdg.xml ist ein weiteres Drawable.

Drawables sind keine Ansichten. Sie können ein Drawable also nicht direkt in ein ConstraintLayout einfügen, sondern müssen es in ein ImageView einfügen. Sie können Drawables auch verwenden, um einen Hintergrund für eine Textansicht oder eine Schaltfläche bereitzustellen. Der Hintergrund wird dann hinter dem Text gezeichnet.

Schritt 1: Chips zur Liste der GDGs hinzufügen

Der unten angekreuzte Chip verwendet drei Drawables. Der Hintergrund und das Häkchen sind jeweils eine Zeichnung. Wenn Sie den Chip berühren, wird ein Welleneffekt erzeugt. Dazu wird ein spezielles RippleDrawable verwendet, das als Reaktion auf Statusänderungen einen Welleneffekt anzeigt.

In dieser Aufgabe fügen Sie der Liste der GDGs Chips hinzu und lassen sie den Status ändern, wenn sie ausgewählt werden. In dieser Übung fügen Sie oben auf dem Bildschirm Suche eine Zeile mit Schaltflächen hinzu, die als Chips bezeichnet werden. Mit jeder Schaltfläche wird die GDG-Liste so gefiltert, dass der Nutzer nur Ergebnisse aus der ausgewählten Region erhält. Wenn eine Schaltfläche ausgewählt ist, ändert sich ihr Hintergrund und es wird ein Häkchen angezeigt.

Öffnen Sie fragment_gdg_list.xml.
Erstellen Sie ein com.google.android.material.chip.ChipGroup innerhalb des HorizontalScrollView.. Setzen Sie die singleLine-Property auf true, damit alle Chips in einer horizontal scrollbaren Zeile angeordnet werden. Setzen Sie die singleSelection-Property auf true, damit jeweils nur ein Chip in der Gruppe ausgewählt werden kann. Hier ist der Code.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

Erstellen Sie im Ordner layout eine neue Layoutressourcendatei mit dem Namen region.xml, um das Layout für eine Chip zu definieren.
Ersetzen Sie in egion.xml den gesamten Code durch das unten angegebene Layout für ein Chip. Beachten Sie, dass Chip eine Material-Komponente ist. Das Häkchen wird durch Festlegen der Property app:checkedIconVisible angezeigt. Sie erhalten eine Fehlermeldung für die fehlende selected_highlight-Farbe.

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

Um die fehlende Farbe selected_highlight zu erstellen, setzen Sie den Cursor auf selected_highlight, rufen Sie das Intention-Menü auf und wählen Sie create color resource for selected highlight (Farbressource für die ausgewählte Markierung erstellen) aus. Die Standardoptionen sind in Ordnung. Klicken Sie einfach auf OK. Die Datei wird im Ordner res/color erstellt.
Öffnen Sie res/color/selected_highlight.xml. In dieser Farbstatusliste, die als <selector> codiert ist, können Sie verschiedene Farben für verschiedene Status angeben. Jeder Status und die zugehörige Farbe werden als <item> codiert. Weitere Informationen zu diesen Farben finden Sie unter Farbgestaltung.

Fügen Sie der Statusliste im <selector> ein Element mit der Standardfarbe colorOnSurface hinzu. In Statuslisten ist es wichtig, immer alle Status abzudecken. Eine Möglichkeit hierfür ist die Verwendung einer Standardfarbe.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

Fügen Sie über der Standardfarbe ein item mit der Farbe colorPrimaryVariant hinzu und beschränken Sie die Verwendung auf den Fall, in dem der ausgewählte Status true ist. Statuslisten werden von oben nach unten durchlaufen, ähnlich wie eine Case-Anweisung. Wenn keiner der Status übereinstimmt, wird der Standardstatus angewendet.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

Schritt 2: Chipreihe anzeigen

In der GDG-App wird eine Liste mit Chips erstellt, auf denen Regionen mit GDGs angezeigt werden. Wenn ein Chip ausgewählt ist, werden in der App nur GDG-Ergebnisse für diese Region angezeigt.

Öffnen Sie im Paket search die Datei GdgListFragment.kt.
Fügen Sie in onCreateView() direkt über der return-Anweisung einen Observer für viewModel.regionList hinzu und überschreiben Sie onChanged(). Wenn sich die Liste der Regionen ändert, die vom Ansichtsmodell bereitgestellt werden, müssen die Chips neu erstellt werden. Fügen Sie eine Anweisung hinzu, um sofort zurückzukehren, wenn die angegebene data null ist.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

Weisen Sie in onChanged() unter dem Nulltest binding.regionList einer neuen Variablen namens chipGroup zu, um regionList im Cache zu speichern.

val chipGroup = binding.regionList

Erstelle unten eine neue layoutInflator zum Aufblähen von Chips aus chipGroup.context.

val inflator = LayoutInflater.from(chipGroup.context)

Bereinigen Sie Ihr Projekt und erstellen Sie es neu, um den Databinding-Fehler zu beheben.

Unterhalb des Inflators können Sie nun die eigentlichen Chiphersteller erstellen, einen für jede Region in regionList.

Erstellen Sie eine Variable namens children, in der alle Chips gespeichert werden. Weisen Sie ihr eine Zuordnungsfunktion für das übergebene data zu, um jeden Chip zu erstellen und zurückzugeben.

val children = data.map {}

Erstellen und erweitern Sie in der Map-Lambda für jedes regionName einen Chip. Der vollständige Code ist unten zu sehen.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

Fügen Sie in der Lambda-Funktion kurz vor der Rückgabe von chip einen Klick-Listener hinzu. Wenn auf chip geklickt wird, setzen Sie den Status auf checked. Rufen Sie onFilterChanged() in viewModel auf. Dadurch wird eine Ereignissequenz ausgelöst, mit der das Ergebnis für diesen Filter abgerufen wird.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

Entfernen Sie am Ende der Lambda-Funktion alle aktuellen Ansichten aus chipGroup und fügen Sie dann alle Chips aus children zu chipGroup hinzu. Die Chips können nicht aktualisiert werden. Sie müssen den Inhalt von chipGroup entfernen und neu erstellen.

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

Der fertige Observer sollte so aussehen:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

Führen Sie Ihre App aus und suchen Sie nach GDGS, um den Bildschirm Suche zu öffnen und die neuen Chips zu verwenden. Wenn Sie auf die einzelnen Chips klicken, werden die Filtergruppen darunter angezeigt.

Im Nachtmodus kann Ihre App ihre Farben in ein dunkles Design ändern, z. B. wenn in den Geräteeinstellungen der Nachtmodus aktiviert wurde. Im Nachtmodus wird der helle Standardhintergrund von Apps in einen dunklen Hintergrund geändert. Alle anderen Bildschirmelemente werden entsprechend angepasst.

Schritt 1: Nachtmodus aktivieren

Um das dunkle Design für Ihre App bereitzustellen, ändern Sie das Design von Light in DayNight. Das DayNight-Design wird je nach Modus hell oder dunkel angezeigt.

Ändern Sie in styles.xml, das übergeordnete Design von AppTheme von Light in DayNight.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

Rufen Sie in der Methode onCreate() von MainActivity die Methode AppCompatDelegate.setDefaultNightMode() auf, um das dunkle Design programmatisch zu aktivieren.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Führen Sie die App aus und prüfen Sie, ob sie zum dunklen Design gewechselt hat.

Schritt 2: Eigene Farbpalette für das dunkle Design generieren

Wenn Sie das dunkle Design anpassen möchten, erstellen Sie Ordner mit dem Qualifikator -night für das dunkle Design. Sie können beispielsweise bestimmte Farben im Nachtmodus festlegen, indem Sie einen Ordner mit dem Namen values-night erstellen.

Rufen Sie das Farbtool von material.io auf und erstellen Sie eine Farbvorlage für das Nachtdesign. Sie können beispielsweise eine dunkelblaue Farbe als Grundlage verwenden.
Generieren und laden Sie die Datei colors.xml herunter.
Wechseln Sie zur Ansicht Projektdateien, um alle Ordner in Ihrem Projekt aufzulisten.
Suchen Sie den Ordner res und maximieren Sie ihn.
Erstellen Sie einen Ressourcenordner res/values-night.
Fügen Sie die neue Datei colors.xml dem Ressourcenordner res/values-night hinzu.
Führen Sie Ihre App weiterhin im Nachtmodus aus. Die App sollte die neuen Farben verwenden, die Sie für res/values-night definiert haben. Die Chips verwenden die neue Sekundärfarbe.

Android Studio-Projekt: GDGFinderFinal.

Unterstützung von RTL-Sprachen

Legen Sie im Android-Manifest android:supportsRtl="true" fest.
Sie können sich eine Vorschau von RTL im Emulator ansehen und Ihre eigene Sprache verwenden, um das Bildschirm-Layout zu prüfen. Öffnen Sie auf einem Gerät oder Emulator die Einstellungen und wählen Sie in den Entwickleroptionen die Option RTL-Layout erzwingen aus.
Ersetzen Sie Verweise auf Left und Right durch Verweise auf Start und End.
Deaktivieren Sie die Spiegelung für Drawables, indem Sie android:autoMirrored="true" löschen.
Wählen Sie Refactor > Add RTL support where possible aus, damit Android Studio die Arbeit für Sie erledigt.
Verwenden Sie values-"language code"-Ordner, um sprachspezifische Ressourcen zu speichern.

Auf Barrierefreiheit prüfen

Laden Sie den Accessibility Scanner von Google LLC im Play Store herunter und führen Sie ihn aus, um nach Bildschirm-Elementen zu suchen, die verbessert werden können.

Inhaltsbeschreibungen für TalkBack erstellen

Installieren Sie die Android-Tools zur Barrierefreiheit von Google, die TalkBack enthalten.
Fügen Sie allen UI-Elementen Inhaltsbeschreibungen hinzu. Beispiel:
android:contentDescription="@string/stage_image_description"
Verwenden Sie für ein bearbeitbares Element wie EditText ein android:hint-Attribut im XML-Code, um dem Nutzer einen Hinweis dazu zu geben, was er eingeben soll.
Erstellen Sie Contentgruppen, indem Sie zugehörige Elemente in eine Ansichtsgruppe einfügen.
Erstellen Sie eine Live-Region, um Nutzern mit android:accessibilityLiveRegion zusätzliches Feedback zu geben.

Filter mit Chips implementieren

Chips sind kompakte Elemente, die für ein Attribut, einen Text, eine Entität oder eine Aktion stehen.
Verwenden Sie zum Erstellen einer Gruppe von Chips ein com.google.android.material.chip.ChipGroup.
Definieren Sie das Layout für ein com.google.android.material.chip.Chip.
Wenn die Farbe der Chips geändert werden soll, geben Sie eine Farbstatusliste als <selector> mit statusabhängigen Farben an:
<item android:color="?attr/colorPrimaryVariant" android:state_selected="true" />
Binden Sie die Chips an Live-Daten, indem Sie dem Ansichtsmodell einen Observer für die Daten hinzufügen.
Erstellen Sie einen Inflator für die Chipgruppe, um die Chips anzuzeigen:
LayoutInflater.from(chipGroup.context)
Erstellen Sie die Chips, fügen Sie einen Click-Listener hinzu, der die gewünschte Aktion auslöst, und fügen Sie die Chips der Chip-Gruppe hinzu.

Dunklen Modus unterstützen

Verwenden Sie DayNight AppTheme, um den dunklen Modus zu unterstützen.
Sie können den dunklen Modus programmatisch festlegen:
AppCompatDelegate.setDefaultNightMode()
Erstellen Sie einen Ressourcenordner res/values-night, um benutzerdefinierte Farben und Werte für den Dark Mode bereitzustellen.

Android-Entwicklerdokumentation:

Weitere Ressourcen:

Android-Apps mit Kotlin entwickeln (Udacity-Kurs)
Kotlin Bootcamp for Programmers (Udacity-Kurs)
Kotlin Bootcamp for Programmers-Codelabs

In diesem Abschnitt werden mögliche Hausaufgaben für Schüler und Studenten aufgeführt, die dieses Codelab im Rahmen eines von einem Kursleiter geleiteten Kurses durcharbeiten. Es liegt in der Verantwortung des Kursleiters, Folgendes zu tun:

Weisen Sie bei Bedarf Aufgaben zu.
Teilen Sie den Schülern/Studenten mit, wie sie Hausaufgaben abgeben können.
Benoten Sie die Hausaufgaben.

Lehrkräfte können diese Vorschläge nach Belieben nutzen und auch andere Hausaufgaben zuweisen, die sie für angemessen halten.

Wenn Sie dieses Codelab selbst durcharbeiten, können Sie mit diesen Hausaufgaben Ihr Wissen testen.

Frage 1

Welche der folgenden Optionen ist für die Unterstützung von RTL-Sprachen erforderlich?

▢ Ersetzen Sie Left und Right in Properties durch Start und End.

▢ Zu einer RTL-Sprache wechseln

▢ Alle Symbole müssen android:autoMirrored="true" verwenden.

▢ Inhaltsbeschreibungen angeben

Frage 2

Welches der folgenden Tools zur Barrierefreiheit ist in den meisten Android-Geräten integriert?

▢ TalkBack

▢ Accessibility Scanner

▢ Wählen Sie in Android Studio Refactor > Add RTL support where possible (Umgestalten > RTL-Unterstützung hinzufügen, sofern möglich) aus.

▢ Lint

Frage 3

Welche der folgenden Aussagen über Chips stimmt nicht?

▢ Sie zeigen Chips als Teil eines ChipGroup an.

▢ Sie können eine Farbstatusliste für ein ChipGroup angeben.

▢ Chips sind kompakte Elemente, die für eine Eingabe, ein Attribut oder eine Aktion stehen.

▢ Sie müssen DarkTheme immer aktivieren, wenn Ihre App Chips verwendet.

Frage 4

Welches Design bietet Formatierungen für den dunklen und den hellen Modus?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

Frage 5

Was ist eine Live-Region?

▢ Ein Knoten, der für den Nutzer wichtige Informationen enthält

▢ Ein Bereich des Displays, der seine Form gemäß den Material-Richtlinien ändert

▢ Eine Ansicht, die das Streamen von Videos ermöglicht

▢ Ein animiertes Drawable