I’m developing an Android app and I’m stuck on a UI element. I want to create a recipient input field that works like Gmail’s ‘To’ field. Here’s what I’m aiming for:
The field should allow users to enter multiple recipients
Each recipient should appear as a separate block or chip
Once a recipient is added, their block shouldn’t be editable
Users should be able to remove entire recipient blocks
It would be great if we could add small profile pictures to each recipient block
Has anyone implemented something like this before? I’m not sure where to start or what Android components to use. Any tips, code snippets, or library suggestions would be super helpful!
Thanks in advance for your help. I’m really excited to get this feature working in my app!
I’ve tackled a similar challenge in one of my projects. Consider using the MaterialChipInput library. It’s specifically designed for creating recipient-style input fields like Gmail’s.
Key features:
Supports multiple recipient entry
Each recipient becomes a chip
Easy chip removal
Customizable appearance
For profile pictures, you can set custom drawables for each chip. Load these asynchronously to maintain performance.
One tip: Implement a custom filter to suggest recipients as the user types. This enhances usability significantly.
The library documentation is comprehensive, but feel free to ask if you need clarification on any aspect of the implementation.
hey there! i’ve used TokenAutoComplete library for this. it’s pretty neat and does most of what u want. just add it to ur gradle file and customize the TokenView. for profile pics, u can set a drawable as the token icon. it’s not perfect but gets the job done. good luck with ur app!
I’ve actually implemented something similar in one of my projects. The key component you’re looking for is called ChipGroup in Android’s Material Design library. It’s perfect for creating those recipient blocks you’re describing.
Here’s a quick rundown of how I approached it:
Use an AutoCompleteTextView for input
When a recipient is selected, create a new Chip and add it to the ChipGroup
Set up a click listener on each Chip for removal
For the profile pictures, you can use Chip.setChipIcon() method. Just make sure to load the images asynchronously to keep things smooth.
One gotcha to watch out for: handling backspace when the input is empty. You’ll want to remove the last Chip in this case.
It took some trial and error, but the end result was pretty slick. Feel free to ask if you need more specifics on implementation!