Blog Infos
Author
Published
Topics
, ,
Author
Published

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
)
}
view raw MyTextField.kt hosted with ❤ by GitHub

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 **/ },
)
}
}
view raw My Screen.kt hosted with ❤ by GitHub

Job Offers

Job Offers


    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Mobile Engineer

    OLX Group
    Remote, Portugal, Spain, Romania, Poland
    • Full Time
    apply now

OUR VIDEO RECOMMENDATION

,

Beyond the Basics: Performance Monitoring and User Experience for Mobile App Growth

When interacting with a mobile app that regularly crashes or freezes, 53% of users uninstalled the app, 37% stopped using it, and 28% looked for a replacement. Users are no longer forgiving mobile app mishaps…
Watch Video

Beyond the Basics: Performance Monitoring and User Experience for Mobile App Growth

Moataz Soliman
CTO
Instabug

Beyond the Basics: Performance Monitoring and User Experience for Mobile App Growth

Moataz Soliman
CTO
Instabug

Beyond the Basics: Performance Monitoring and User Experience for Mobile App Growth

Moataz Soliman
CTO
Instabug

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()
}
)
)
}
view raw SampleScreen.kt hosted with ❤ by GitHub

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.

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu