Bild zur Geburtstagskarte-App hinzufügen

In diesem Codelab erfahren Sie, wie Sie Ihrer App Bilder mithilfe einer ImageView hinzufügen.

Vorbereitung

• wie Sie eine neue App in Android Studio erstellen und ausführen.
• Hier erfahren Sie, wie Sie mit dem Layouteditor Attribute in TextViews hinzufügen und entfernen und festlegen.

Lerninhalte

• So fügen Sie Ihrer Android-App ein Bild oder Foto hinzu.
• Anzeige eines Bildes in der App mit einer ImageView.
• So extrahieren Sie Text in eine String-Ressource, um die Übersetzung Ihrer App zu erleichtern und Strings wiederzuverwenden.
• Wie Ihre App für die maximale Anzahl an Nutzern genutzt werden kann.

Aufgaben

• Erweitern Sie die App zum Geburtstag, um ein Bild hinzuzufügen.

Voraussetzungen

• Einen Computer, auf dem Android Studio installiert ist
• Die App aus der App zum Erstellen einer Geburtstagskarte!

1. Öffne dein Projekt im vorherigen Codelab, indem du in Android Studio eine App zum Erstellen einer Geburtstagskarte erstellst.
   Wenn du sie erstellst, sollte sie in etwa so aussehen:
   

Image zum Projekt hinzufügen

Bei dieser Aufgabe laden Sie ein Bild aus dem Internet herunter und fügen es Ihrer Happy Geburtstag App hinzu.

1. Auf dieser Website finden Sie ein Bild für Ihren Geburtstag.
2. Klicken Sie rechts auf die Schaltfläche Herunterladen. Damit wird das Bild allein angezeigt.
   
3. Klicken Sie mit der rechten Maustaste auf das Bild und speichern Sie die Datei unter androidparty.jpg auf Ihrem Computer. Notieren Sie sich den Speicherort, z. B. den Ordner Downloads.
4. Klicken Sie in Android Studio im Menü auf Ansicht & Tool für Windows-Tools oder auf den Tab Ressourcenmanager links neben dem Projekt-Fenster.
5. Klicken Sie unter Ressourcenmanager auf das + und wählen Sie Drawables importieren aus. Ein Dateibrowser wird geöffnet.
   
6. Suchen Sie im Dateibrowser die heruntergeladene Bilddatei und klicken Sie auf Öffnen.
7. Klicke auf Weiter.
   Android Studio zeigt dir eine Vorschau des Bildes.
8. Klicken Sie auf Importieren.
9. Wenn das Bild erfolgreich importiert wurde, wird es in Android Studio der Liste Dableable hinzugefügt. Diese Liste enthält alle Bilder und Symbole für die App. Sie können sie jetzt in der App verwenden.
   
10. Wechseln Sie zur Projektansicht, indem Sie in den Menüs auf den Link Ansicht > Tool-Fenster > Projekt oder ganz links auf den Tab Projekt klicken.
11. Bestätigen Sie, dass sich das Bild im Ordner Drawable Ihrer App befindet, indem Sie app > res > drawingable maximieren.
    

Damit in Ihrer App ein Bild angezeigt werden kann, muss ein Ort vorhanden sein. Genau wie bei TextView kannst du auch eine ImageView für Bilder verwenden.

Bei dieser Aufgabe fügen Sie der App ein ImageView hinzu und setzen das Bild auf das Cake-Bild, das Sie heruntergeladen haben. Positioniere sie dann und passe ihre Größe an, sodass sie das Display ausfüllt.

ImageView hinzufügen und Bild festlegen

1. Öffnen Sie im Fenster Projekt die Datei activity_main.xml ( app > res > Layout > activity_main.xml).

Tipp:Wenn Sie den Layouteditor nicht sehen, klicken Sie rechts oben auf die Schaltfläche Design.

2. Gehen Sie im Layouteditor zur Palette und ziehen Sie eine ImageView in die App. Legen Sie sie in der Mitte ab und überschneiden Sie sich nicht mit Text.

Das Dialogfeld Ressource auswählen wird geöffnet. In diesem Dialogfeld werden alle für Ihre App verfügbaren Bildressourcen aufgeführt. Das Geburtsbild finden Sie auf dem Tab Drawable. Eine Zeichnen-Ressource ist ein allgemeines Konzept für eine Grafik, die auf dem Bildschirm gezeichnet werden kann. Sie enthält Bilder, Bitmaps und Symbole sowie viele andere Arten von Ressourcen.

3. Suchen Sie im Dialogfeld Ressource auswählen in der Liste Drawable das Kuchenbild.
4. Klicken Sie auf das Bild und dann auf OK.
   

Dadurch wird das Bild der App hinzugefügt, befindet sich aber wahrscheinlich nicht an der richtigen Stelle und füllt den Bildschirm nicht aus. Im nächsten Schritt wird das Problem behoben.

Position und Größe von ImageView festlegen

1. Klicken und ziehen Sie ImageViewim Layouteditor. Beachten Sie, dass beim Ziehen ein rosafarbenes Rechteck um den App-Bildschirm herum angezeigt wirdDesign. Das rosa Rechteck zeigt die Grenzen des Bildschirms zur Positionierung von ImageView an.
2. Leg ImageView so fest, dass der linke und rechte Rand mit dem pinkfarbenen Rechteck übereinstimmt. In Android Studio wird das Bild am Rand angedockt, wenn du es nah bewegst. Achten Sie gleich auf den oberen und unteren Rand.
   

Views in einem ConstraintLayout muss horizontale und vertikale Einschränkungen haben, damit ConstraintLayout festgelegt werden kann, wie sie platziert werden sollen. Diese fügen Sie als Nächstes hinzu.

Hinweis: Eine Einschränkung im Kontexteditor stellt die Verbindung oder Ausrichtung einer Ansicht mit einer anderen Ansicht, dem übergeordneten Layout oder einer unsichtbaren Richtlinie dar. Eine Ansicht kann beispielsweise auf einen bestimmten Abstand zum Rand des Containers oder immer rechts von einer anderen Ansicht oder immer auf die oberste Ansicht innerhalb eines Containers beschränkt sein.

1. Bewegen Sie den Mauszeiger über den Kreis oben in der Kontur von ImageView. Er wird dann mit einem anderen Kreis hervorgehoben.
2. Ziehen Sie den Kreis nach oben auf dem App-Bildschirm. Der Pfeil wird dabei mit dem Mauszeiger verbunden. Ziehen, bis sie am oberen Bildschirmrand rastet. Sie haben eine Einschränkung vom oberen Rand des ImageView zum oberen Rand des ConstraintLayout hinzugefügt.
   
   
3. Fügen Sie eine Beschränkung vom unteren Rand des ImageView zum unteren Ende des ConstraintLayout hinzu.

Tipp:Je mehr Views Sie auf dem Bildschirm hinzufügen, desto schwieriger kann das Hinzufügen von Einschränkungen sein. Wenn Sie eine Einschränkung für die falsche View hinzufügen, können Sie diesen Schritt mit Control+Z (Command+Z auf dem Mac) rückgängig machen. Alternativ kannst du mit der rechten Maustaste auf View klicken und ein Menü öffnen. Mit Einschränkungen der Auswahl löschen werden alle Einschränkungen für diese View entfernt.

4. Fügen Sie im Bereich Attribute mithilfe des Beschränkungs-Widgets einen Rand von 0 links und rechts hinzu. Dadurch wird automatisch eine Beschränkung in diese Richtung erstellt.
   

Das Bild ist jetzt zentriert, aber es belegt noch nicht den gesamten Bildschirm. Dieses Problem können Sie in den nächsten Schritten beheben.

1. Legen Sie im Bereich Beschränkungen unter dem Einschränkungs-Widget den Wert für layout_width auf 0dp (Übereinstimmungseinschränkung) fest.
   0dp ist ein Kurzbefehl, mit dem Android Studio angewiesen wird, die Übereinstimmungsbeschränkung für die Breite des ImageView zu verwenden. „Einschränkungseinschränkungen“ bedeutet... Aufgrund der soeben hinzugefügten Beschränkungen ist dieser so breit wie der ConstraintLayout abzüglich eventueller Ränder.
   
2. Setzen Sie layout_height auf 0dp (Übereinstimmungseinschränkung).
   Aufgrund der Beschränkungen, die Sie hinzugefügt haben, wird ImageView so hoch wie der ConstraintLayout-Wert ohne Rand.
   
3. ImageView ist so breit und groß wie der App-Bildschirm, aber das Foto ist in der Mitte zentriert und ImageView ist über dem Foto und unter ihm angeordnet. Da dies nicht sehr ansprechend aussieht, passen Sie den scaleType von ImageView an, um die Größe und Ausrichtung des Bilds zu definieren. Weitere Informationen zu ScaleType findest du im Entwicklerleitfaden. Die App sollte nun so aussehen:
   
4. Suchen Sie das Attribut scaleType. Eventuell müssen Sie nach unten scrollen oder nach diesem Attribut suchen. Versuchen Sie, verschiedene Werte für scaleType festzulegen, um zu sehen, was sie bewirken.

Tipp: Wenn Sie eine Property in der Liste der Properties suchen möchten, klicken Sie rechts neben „Attribute“ auf das Lupensymbol und geben Sie den Namen der Property ein. In Android Studio werden nur die Properties angezeigt, die diesen String enthalten.

5. Wenn Sie fertig sind, setzen Sie scaleType auf centerZuschneiden, damit das Bild den Bildschirm ausfüllt, ohne es zu verzerren.

Das Kuchenbild sollte nun den gesamten Bildschirm füllen, wie unten dargestellt.

Jetzt hast du aber noch die Möglichkeit, deine Geburtstagsgrüße und deine Signatur zu sehen. Im nächsten Schritt wird das Problem behoben.

ImageView hinter dem Text verschieben

Nachdem ImageView das Display gefüllt hat, kannst du den Text nicht mehr sehen. Das liegt daran, dass der Text jetzt den Text verdeckt. Es stellt sich heraus, dass die Reihenfolge der UI-Elemente wichtig ist. Sie haben zuerst die TextViews und dann die ImageView hinzugefügt. Das bedeutet, dass sie an erster Stelle lag. Fügen Sie Ansichten zu einem Layout hinzu, werden sie am Ende der entsprechenden Liste in der Reihenfolge hinzugefügt, in der sie auf der Liste stehen. ImageView wurde am Ende der Liste mit Views in ConstraintLayout hinzugefügt. Das heißt, dass die Datei zuletzt gezeichnet wurde und über die TextViews zeichnet. Um das Problem zu beheben, ändern Sie die Reihenfolge der Ansichten und verschieben den ImageView an den Anfang der Liste, sodass er zuerst gezeichnet wird.

1. Klicken Sie in der Baumstruktur auf die ImageView und ziehen Sie sie über die TextViews direkt unterhalb von ConstraintLayout. Eine blaue Linie mit einem Dreieck wird angezeigt, die zeigt, wohin die ImageView gehen soll. Ziehen Sie die ImageView direkt unter der ConstraintLayout.
   
   

Das ImageView-Objekt sollte jetzt zuerst in der Liste unter dem ConstraintLayout-Objekt stehen, der TextViews danach. Sowohl der Text „Geburtstag, Sam“ als auch der Text „Von Emma“ sollten sichtbar sein, aber der Geburtstag, Sam! Ignorieren Sie die Warnung vor der fehlenden Inhaltsbeschreibung.

Schriftfarbe ändern

Der Begrüßungstext und die Signatur sind jetzt vor dem Bild zu sehen. Je nach ausgewählter Textfarbe sind sie aber möglicherweise schwer zu sehen. In diesem Schritt legen Sie die Farbe des Texts fest, damit Sie das Bild mit dem Bild besser sehen.

1. Wählen Sie die erste TextView aus, indem Sie in der Baumstruktur darauf klicken.
2. Klicke unter Attribute auf das Attribut textColor und gib mit der Eingabe von weiß ein.
   Während du tippst, wird in Android Studio eine Liste der Farben angezeigt, die den bisher eingegebenen Text enthalten.
   
3. Wählen Sie aus der Liste der Farben @android:color/white aus und drücken Sie die Eingabetaste. Android definiert eine Reihe von Farben, sodass Sie sie einheitlich in verschiedenen Teilen Ihrer App verwenden können.
4. Tun Sie dasselbe mit dem anderen TextView.
5. Führen Sie Ihre App aus und prüfen Sie, dass der Text jetzt einfacher zu lesen ist.
   

Glückwunsch! Sie haben Ihrer Android-App ein Bild hinzugefügt und Ihr Text sieht toll aus.

Wenn du das TextViews im vorherigen Codelab hinzugefügt hast, wurden sie in Android Studio mit Warndreiecke gekennzeichnet. In diesem Schritt beheben Sie diese Warnungen und die Warnung auf dem ImageView.

Übersetzung läuft…

Wenn Sie Apps schreiben, sollten Sie daran denken, dass sie möglicherweise in eine andere Sprache übersetzt werden können. Wie Sie in einem früheren Codelab gelernt haben, ist ein String eine Folge von Zeichen wie „Happy Geburtstag, Sam!"“.

Ein hartcodierter String wird direkt in den Code Ihrer App geschrieben. Hartcodierte Strings erschweren die Übersetzung von Apps in andere Sprachen und verhindern die Wiederverwendung von Strings an verschiedenen Stellen Ihrer App. Diese Probleme können Sie beheben, indem Sie Strings in eine Ressourcendatei extrahieren. Anstatt den String im Code hartcodieren zu müssen, fügen Sie ihn in eine Datei ein. Geben Sie ihm einen Namen und verwenden Sie den Namen, wann immer Sie diesen String verwenden möchten. Wenn Sie den String ändern oder in eine andere Sprache übersetzen, bleibt der Name unverändert.

1. Klicke auf das orangefarbene Dreieck neben „Erstes TextView“ mit „Herzlichen Glückwunsch, Sam!“
   Android Studio öffnet ein Fenster mit weiteren Informationen und einem Lösungsvorschlag. Sie müssen möglicherweise nach unten scrollen, um Vorgeschlagene Vorschläge zu sehen.
   
   
2. Klicke auf die Schaltfläche Korrigieren.
   In Android Studio wird das Dialogfeld Ressource extrahieren geöffnet. In diesem Dialogfeld können Sie festlegen, wie Ihre String-Ressource aufgerufen wird, und einige Details zur Speicherung angeben. Der Ressourcenname ist der String, der aufgerufen werden soll. Der Ressourcenwert wird als tatsächlicher String selbst verwendet.
3. Ändern Sie im Dialogfeld Extraktion von Ressourcen den Ressourcennamen in Happy_birthday_text. Stringressourcen sollten Kleinbuchstaben enthalten und mehrere Wörter müssen durch einen Unterstrich getrennt werden. Behalten Sie bei den anderen Einstellungen die Standardeinstellungen bei.
   
4. Klicken Sie auf OK.
5. Suchen Sie im Bereich Attribute nach dem Attribut text. Beachten Sie, dass Android Studio dieses Attribut automatisch auf @string/Happy_birthday_text eingestellt hat.
   
6. Öffnen Sie strings.xml (app > res > Werte > string.xml). Beachten Sie, dass Android Studio eine String-Ressource mit dem Namen Happy_birthday_text erstellt hat.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

Die Datei strings.xml enthält eine Liste von Strings, die der Nutzer in deiner App sieht. Der Name deiner App ist auch eine String-Ressource. Wenn Sie die Strings an einem Ort speichern, können Sie den gesamten Text in Ihrer App leichter übersetzen lassen und einen String ganz einfach in verschiedenen Bereichen der App wiederverwenden.

7. Führen Sie dieselben Schritte aus, um den Text für die Signatur TextView zu extrahieren, und benennen Sie die String-Ressource signature_text.

Die fertige Datei sollte folgendermaßen aussehen.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

App auf Barrierefreiheit prüfen

Wenn du dich an die Programmierkenntnisse hältst, können alle Nutzer, auch Nutzer mit Behinderungen, einfacher mit deiner App interagieren und damit interagieren.

Hinweis: Android bietet viele Tools für Nutzer. Beispielsweise ist TalkBack der Google-Screenreader auf Android-Geräten. TalkBack gibt Nutzern gesprochenes Feedback, sodass sie ihr Gerät verwenden können, ohne auf das Display sehen zu müssen. Weitere Informationen zur Barrierefreiheit finden Sie im Referenzleitfaden für Entwickler.

In Android Studio findest du Hinweise und Warnungen, mit denen du die Barrierefreiheit deiner App verbessern kannst.

1. Achten Sie im Baumbaum auf das orangefarbene Dreieck neben dem ImageView, das Sie zuvor hinzugefügt haben. Wenn Sie den Mauszeiger darauf bewegen, wird eine Kurzinfo mit einer Warnung zu einem fehlenden Attribut für das Attribut „contentDescription“ angezeigt. Mithilfe einer Inhaltsbeschreibung können Sie Ihre App mit TalkBack nutzerfreundlicher gestalten. Geben Sie dazu den Zweck des UI-Elements an.

Das Bild in dieser App ist nur zur Dekoration gedacht. Sie tippt nichts, wenn der Nutzer darauf tippt, und hat keine besondere Bedeutung für Bedienungshilfen. Statt die Inhaltsbeschreibung festzulegen, kennzeichnest du ImageView damit, damit das System weiß, dass es für die Barrierefreiheit wichtig ist. Danach weiß ein Screenreader, dass er sie überspringen kann.

2. Wählen Sie in der Baumstruktur die Option ImageView aus.
3. Suchen Sie im Fenster Attributes im Abschnitt All Attributes (Alle Attribute) nach importantForAccessibility und setzen Sie sie auf no.
   

Das orangefarbene Dreieck neben ImageView verschwindet.

4. Führen Sie Ihre App noch einmal aus, um sicherzustellen, dass sie weiterhin funktioniert.

Glückwunsch! Du hast deiner Happy Geburtstags-App ein Bild hinzugefügt, dich an die Richtlinien für Bedienungshilfen gewandt und eine Übersetzung in andere Sprachen erleichtert!

Der Lösungscode für die App „Happy Geburtstag“ wurde auf GitHub hochgeladen. Dort kannst du dir den Code ansehen, der dir am Ende angezeigt wurde.

GitHub ist ein Dienst, mit dem Entwickler Code für ihre Softwareprojekte verwalten können. Dabei wird Git verwendet, ein Versionskontrollsystem, mit dem die Änderungen erfasst werden, die für die einzelnen Versionen des Codes vorgenommen werden. Wenn Sie schon mal den Versionsverlauf eines Google-Dokuments gesehen haben, können Sie sehen, wann und was in diesem Dokument bearbeitet wurde. Sie können auch den Versionsverlauf des Codes in einem Projekt verfolgen. Das ist vor allem dann hilfreich, wenn Sie als Einzelperson oder mit einem Team an einem Projekt arbeiten.

GitHub hat außerdem eine Website, auf der Sie Ihr Projekt aufrufen und verwalten können. Über diesen GitHub-Link können Sie online nach den Dateien zum Projekt „Happy Geburtstag“ suchen oder sie auf Ihren Computer herunterladen.

Lösungscode-URL: https://github.com/google-developer-training/android-basics-kotlin-<APPNAME>

So rufst du den Code für dieses Codelab ab und öffnest es in Android Studio:

Code abrufen

1. Klicken Sie auf die URL des Lösungscodes. Daraufhin wird die GitHub-Seite für das Projekt in einem Browser geöffnet.
2. Klicken Sie auf der GitHub-Seite für das Projekt auf die Schaltfläche Klonen oder herunterladen. Daraufhin wird das Dialogfeld Klonen geöffnet.

3. Klicken Sie im Dialogfeld auf die Schaltfläche ZIP herunterladen, um das Projekt auf Ihrem Computer zu speichern. Warte, bis der Download abgeschlossen ist.
4. Suchen Sie die Datei auf Ihrem Computer, wahrscheinlich im Ordner Downloads.
5. Doppelklicken Sie auf die ZIP-Datei, um sie zu entpacken. Dadurch wird ein neuer Ordner erstellt, der die Projektdateien enthält.

Projekt in Android Studio öffnen

1. Starte Android Studio.
2. Klicken Sie im Fenster Willkommen bei Android Studio auf Vorhandenes Android Studio-Projekt öffnen.

Hinweis: Wenn Android Studio bereits geöffnet ist, wählen Sie stattdessen die Menüoption Datei > Neu > Projekt importieren aus.

3. Wechseln Sie im Dialogfeld Projekt importieren zum Speicherort des nicht komprimierten Projektordners, wahrscheinlich im Ordner Downloads.
4. Klicken Sie doppelt auf diesen Projektordner.
5. Warten Sie, bis Android Studio das Projekt öffnet.
6. Klicken Sie auf Erstellen , um die App zu erstellen und auszuführen. Prüfen Sie, ob sie wie erwartet funktioniert.
7. Sehen Sie sich die Projektdateien im Fenster Projekttool an, um zu sehen, wie die App implementiert wurde.

Hilfe:Lesen Sie die Hilfe und Tipps zur Fehlerbehebung, wenn der heruntergeladene Code nicht richtig geladen oder ausgeführt wird.

• Mit dem Ressourcenmanager in Android Studio kannst du Bilder und andere Ressourcen hinzufügen und organisieren.
• Ein ImageView ist ein UI-Element zum Anzeigen von Bildern in deiner App.
• ImageViews sollte eine Inhaltsbeschreibung haben, damit deine App leichter zugänglich ist.
• Text, der dem Nutzer wie der Geburtstagsgruß angezeigt wird, sollte in eine String-Ressource extrahiert werden, um die Übersetzung Ihrer App in andere Sprachen zu vereinfachen.

• Ressourcenmanager in Android Studio
• ImageView-Klasse
• Barrierefreiheit
• Unterschiedliche Sprachen unterstützen
• Erste Schritte mit GitHub

Hinweis: Übungen sind optional. Sie können dort üben, was Sie in diesem Codelab gelernt haben.

Gehen Sie so vor:

1. Erstelle eigene Geburtstagskarten-Apps nach deinem Design.
2. Überlege dir zuerst, welche Views du benötigst.
3. Welche Reihenfolge würden Sie am einfachsten hinzufügen?
4. Welche Bilder müssen Sie dem Drawable-Ordner hinzufügen?

Es gibt zwei Arten von Bitmapbildern, die häufig für Android-Apps verwendet werden: JPEG- und PNG-Dateien. PNG-Dateien können transparente (leere) Bereiche enthalten. Weitere Informationen zu Bildformaten finden Sie in der Entwicklerreferenz.

5. Positionieren Sie zuerst Views mit Einschränkungen und Rändern und gestalten Sie sie dann.
6. Wenn Sie möchten, dass sich der Text bei einigen Bildern besser von anderen abhebt, können Sie mit schattenfarbe, schattenbild, schattenbild und schattenradius experimentieren.
   

Aufgaben prüfen:

Die fertige App sollte ohne Fehler funktionieren und die von Ihnen entworfene Geburtstagskarte zeigen.