Ich zeige dir hier, wie du per Button ein Bild (-> ImageView) in einer Android-App anzeigen kannst. Wir verwenden dafür Android Studio. Ich gehe davon aus, dass du zuvor schon mindestens eine der klassischen „Hallo Welt“-Apps erstellt hast und wirklich nur wissen willst, wie man per Klick ein Bild setzen kann. Und weil Cat Content immer schön ist, verwende ich für dieses Tutorial ein Bild von meinem Kater.
Grundsätzliches zu dieser App
Ich habe ein neues Projekt namens „Cat Content“ erstellt und dafür als Minimum-SDK API 16: Android 4.1 (Jelly Bean) ausgewählt. Bei „Add an activity to Mobile“ habe ich mich für „Empty Activity“ entschieden.
Die App an sich ist so simpel wie möglich: Ein TextView, ein Button, ein ImageView. Statt das TextView mit einem in strings.xml festgelegten String zu füttern, gebe ich den Text direkt in der activity_main.xml an. Wie gesagt: simpel. Weil ich nur „Button löst ImageView aus“ zeigen möchte. Also nicht wundern.
Die activity_main.xml
So soll die App aussehen
Wir bauen mithilfe der activity_main.xml die App so auf, dass sie im Design-Modus aussieht wie auf dem nebenstehenden Bild.
Grundlage ist ein Lineares Layout mit vertikaler Orientierung.
Dann werden der activity_main.xml ein TextView, ein Button und ein ImageView hinzugefügt.
Sinnvollerweise benötigen wir auch ein Katzenbild für den per Button versprochenen Cat Content. Entsprechende Fotos gibt es im Internet oder bei Katzenbesitzern eures Vertrauens.
Das Bild wird im Ordner drawable gespeichert, bei mir ist der unter CatContent/app/src/main/res/drawable zu finden. Mein Bild heißt sinnvollerweise catcontent.png und zeigt meinen Kater. 😉
Nun kommen wir zu den einzelnen Bausteinen in der Text-Ansicht.
Da wäre einmal das TextView, welches den entsprechenden Text verpasst bekommt („Bitte klick auf den Button, wenn du gerne Cat Content sehen möchtest“).
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:text="Bitte klick auf den Button, wenn du gerne Cat Content sehen möchtest" />
Danach dann der Button, beschriftet mit „Cat Content“. Zentriert mittels android:layout_gravity=“center_horizontal“ weil es einfach besser aussieht.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cat Content"
android:id="@+id/button"
android:layout_gravity="center_horizontal" />
Zuletzt: Das ImageView. In diesem Fall ist kein Bild gesetzt – das erledigt der Button für uns. Aber zentriert habe ich trotzdem, vorsorglich sozusagen. 😉
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:layout_gravity="center_horizontal" />
Wenn wir jetzt die App per Emulator oder Smartphone aufrufen, sieht es schon gut aus. Nur der Button ist ohne Funktion und daher gibt es den versprochenen Cat Content nicht. Aber darum kümmern wir uns jetzt.
The cat is a lie: Sieht aus wie echt, liefert aber noch keinen Cat Content.
Die MainActivity.java
Bekanntlich ist diese Datei das, was die App zu mehr als einer Layout-Hülle macht. Hier versteckt sich gewissermaßen die Katze.
Nicht vergessen: Wir benötigen (vor protected void onCreate definiert)
Button buttonCC; ImageView imageViewCC;
damit wir sie später methodenübergreifend verwenden können.
Am Ende der Methode onCreate fügen wir ein:
buttonCC = (Button) findViewById(R.id.button); imageViewCC = (ImageView) findViewById(R.id.imageView); buttonCC.setOnClickListener(this);
buttonCC beziehungsweise imageViewCC wird die jeweiligen ViewId zugewiesen und ein onClickListener für buttonCC gesetzt. Dieser wartet dann darauf, dass Cat Content angefordert wird. 😉
Sollte „this“ rot unterstrichen/unterschlängelt sein, mit Alt+Enter (zumindest bei Mac) diesen Dialog öffnen und „Make ‚MainActivity‘ implement ‚android.view.View.OnClickListener'“ auswählen.
„Make ‚MainActivity‘ implement ‚android.view.View.OnClickListener'“
In der nun entstandenen Methode public void onClick(View v) machen wir nun aus unserem leeren Versprechen tatsächlichen Cat Content.
imageViewCC.setImageResource(R.drawable.catcontent);
R.drawable.catcontent funktioniert natürlich nur, wenn das Bild im drawable-Ordner ist. Die Endung (hier .png) wird weggelassen. Wichtig: Dateinamen komplett klein schreiben.
Beim Klicken auf den Button wird jetzt dort, wo bisher nur ein ImageView ohne gesetzte Resource (bzw. Bild) war, wunderbarer Cat Content angezeigt. Klappt Gerüchten zufolge übrigens auch mit Dog Content.
Vorher/Nachher: Klick auf „Cat Content“ – jetzt mit echtem Cat Content
🙂 Klick hier für Bücher zum Thema Android-Programmierung!* 🙂