1

enter image description here

how to create android Multi Auto-Complete Text-View with chips

Amaldev
  • 983
  • 8
  • 10

2 Answers2

4

I created a simple library for this purpose : https://github.com/Plumillon/ChipView

Here a quickstart :

Add ChipView to your layout or create it programmatically :

<com.plumillonforge.android.chipview.ChipView
    android:id="@+id/chipview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Init it with a list of data which extend Chip interface and add a click listener (if you want) :

List<Chip> chipList = new ArrayList<>();
chipList.add(new Tag("Lorem"));
chipList.add(new Tag("Ipsum dolor"));
chipList.add(new Tag("Sit amet"));
chipList.add(new Tag("Consectetur"));
chipList.add(new Tag("adipiscing elit"));
ChipView chipDefault = (ChipView) findViewById(R.id.chipview);
chipDefault.setChipList(chipList);
chipDefault.setOnChipClickListener(new OnChipClickListener() {
        @Override
        public void onChipClick(Chip chip) {
            // Action here !
        }
    });

Default ChipView is rendered like this :

Default ChipView

But you can customise as you like from overall to Chip level :

Overall ChipView Custom ChipView

This isn't a MultiAutocomplete but you can manage to mimic it (I'm actually using it like that)

Plumillon Forge
  • 1,659
  • 1
  • 16
  • 31
  • Could you expand this answer to show some code and the output using your library? – josliber Sep 29 '15 at 17:26
  • Plumillon Forge, Is there a way to make a chipview horizontally scrollable? In the sense that it only takes a single line, not multiple lines. – Michele La Ferla Oct 03 '16 at 14:22
  • @code.mi There is not at the moment, I have to do it since you're not the only one asking – Plumillon Forge Oct 04 '16 at 07:04
  • That would be awesome, as you would be the first to implement this kind of layout. Thanks a million for your contribution. – Michele La Ferla Oct 04 '16 at 07:08
  • @PlumillonForge how to disable a chipview – susaine Aug 11 '17 at 04:40
  • @PlumillonForge, I have been following your documentation on GitHub, and have implemented the chipView in my code. However, I don't know where to start with merging this with or mimicing MultiAutocomplete. Do you have any pointers to get me started? – Christopher Mills Nov 22 '17 at 20:04
  • @ChristopherMills ChipView is extending ViewGroup (you can't type in there) so I think you will have to play a little with the code. Maybe you can do a little trick with an Autocomplete view next to the ChipView ? – Plumillon Forge Nov 25 '17 at 18:33
1

Material Design specifications include something called chips, which do what you are asking for. A library is found here.

MusicMaster
  • 549
  • 4
  • 14