31 Jan

Wie du per Button ein Bild in einer App anzeigen kannst (Android App Tutorial)

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.

Wie du per Button ein Bild in einer App anzeigen kannst

 

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

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 findenMein 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.

Sieht aus wie echt, liefert aber noch keinen Cat Content

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'"

„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 und Nachher: Klick auf "Cat Content" jetzt mit echtem Cat Content

Vorher/Nachher: Klick auf „Cat Content“ – jetzt mit echtem Cat Content

 



🙂 Klick hier für Bücher zum Thema Android-Programmierung!* 🙂

2 Gedanken zu „Wie du per Button ein Bild in einer App anzeigen kannst (Android App Tutorial)

  1. Guten Tag.
    Ich habe 2 Probleme :

    1) ich möchte per Button klick eine PDF Datei aus dem Internet laden und direkt anzeigen lassen.

    2) wie kann ich die PDF Datei in der App fest einbinden, so daß bei der Installation der App die PDF Datei mit installiert wird und sich auf dem Handy befindet. Die Idee dahinter ist, das die App Internet frei wird.

    Aber ich wäre schon froh wenn mir bei Punkt 1 geholfen wird.

    Mfg

    Wosi34

Kommentare sind geschlossen.