Hello Developers, this would be a small, on-point article on why you should consider using IME Actions and how it enhances the user’s experience.
As stated in Android Documentation, IME Action directs the keyboard what type of action should be displayed.
This depends on you (the developer) to change the IME Action according to your needs. For example, a text field intended to be used as a search bar would contain the search IME Action and so on…
🤔 How does it enhance the user’s experience?
Imagine you have a screen where there are two fields below each other, specifically a username and password field. Most probably, the user would start entering their username and then they’ll move to the password field. Any ideas on how would you improve your user’s experience here? By adding a “Move to next” IME Action.
These recordings are from my upcoming Open source project “Slime”. Follow me on Github to stay updated when it’s Live.
🎉 Bonus: Learn how to move the focus from one text field to another (Jetpack Compose).
Have you ever seen the keyboardOptionsand keyboardActions parameter inside TextField Composable? They do exactly what they say. Keyboard Options can be used to handle options such as to toggle auto-correct, capitalization, the keyboard type, and the IME Action as well. I have created a sample stateless text field (below) that can be reused as per our needs. Keyboard Actions can be used to detect clicks on IME Actions. For example, the IME Action you set on your keyboard is IMEAction.Done so you can do something like this,
keyboardActions = KeyboardActions(
onDone = {
// Do something intresting
})
| @Composable | |
| fun MyTextField( | |
| modifier: Modifier = Modifier, | |
| text: String, | |
| onTextChange: (String) -> Unit, | |
| keyboardOptions: KeyboardOptions = KeyboardOptions(), | |
| keyboardActions: KeyboardActions = KeyboardActions() | |
| ) { | |
| TextField( | |
| modifier = modifier, | |
| value = text, | |
| onValueChange = onTextChange, | |
| keyboardOptions = keyboardOptions, | |
| keyboardActions = keyboardActions | |
| ) | |
| } |
Till now you may be clear of those two options so let’s move on and learn the next part, i.e to move the focus from one field to another.
You can use FocusManager to move your text field’s focus in Jetpack Compose and it’s pretty easy. The username field’s IME Action is of type Next (indicates pressing it will move the focus to the next text field, i.e. the Password field) and on clicking it, we request our FocusManager to moveFocus in down direction and rest is handled by the same.
| @Composable | |
| fun MyScreen() { | |
| val focusManager = LocalFocusManager.current | |
| Column { | |
| // Username Field | |
| MyTextField( | |
| text = "Enter your username", | |
| onTextChange = { /** Update state **/ }, | |
| keyboardOptions = KeyboardOptions( | |
| imeAction = ImeAction.Next | |
| ), | |
| keyboardActions = KeyboardActions( | |
| onNext = { | |
| // Pressing Ime button would move the text indicator's focus to the bottom | |
| // field, if it exists! | |
| focusManager.moveFocus(FocusDirection.Down) | |
| } | |
| ) | |
| ) | |
| // Password Field | |
| MyTextField( | |
| text = "Enter your Password", | |
| onTextChange = { /** Update state **/ }, | |
| ) | |
| } | |
| } |
Job Offers
OUR VIDEO RECOMMENDATION
Jobs
Let’s continue: After your user enters their password, they will be clicking the “Confirm Registration” button, and did you notice in the above screen-recording that when the focus is on the password field, the IME Action changes to a “Checkmark” as it indicates “Done”. Guess what? The user expects this IME Action to do the same as your confirm button would, i.e. register the user.
| @Composable | |
| fun MyScreen() { | |
| // val focusManager = LocalFocusManager.current | |
| Column { | |
| // Username Field | |
| MyTextField(...) | |
| // Password Field | |
| MyTextField( | |
| text = "Enter your Password", | |
| onTextChange = { /** Update state **/ }, | |
| keyboardOptions = KeyboardOptions( | |
| imeAction = ImeAction.Done | |
| ), | |
| keyboardActions = KeyboardActions( | |
| onDone = { | |
| // This would do the same as the register button would | |
| // registerUser() | |
| } | |
| ) | |
| ) | |
| } |
If you want to learn more about all types of available IME Actions, which one should be used where, please refer to the official Android Documentation.
Now there should not be any doubts on why you should take IME Actions into consideration as it makes user’s life easier (and a bit hard for us but that’s fine). In short, these small improvements are what matter the most to your users and motivate you to further improve their experience.
Thank you for reading till here. if you have any questions related to this article, you can connect with me on Twitter.
