{"id":15130119,"url":"https://github.com/pchmn/materialchipsinput","last_synced_at":"2025-05-15T07:04:24.367Z","repository":{"id":38205712,"uuid":"88212936","full_name":"pchmn/MaterialChipsInput","owner":"pchmn","description":"Implementation of Material Design Chips component for Android","archived":false,"fork":false,"pushed_at":"2024-01-19T10:31:53.000Z","size":49285,"stargazers_count":2624,"open_issues_count":113,"forks_count":384,"subscribers_count":46,"default_branch":"master","last_synced_at":"2025-05-15T07:04:10.986Z","etag":null,"topics":["android","android-library","chips","library","material-design"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pchmn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-13T22:55:48.000Z","updated_at":"2025-04-06T23:03:44.000Z","dependencies_parsed_at":"2024-10-09T16:51:21.513Z","dependency_job_id":null,"html_url":"https://github.com/pchmn/MaterialChipsInput","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pchmn%2FMaterialChipsInput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pchmn%2FMaterialChipsInput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pchmn%2FMaterialChipsInput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pchmn%2FMaterialChipsInput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pchmn","download_url":"https://codeload.github.com/pchmn/MaterialChipsInput/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292039,"owners_count":22046426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-library","chips","library","material-design"],"created_at":"2024-09-26T02:30:53.381Z","updated_at":"2025-05-15T07:04:19.346Z","avatar_url":"https://github.com/pchmn.png","language":"Java","readme":"## [CURRENT SITUATION OF THE LIBRARY]\n\n⚠️ The library is currently not maintained.\n\n# MaterialChipsInput\n\nImplementation of Material Design [Chips](https://material.io/guidelines/components/chips.html) component for Android. The library provides two views : [`ChipsInput`](#chipsinput) and [`ChipView`](#chipview).\n\n[![Release](https://jitpack.io/v/pchmn/MaterialChipsInput.svg)](https://jitpack.io/#pchmn/MaterialChipsInput)\n\n\u003cimg src=\"https://github.com/pchmn/MaterialChipsInput/blob/master/docs/demo2.gif\" alt=\"Demo\" height=\"600px\"/\u003e\n\n## Demo\n[Download sample-v1.0.8.apk](https://github.com/pchmn/MaterialChipsInput/raw/master/docs/material-chips-input-sample-v1.0.8.apk)\n\n## Setup\n\nTo use this library your `minSdkVersion` must be \u003e= 15.\n\nIn your project level build.gradle :\n```java\nallprojects {\n    repositories {\n        ...\n        maven { url \"https://jitpack.io\" }\n    }\n}       \n```\n\nIn your app level build.gradle :\n```java\ndependencies {\n    compile 'com.github.pchmn:MaterialChipsInput:1.0.8'\n}      \n```\n\u003cbr\u003e\u003cbr\u003e\n## ChipsInput\nThis view implements the Material Design [Contact chips component](https://material.io/guidelines/components/chips.html#chips-contact-chips). \n\nIt is composed of a collection of chips (`ChipView`) and an input (`EditText`). Touching a chip open a full detailed view (if non disable). The [GIF](#materialchipsinput) above describes the behavior of the `ChipsInput` view.\n\nBut everything is configurable (optional avatar icon, optional full detailed view, ...) so you can use the `ChipsInput` view for non contact chips.\n### Basic Usage\n\n#### XML\nUse the ChipsInput view in your layout with default options  :\n\n```xml\n\u003ccom.pchmn.materialchips.ChipsInput\n        android:id=\"@+id/chips_input\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:hint=\"Enter a name\" /\u003e\n```\nYou can also customize it ([see](#chipsinput-attributes) all attributes) :\n```xml\n\u003ccom.pchmn.materialchips.ChipsInput\n        android:id=\"@+id/chips_input\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:hint=\"Enter a name\"\n        app:hintColor=\"@color/customColor\"\n        app:textColor=\"@color/customColor\"\n        app:maxRows=\"3\"\n        app:chip_labelColor=\"@color/customColor\"\n        app:chip_hasAvatarIcon=\"true\"\n        app:chip_backgroundColor=\"@color/customColor\"\n        app:chip_deletable=\"false\"\n        app:chip_deleteIconColor=\"@color/customColor\"\n        app:chip_detailed_textColor=\"@color/customColor\"\n        app:chip_detailed_backgroundColor=\"@color/customColor\"\n        app:chip_detailed_deleteIconColor=\"@color/customColor\"\n        app:filterable_list_backgroundColor=\"@color/customColor\"\n        app:filterable_list_textColor=\"@color/customColor\" /\u003e\n```\n\n#### Suggestions\nYou can pass a `List\u003c? extends ChipInterface\u003e` object, which represents your suggestions, to the `ChipsInput` view, so it will work as a\n`MultiAutoCompleteTextView` :\n\n##### 1. Create a class that implements `ChipInterface` (or use directly the [`Chip`](https://github.com/pchmn/MaterialChipsInput/blob/master/library/src/main/java/com/pchmn/materialchips/model/Chip.java) class included in the library) :\n```java\npublic class ContactChip implements ChipInterface {\n    ...\n}\n```\n\n##### 2. Then in your activity, or anything else, build your suggestion list of `ContactChip` (or `Chip`) and pass it to the `ChipsInput` view :\n```java\n// get ChipsInput view\nChipsInput chipsInput = (ChipsInput) findViewById(R.id.chips_input);\n\n// build the ContactChip list\nList\u003cContactChip\u003e contactList = new ArrayList\u003c\u003e();\ncontactList.add(new ContactChip()); \n...\n\n// pass the ContactChip list\nchipsInput.setFilterableList(contactList);\n```\n\n#### Get the selected list\nWhen you want you can get the current list of chips selected by the user :\n```java\n// get the list\nList\u003cContactChip\u003e contactsSelected = (List\u003cContactChip\u003e) chipsInput.getSelectedChipList();\n```\n\nThat's it, there is nothing more to do.\n\u003cbr\u003e\u003cbr\u003e\n### Advanced Usage\n#### ChipsListener\nThe `ChipsInput` view provides a listener to interact with the input :\n```java\nchipsInput.addChipsListener(new ChipsInput.ChipsListener() {\n            @Override\n            public void onChipAdded(ChipInterface chip, int newSize) {\n                // chip added\n                // newSize is the size of the updated selected chip list\n            }\n\n            @Override\n            public void onChipRemoved(ChipInterface chip, int newSize) {\n                // chip removed\n                // newSize is the size of the updated selected chip list\n            }\n\n            @Override\n            public void onTextChanged(CharSequence text) {\n                // text changed\n            }\n        });\n```\n\n#### Add and remove chips manually\nYou don't have to pass a `List\u003c? extends ChipInterface\u003e` to the `ChipsInput` view and you can do the trick manually. Thanks to the `ChipsListener` you can be notified when the user is typing and do your own work.\n\n```java\nChipsInput chipsInput = (ChipsInput) findViewById(R.id.chips_input);\n```\n\n##### Add a chip\nThere are multiple implementations :\n```java\nchipsInput.addChip(ChipInterface chip);\n// or\nchipsInput.addChip(Object id, Drawable icon, String label, String info);\n// or\nchipsInput.addChip(Drawable icon, String label, String info);\n// or\nchipsInput.addChip(Object id, Uri iconUri, String label, String info);\n// or\nchipsInput.addChip(Uri iconUri, String label, String info);\n// or\nchipsInput.addChip(String label, String info);\n```\n\n##### Remove a chip\nThere are multiple implementations :\n```java\nchipsInput.removeChip(ChipInterface chip);\n// or\nchipsInput.removeChipById(Object id);\n// or\nchipsInput.removeChipByLabel(String label);\n// or\nchipsInput.removeChipByInfo(String info);\n```\n\nAfter you added or removed a chip the `ChipsListener` will be triggered.\n\n##### Get the selected list\nWhen you want you can get the current list of chips selected by the user :\n```java\n// get the list\nList\u003cChipInterface\u003e contactsSelected = chipsInput.getSelectedChipList();\n```\n\n### ChipsInput attributes\n\nAttribute | Type | Description | Default\n--- | --- | --- | ---\n`app:hint` | `string` | Hint of the input when there is no chip | null\n`app:hintColor` | `color` | Hint color | android default \n`app:textColor` | `color` | Text color when user types | android default\n`app:maxRows` | `int` | Max rows of chips | 2\n`app:chip_labelColor` | `color` | Label color of the chips | android default\n`app:chip_hasAvatarIcon` | `boolean` | Whether the chips have avatar icon or not | true\n`app:chip_deletable` | `boolean` | Whether the chips are deletable (delete icon) or not | false\n`app:chip_deleteIconColor` | `color` | Delete icon color of the chips | white/black\n`app:chip_backgroundColor` | `color` | Background color of the chips | grey\n`app:showChipDetailed` | `boolean` | Whether to show full detailed view or not when touching a chip | true\n`app:chip_detailed_textColor` | `color` | Full detailed view text color | white/balck\n`app:chip_detailed_backgroundColor` | `color` | Background color of the full detailed view | colorAccent\n`app:chip_detailed_deleteIconColor` | `color` | Delete icon color of the full detailed view | white/black\n`app:filterable_list_backgroundColor` | `color` | Background color of the filterable list of suggestions | white\n`app:filterable_list_textColor` | `color` | Text color of the filterable list of suggestions | black\n\n\u003cbr\u003e\u003cbr\u003e\n## ChipView\nThis view implements the chip component according to the [Material Design guidelines](https://material.io/guidelines/components/chips.html#chips-usage) with configurable options (background color, text color, ...).\n\n\u003cimg src=\"https://github.com/pchmn/MaterialChipsInput/blob/master/docs/chips-examples.png\" alt=\"Chips examples\" width=\"50%\"/\u003e\n\n### Usage\n```xml\n\u003ccom.pchmn.materialchips.ChipView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            app:label=\"Chip 1\" /\u003e\n            \n\u003ccom.pchmn.materialchips.ChipView\n                android:layout_width=\"wrap_content\"\n                android:layout_height=\"wrap_content\"\n                app:label=\"Chip 4\"\n                app:hasAvatarIcon=\"true\" /\u003e\n\n\u003ccom.pchmn.materialchips.ChipView\n                android:layout_width=\"wrap_content\"\n                android:layout_height=\"wrap_content\"\n                app:label=\"Chip 6\"\n                app:labelColor=\"@android:color/white\"\n                app:avatarIcon=\"@drawable/avatar\"\n                app:backgroundColor=\"@android:color/holo_blue_light\"\n                app:deletable=\"true\"\n                app:deleteIconColor=\"@android:color/white\" /\u003e\n    \n```\n\n### ChipView attributes\n\nAttribute | Type | Description | Default\n--- | --- | --- | ---\n`app:label` | `string` | Label of the chip | null\n`app:labelColor` | `color` | Label color of the chip | android default\n`app:hasAvatarIcon` | `boolean` | Whether the chip has avatar icon or not | false\n`app:avatarIcon` | `drawable` | Avatar icon resource | null\n`app:deletable` | `boolean` | Whether the chip is deletable (delete icon) or not | false\n`app:deleteIconColor` | `color` | Delete icon color of the chip | grey\n`app:backgroundColor` | `color` | Background color of the chip | grey\n\n### Listeners\n```java\nChipView chip = (ChipView) findViewById(R.id.chip_view);\n```\n\nOn chip click listener :\n```java\nchip.setOnChipClicked(new View.OnClickListener() {\n    @Override\n    public void onClick(View view) {\n        // handle click    \n    }\n});\n```\n\nOn delete button click listener :\n```java\nchip.setOnDeleteClicked(new View.OnClickListener() {\n    @Override\n    public void onClick(View view) {\n        // handle click     \n    }\n});\n```\n\u003cbr\u003e\u003cbr\u003e\n## Sample\n\nA sample app with some use cases of the library is available on this [link](https://github.com/pchmn/MaterialChipsInput/tree/master/sample)\n\nYou can also download the sample APK [here](https://github.com/pchmn/MaterialChipsInput/raw/master/docs/material-chips-input-sample-v1.0.0.apk)\n\n## Credits\n\n* [Android Material Chips](https://github.com/DoodleScheduling/android-material-chips)\n* [Material Chip View](https://github.com/robertlevonyan/materialChipView?utm_source=android-arsenal.com\u0026utm_medium=referral\u0026utm_campaign=5396)\n* [ChipsLayoutManager](https://github.com/BelooS/ChipsLayoutManager)\n\n## License\n\n```\nCopyright 2017 pchmn\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpchmn%2Fmaterialchipsinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpchmn%2Fmaterialchipsinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpchmn%2Fmaterialchipsinput/lists"}