Autofill in „Komponieren“

Einige Apps wie Passwortmanager können die Komponenten in anderen Apps mit Daten ausfüllen, die vom Nutzer bereitgestellt werden. Apps, die Komponenten anderer Apps ausfüllen, werden als Autofill-Dienste bezeichnet. Das Autofill-Framework verwaltet die Kommunikation zwischen einer App und einem Autofill-Dienst.

Das Ausfüllen von Anmeldedaten und Formularen ist zeitaufwendig und fehleranfällig. Mit Autofill können Nutzer Zeit sparen, die sie mit dem Ausfüllen von Feldern verbringen würden, und Nutzereingabefehler minimieren.

Mit nur wenigen Codezeilen können Sie Autofill in Compose implementieren. Diese Funktion bietet Nutzern folgende Vorteile:

Anmeldedaten ausfüllen

Mit Autofill können Nutzer ihre Anmeldedaten auf folgende Weise eingeben:

  • Das System zeigt Autofill-Vorschläge für den Nutzer an, wenn er in ein Feld tippt, in dem Autofill-Semantik festgelegt ist.
  • Das System zeigt Autofill-Vorschläge für den Nutzer an und filtert sie anhand der Eingabe des Nutzers.

Anmeldedaten speichern

Nutzer können Anmeldedaten über Autofill auf folgende Weise speichern:

  • Das System löst ein Speicherdialogfeld aus, in dem der Nutzer aufgefordert wird, Informationen zu speichern, wenn er neue oder aktualisierte Informationen in ein Autofill-fähiges Feld eingibt. Es gibt zwei Möglichkeiten zum Speichern:
    • Explizit durch Bestätigen von Informationen (z. B. durch Klicken auf eine Schaltfläche)
    • Implizit, wenn ein Nutzer die Seite verlässt
  • Je nach Anmeldedatenanbieter schlägt das System dem Nutzer möglicherweise ein starkes Passwort vor, wenn für ein Feld ContentType.NewPassword festgelegt ist.

Sie können Autofill in Ihrer App verwenden, um den Abruf gespeicherter Daten für Nutzer zu optimieren. Autofill unterstützt Textkomponenten über BasicTextField und alle Material-Textfelder, die auf dieser Komponente basieren.

Autofill einrichten

Bevor Sie die Autofill APIs auf Ihrem Gerät oder Emulator verwenden können, müssen Sie Autofill in den Einstellungen aktivieren. Dort können Sie einen Anmeldedatenanbieter für Autofill angeben, bei dem Ihre Anmeldedaten gespeichert werden.

Eine Einstellungsseite, auf der gezeigt wird, wie ein Anmeldedatenanbieter angegeben wird.
Abbildung 1. Eine Einstellungsseite, auf der Sie einen Anmeldedatenanbieter angeben können.

Autofill mit Inhaltstyp zu einem Textfeld hinzufügen

Um anzugeben, dass ein TextField Autofill-fähig ist, legen Sie die ContentType-Semantik mit den Typen fest, die das Feld akzeptieren kann. Dadurch wird Autofill-Diensten mitgeteilt, welche Art von Nutzerdaten für dieses bestimmte Feld relevant sein könnten. Verwenden Sie ContentType.Username, um ein TextField festzulegen, in das Nutzer ihren Nutzernamen eingeben können.

Durch Festlegen der ContentType-Semantik können Ihre Nutzer auf Autofill-Informationen zugreifen, die bereits im Anmeldedatenanbieter ihres Geräts gespeichert sind. Wenn sich ein Nutzer beispielsweise bereits über den Chrome-Browser auf seinem Laptop in Ihrer App angemeldet und sein Passwort über einen Anmeldedatenanbieter gespeichert hat, werden ihm seine Anmeldedaten über Autofill bereitgestellt.

Wertbasiertes Textfeld

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics { contentType = ContentType.Username }
)

Statusbasiertes Textfeld

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)

Autofill-Felder mit mehreren Typen hinzufügen

In einigen Fällen soll Ihr TextField möglicherweise mehr als einen ContentType annehmen. In einem Anmeldefeld kann beispielsweise eine E-Mail-Adresse oder ein Nutzername akzeptiert werden. Sie können Ihrem TextField mit dem Operator + mehrere Inhaltstypen hinzufügen.

Alle Datentypen, die mit Autofill gespeichert werden können, finden Sie in der ContentType Referenz.

Wertbasiertes Textfeld

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)

Statusbasiertes Textfeld

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)

Daten mit Autofill ausfüllen

Wenn Sie in einem TextField einen ContentType hinzufügen, müssen Sie nichts weiter tun, damit Nutzer Anmeldedaten eingeben können.

Wenn ein Nutzer in ein Autofill-fähiges Feld klickt und relevante Daten gespeichert sind, wird in der Symbolleiste über der Tastatur ein Chip angezeigt, in dem er aufgefordert wird, Anmeldedaten einzugeben.

Chips in der Textsymbolleiste mit gespeicherten Anmeldedaten.
Abbildung 2. Chips in der Textsymbolleiste mit gespeicherten Anmeldedaten.

Daten mit Autofill über die Navigation speichern

Compose versucht automatisch zu ermitteln, wann ein Nutzer eine Seite verlässt und die eingegebenen Anmeldedaten bestätigt. Sobald ein Feld Autofill-fähig ist, werden die Anmeldedaten automatisch gespeichert, wenn ein Nutzer die Seite verlässt. Zusätzlicher Code ist nicht erforderlich.

Daten explizit mit Autofill speichern

Wenn Sie neue Anmeldedaten explizit über Textfelder mit Autofill speichern möchten, muss der Autofill-Kontext vom Autofill-Manager bestätigt (oder abgebrochen) werden. Der lokale Autofill-Manager kommuniziert dann bei Bedarf mit dem Autofill-Framework. Wenn Sie Anmeldedaten entfernen möchten, die der Nutzer eingegeben hat, rufen Sie AutofillManager.cancel auf, um alle ausstehenden Daten zu löschen, ohne sie zu speichern.

In den folgenden Snippets wird gezeigt, wie Sie Daten mit Autofill explizit über eine Schaltfläche speichern:

  1. Erstellen Sie eine lokale Variable für den Autofill-Manager, die so abgerufen werden kann: 

    val autofillManager = LocalAutofillManager.current

  2. Fügen Sie in Ihren TextField(s) den ausgewählten Inhaltstyp über Modifier.semantics hinzu:

    • Bei wertbasierten Textfeldern: 

      val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewUsername }
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewPassword }
    )
}

    • Bei statusbasierten Textfeldern: 

      val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewUsername }
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewPassword }
    )
}

  3. Bestätigen Sie den Autofill-Kontext nach Bedarf durch Klicken auf eine Schaltfläche:

    • Bei wertbasierten Textfeldern: 

      val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        value = usernameTextFieldValue.value,
        onValueChange = { usernameTextFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewUsername },
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        value = passwordTextFieldValue.value,
        onValueChange = { passwordTextFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewPassword },
    )

    // Submit button
    Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
}

    • Bei statusbasierten Textfeldern: 

      val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewUsername },
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewPassword },
    )

    // Submit button
    Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
}

Commit wird immer aufgerufen, wenn ein Nutzer den Bildschirm verlässt. Wenn eine Senden-Schaltfläche mit der Navigation verknüpft ist, muss Commit nicht aufgerufen werden. Wenn Sie möchten, dass durch Klicken auf Senden das Speicherdialogfeld ausgelöst wird, fügen Sie hier Commit hinzu.

Wenn der Nutzer auf die Schaltfläche klickt, wird dieses untere Blatt angezeigt, in dem er aufgefordert wird, die Anmeldedaten beim ausgewählten Anmeldedatenanbieter zu speichern:

Ansicht am unteren Rand, in der Nutzer aufgefordert werden, das Passwort zu speichern.
Abbildung 3. Ansicht am unteren Rand, in der Nutzer aufgefordert werden, das Passwort zu speichern.

Daten mit Autofill über „Starkes Passwort vorschlagen“ speichern

Je nach Anmeldedatenanbieter sehen Nutzer bei Verwendung der Inhaltstypen NewUsername und NewPassword möglicherweise eine Schaltfläche auf der Tastatur, mit der sie ein starkes Passwort vorschlagen können. Wenn sie darauf klicken, wird eine Ansicht am unteren Rand angezeigt, auf der sie ihre Anmeldedaten speichern können. Sie müssen nichts weiter implementieren, damit Nutzer diese Funktion nutzen können.

Der Chip „Starkes Passwort vorschlagen“ in der Tastatursymbolleiste.
Abbildung 4. Der Chip „Starkes Passwort vorschlagen“ in der Tastatur symbolleiste.
Ansicht am unteren Rand, in der Nutzer aufgefordert werden, ein starkes Passwort zu verwenden.
Abbildung 5. Ansicht am unteren Rand, in der Nutzer aufgefordert werden, ein starkes Passwort zu verwenden.

Fehlerbehebung

Wenn Sie den Nutzerprozess zum Speichern aufrufen und mehr als einmal auf „Nicht jetzt“ klicken, wird das untere Blatt möglicherweise nicht mehr von Ihrem Anmeldedatenanbieter angezeigt. Um es wieder zu aktivieren und noch einmal anzuzeigen, müssen Sie bestimmte Apps entfernen, die die Option „Passwort speichern?“ blockiert haben.

Ansicht am unteren Rand, in der Nutzer aufgefordert werden, das Passwort zu speichern.
Abbildung 6. Ansicht am unteren Rand, in der Nutzer aufgefordert werden, das Passwort zu speichern.

Autofill weiter anpassen

In einem typischen Autofill-Nutzerprozess ändert sich die Farbe einer Autofill-fähigen Komponente und sie wird hervorgehoben, wenn sie mit Anmeldedaten gefüllt wurde. So wird dem Nutzer signalisiert, dass Autofill erfolgreich abgeschlossen wurde.

Wenn Sie diese Hervorhebungsfarbe anpassen möchten, verwenden Sie CompositionLocal und geben Sie die gewünschte Farbe an. Die Standardfarbe für die Autofill-Hervorhebung ist Color(0x4dffeb3b).

Wertbasierte Textfelder

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}

Statusbasierte Textfelder

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}