Apps für Android programmieren leicht gemacht!
Android - Pop-Up

Pop-Up anzeigen

Kürzlich habe ich mir eine kleine Passwort App geschrieben, die mittels AES-Verschlüsselung meine Passwörter auf dem Webserver meiner NAS speichert und von dort aus auch wieder abrufen kann.

Dabei habe ich eine ganz einfache ListView zur Auflistung benutzt und zur Anzeige und zum Einspeichern von neuen Passwörtern ein Pop-Up genutzt.
Heute möchte ich gerne erklären, wie man ein solches Pop-Up innerhalb der App anzeigen lassen kann, dieses gestaltet und auf die Eingaben reagiert.

Bei unserem Pop-Up handelt es sich eigentlich um ein DialogFragment, welches wird mit eigenem Layout füllen, mit eigenen Button versehen und über Listener auf die Klicks reagieren. Ich werde in diesem Artikel einfach mal das im Titelbild gezeigte Pop-Up nachprogrammieren und die nötigen Grundfunktionen zum Auslesen der Textfelder definieren. Ich denke nicht, dass es von Nöten eine Verschlüsselung einzuprogrammieren.

 

Das Layout:

Wir sollten mit dem Layout -also dem Aussehen- des Pop-Ups beginnen.
Hierzu erstellen wir ein ganz normales Layout in dem Ordner res -> layout, so als würden wir ein Layout für die ganz normale App definieren.
Hier können wir all Dinge verwenden, die wir auch normalerweise zur Verfügung stehen haben.

Meine Layout Datei heißt nun „dialog_new_account.xml“ und enthält folgenden Code:

<?xml version="1.0" encoding="utf-8"?>
<!--
  ~ Copyright 2016 www.droid-lernen.de
  ~
  ~ Licensed under the Apache License, Version 2.0 (the „License“);
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an „AS IS“ BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/inputLayout">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Titel:"
        android:id="@+id/textView2" />

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText_titel"
        android:singleLine="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Benutzername:"
        android:id="@+id/textView" />

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText_benutzername"
        android:singleLine="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Passwort:"
        android:id="@+id/textView4" />

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:id="@+id/editText_pw"
        android:singleLine="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Beschreibung:"
        android:id="@+id/textView3" />

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText_beschreibung" />
</LinearLayout>

Wie ihr sehen könnt beinhaltet diese Layout Datei keinen Button.
Auf dem Titelbild sind aber Button („Abbrechen“ und „Speichern“) zu sehen.
Diese Button werden wir später mittels Java einprogrammieren.

Als kleine Randinformation:
Es ist immer ratsam eine gewisse Konvention in der Namensvergebung einzuhalten. Für Layouts der Pop-Ups solltet ihr nach Möglichkeit immer den Präfix „dialog_“ wählen.

 

Pop-Up erstellen:

Nun haben wir bereits ein Design festgelegt.
Als nächstes müssen wir programmieren, dass ein Pop-Up geöffnet werden und welches Design es tragen soll.

// Kleine Klasse zum Erstellen eines Dialogs.
public static class NewAccountDialog extends DialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        //Dialog erstellen
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

        //Layout wählen
        final LayoutInflater inflater = getActivity().getLayoutInflater();
        final View inflatedView = inflater.inflate(R.layout.dialog_new_account, null);

        //Layout hinzufügen
        builder.setView(inflatedView);

        //Gib das erstellte Dialogfeld an die aufrufende Klasse zurück, um es anzeigen zu können.
        return builder.create();
    }

}

Im Prinzip wars das schon, allerdings fehlen uns jetzt noch die Buttons und die Funktionen zum auslesen der Textfelder.

Zum Hinzufügen der verschiedenen Button entfernen wir das „;“ in Zeile 14 und ersetzen es durch:

.setPositiveButton("Speichern", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int id) {
        //Hier lesen wir später die Textfelder aus.
    }
})
.setNegativeButton("Abbrechen", new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int id) {
        dismiss();
    }
});

 

Textfelder auslesen:

Super, wir haben ein Pop-Up erstellt, es mit einem Design gefüllt und Button definiert.
Nun fehlt uns noch die Möglichkeit die Textfelder auslesen zu können.

Hierzu sind zwei kleine Schritte nötig.
Als erstes müssen wir die Textfelder als Variablen laden. Dazu schreiben wir unter die Zeile „final View inflatedView = inflater.inflate(R.layout.dialog_new_account, null);“ einfach:

final EditText titel = (EditText) inflatedView.findViewById(R.id.editText_titel);
final EditText benutzername = (EditText) inflatedView.findViewById(R.id.editText_benutzername);
final EditText passwort = (EditText) inflatedView.findViewById(R.id.editText_pw);
final EditText beschreibung = (EditText) inflatedView.findViewById(R.id.editText_beschreibung);

Und an die Stelle „//Hier lesen wir später die Textfelder aus.“ schreiben wir:

String titelText = titel.getText().toString();
String nameText = benutzername.getText().toString();
String passwortText = passwort.getText().toString();
String beschreibungText = beschreibung.getText().toString();

 

Beachtet, dass die EditText Variablen final sein müssen, da sie sonst nicht ausgelesen werden können.

 

Pop-Up anzeigen:

Schlussendlich müssen wir die Anzeige des Pop-Up’s nur noch starten.
Dazu wählen wir folgenden Code und platzieren ihn irgendwo an gewünschter Stelle:

DialogFragment newFragment = new NewAccountDialog();
newFragment.show(this.getFragmentManager(), "Neues Passwort speichern");

Das Pop-Up erhält den Titel „Neues Passwort speichern“. Dieser Titel wird allerdings, je nach Android Version, nicht immer angezeigt.

Marvin

Ich bin 23 Jahre jung und studiere zurzeit Wirtschaftsinformatik an der Georg-August-Universität in Göttingen. Ich bin ein Mensch, der sich neben der Programmierung noch für tausend andere Dinge interessiert, die mal mehr und mal weniger verrückt sind. Vor allem aber bin ich Feuer und Flamme mit der Programmierung von eigenen kleinen Apps und Programmen, die mein Leben bereichern.

Kommentar hinzufügen

*Pflichtfeld