Autofilling in the Blanks

If you have forms in your app that collect user information, autofill is one of the easiest accessibility wins you can add. Autofill is both an accessibility and a usability feature. And you can support it with just a few lines of code.

What is Autofill?

So, what is autofill, anyway? It's a technique that uses previously saved data to fill in text fields without having to type the full text. Typically, the data types are related to the user's name, address, email, or password, to mention a couple of examples.

There are different autofill services for Android; some provide more data than others. Most of them are various password managers, but Google's service, for instance, also provides account-related data. You can find the autofill settings in your phone's settings. On Pixel, the setting group is called "Passwords, passkeys and accounts". You'll need to set a service as the preferred one to make autofill work properly.

Autofill is also an accessibility feature. Let's look into that next.

Autofill is an Accessibility Feature

Supporting autofill for form fields helps people of all kinds. For example, if typing is difficult for you for any reason, like limited mobility, trembling hands, or fingers freezing outside, being able to use autofill services makes your life so much easier.

Autofill also helps with avoiding spelling mistakes - when the data is already available and can be just filled out, you don't need to stress about making mistakes when writing your address, for example.

And autofill makes it faster if you're in a hurry and need to buy a ticket somewhere. So, autofill has many great use cases. But how do you support it? Let's look at the details.

Autofill and Compose

Compose used to have an Autofill API for requesting autofill, but it was deprecated with Compose 1.8.0. Autofill is now requested with the new semantics-based autofill API.

Supported Types

As mentioned before, autofill supports different kinds of data. I'll list some of the types:

• Address-related data
  • Street (AddressStreet)
  • Region (AddressRegion)
  • Country (AddressCountry)
• Name-related data
  • Full name (PersonFullName)
  • First name (PersonFirstName)
  • Last name (PersonLastName)
• Login-related data
  • New username (NewUsername)
  • Username (Username)
  • New password (NewPassword)
  • Username (Password)

The complete list is available at ContentType's documentation.

Filling the Data

So, how do you use autofill? It's straightforward. You just define the contentType inside the semantics-modifier:

TextField(
  ...
  modifier = Modifier
    .semantics {
      contentType = ContentType.PersonFirstName
    }
)

So, if we wanted to define a form to ask users' first and last names, we'd write it something like:

Column(...) {
    var firstNameTextFieldValue by remember {
        mutableStateOf(TextFieldValue(""))
    }
    var lastNameTextFieldValue by remember {
        mutableStateOf(TextFieldValue(""))
    }

    TextField(
        value = firstNameTextFieldValue,
        onValueChange = {
            firstNameTextFieldValue = it
        },
        modifier = Modifier
            .semantics {
                contentType = ContentType.PersonFirstName
            },
        label = {
            Text("First name")
        }
    )

    TextField(
        value = lastNameTextFieldValue,
        onValueChange = {
            lastNameTextFieldValue = it
        },
        modifier = Modifier
            .semantics {
                contentType = ContentType.PersonLastName
            },
        label = {
            Text("Last name")
        }
    )
}

And how does this look on a device? Here's a video:

Saving Data

We now know how to support autofilling from different providers. But how do we save the user's input so they can use it later?

There are three options:

1. Save data when navigating
2. Save data explicitly
3. Save data when the autofill service suggests a password

Saving data when navigating

This option is effortless: As long as autofill is enabled, the credential data is saved when the user navigates away from the page where they input the data to a text field with a content type. No additional code is required; it's all automagic.

Saving data explicitly

However, if the automatic behavior is not enough, then we can also explicitly save the credential data from text fields. Let's say you have a settings page with a text field for name, and when the user changes their name there and submits the data, they stay on the same page.

For that, we need an autofill manager and a block where we commit the data. Let's start with the first one, which we can get as a LocalComposition called LocalAutofillManager:

val autofillManager = LocalAutofillManager.current

Then, we'll need to use its commit method to commit the data. We could add a Button to the previous example:

Column(...) {
  // Text fields

  Button(
     onClick = {
      autofillManager?.commit()
    } 
  ) {
    Text("Save")
  }
} 

When the user clicks the "Save" button, their data is committed to the autofill manager.

Saving data with password and username suggestion

There's a third option for users to save the data when the input fields use NewUsername or NewPassword content types. If the credential provider they're using provides a "Suggest strong password" prompt, clicking it opens a bottom sheet that lets them store the credentials. No additional code needed.

Wrapping Up

In this blog post, we've discussed using autofill and how it's an accessibility feature. We've also looked into how you can support it on your app, with just a few lines of code. Autofill in Compose-page provides more information about, e.g., further customizing the autofill with highlights for autofilled data, so be sure to check it out as well.

Does your app collect user information, and if it does, does it support autofill? Anything interesting you've come across?

Links in the Blog Post

• Autofill API
• ContentType's documentation
• Autofill in Compose