├── .gitignore
├── .idea
├── codeStyles
│ └── Project.xml
├── compiler.xml
├── gradle.xml
├── jarRepositories.xml
├── misc.xml
├── runConfigurations.xml
└── vcs.xml
├── LICENSE
├── README.md
├── app
├── .gitignore
├── .idea
│ ├── .gitignore
│ ├── gradle.xml
│ ├── misc.xml
│ ├── modules.xml
│ ├── runConfigurations.xml
│ └── vcs.xml
├── build.gradle
├── local.properties
├── proguard-rules.pro
└── src
│ ├── androidTest
│ └── java
│ │ └── com
│ │ └── souringhosh
│ │ └── materialchipapplication
│ │ └── ExampleInstrumentedTest.kt
│ ├── main
│ ├── AndroidManifest.xml
│ ├── java
│ │ └── com
│ │ │ └── souringhosh
│ │ │ └── materialchipapplication
│ │ │ └── MainActivity.kt
│ └── res
│ │ ├── drawable-v24
│ │ └── ic_launcher_foreground.xml
│ │ ├── drawable
│ │ └── ic_launcher_background.xml
│ │ ├── layout
│ │ └── activity_main.xml
│ │ ├── mipmap-anydpi-v26
│ │ ├── ic_launcher.xml
│ │ └── ic_launcher_round.xml
│ │ ├── mipmap-hdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-mdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ └── values
│ │ ├── colors.xml
│ │ ├── strings.xml
│ │ └── styles.xml
│ └── test
│ └── java
│ └── com
│ └── souringhosh
│ └── materialchipapplication
│ └── ExampleUnitTest.kt
├── build.gradle
├── gradle.properties
├── gradle
└── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
└── settings.gradle
/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .gradle
3 | /local.properties
4 | /.idea/caches/build_file_checksums.ser
5 | /.idea/libraries
6 | /.idea/modules.xml
7 | /.idea/workspace.xml
8 | .DS_Store
9 | /build
10 | /captures
11 | .externalNativeBuild
12 |
--------------------------------------------------------------------------------
/.idea/codeStyles/Project.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/.idea/compiler.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/.idea/gradle.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
19 |
20 |
--------------------------------------------------------------------------------
/.idea/jarRepositories.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
19 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/.idea/runConfigurations.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Sourin Ghosh
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # MaterialChipsInputDemo
2 | Using the new material library from google to implement Chips just like the Gmail app. Using commas to generate new chips from EditText inside ChipGroup and deleting them on close icon click or backspace press from soft keypad.
3 |
4 | ## Getting Started
5 |
6 | Use this if you want to implement material chips without any 3rd party library dependency just using EditText, Chip, ChipGroup, HorizontalScrollView
7 |
8 | ### Prerequisites
9 |
10 | Must have SDK 28 included in dependency either support library or androidX and material.
11 | I have used androidX and material
12 |
13 | ```
14 | compileSdkVersion 28
15 |
16 | implementation 'com.google.android.material:material:1.0.0-rc01'
17 |
18 | ```
19 |
20 | ### Implementation
21 |
22 | Layout code
23 |
24 | ```
25 |
36 |
37 |
38 |
39 |
44 |
45 |
50 |
51 |
52 |
53 |
61 |
62 |
63 |
64 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | ```
80 |
81 | TextWatcher for adding chips on enter comma
82 |
83 | ```
84 | override fun afterTextChanged(s: Editable?) {
85 | val trimmed = s.toString().trim { it <= ' ' }
86 | if (trimmed.length > 1 && trimmed.endsWith(",")) {
87 | val chip = Chip(this@MainActivity)
88 | chip.text = trimmed.substring(0, trimmed.length - 1)
89 | chip.isCloseIconVisible = true
90 |
91 | //Callback fired when chip close icon is clicked
92 | chip.setOnCloseIconClickListener {
93 | chipGroup.removeView(chip)
94 | }
95 |
96 | chipGroup.addView(chip)
97 | s?.clear()
98 | }
99 | }
100 |
101 | ```
102 | Deletion on backspace press
103 |
104 | ```
105 | textInputEditText.setOnKeyListener { _, _, event ->
106 | if (event != null && event.action == KeyEvent.ACTION_DOWN && event.keyCode == KeyEvent.KEYCODE_DEL) {
107 | if (textInputEditText.length() == 0 && chipGroup.childCount > 0) {
108 | val chip = chipGroup.getChildAt(chipGroup.childCount - 1) as Chip
109 | chipGroup.removeView(chip)
110 | }
111 | }
112 | false
113 | }
114 |
115 | ```
116 | ## Reference
117 |
118 | [Material Chips](https://material.io/develop/android/components/chip/)
119 |
120 | ## Authors
121 |
122 | * **Sourin Ghosh** - [Sourin Ghosh](https://github.com/sourin00)
123 |
--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 |
--------------------------------------------------------------------------------
/app/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 |
--------------------------------------------------------------------------------
/app/.idea/gradle.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
--------------------------------------------------------------------------------
/app/.idea/misc.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/app/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/app/.idea/runConfigurations.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
--------------------------------------------------------------------------------
/app/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: 'com.android.application'
2 |
3 | apply plugin: 'kotlin-android'
4 |
5 | apply plugin: 'kotlin-android-extensions'
6 |
7 | android {
8 | compileSdkVersion 28
9 | defaultConfig {
10 | applicationId "com.souringhosh.materialchipapplication"
11 | minSdkVersion 21
12 | targetSdkVersion 28
13 | versionCode 1
14 | versionName "1.0"
15 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
16 | }
17 | buildTypes {
18 | release {
19 | minifyEnabled false
20 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
21 | }
22 | }
23 | }
24 |
25 | dependencies {
26 | implementation fileTree(dir: 'libs', include: ['*.jar'])
27 | implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
28 | implementation 'androidx.appcompat:appcompat:1.0.0-rc01'
29 | implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha2'
30 | // Material
31 | implementation 'com.google.android.material:material:1.0.0-rc01'
32 | testImplementation 'junit:junit:4.12'
33 | androidTestImplementation 'androidx.test:runner:1.1.0-alpha4'
34 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0-alpha4'
35 | }
36 |
--------------------------------------------------------------------------------
/app/local.properties:
--------------------------------------------------------------------------------
1 | ## This file must *NOT* be checked into Version Control Systems,
2 | # as it contains information specific to your local configuration.
3 | #
4 | # Location of the SDK. This is only used by Gradle.
5 | # For customization when using a Version Control System, please read the
6 | # header note.
7 | #Wed Jul 14 17:52:04 ICT 2021
8 | sdk.dir=/Users/pichayawatk/Library/Android/sdk
9 |
--------------------------------------------------------------------------------
/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
22 |
--------------------------------------------------------------------------------
/app/src/androidTest/java/com/souringhosh/materialchipapplication/ExampleInstrumentedTest.kt:
--------------------------------------------------------------------------------
1 | package com.souringhosh.materialchipapplication
2 |
3 | import androidx.test.InstrumentationRegistry
4 | import androidx.test.runner.AndroidJUnit4
5 |
6 | import org.junit.Test
7 | import org.junit.runner.RunWith
8 |
9 | import org.junit.Assert.*
10 |
11 | /**
12 | * Instrumented test, which will execute on an Android device.
13 | *
14 | * See [testing documentation](http://d.android.com/tools/testing).
15 | */
16 | @RunWith(AndroidJUnit4::class)
17 | class ExampleInstrumentedTest {
18 | @Test
19 | fun useAppContext() {
20 | // Context of the app under test.
21 | val appContext = InstrumentationRegistry.getTargetContext()
22 | assertEquals("com.souringhosh.materialchipapplication", appContext.packageName)
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/app/src/main/java/com/souringhosh/materialchipapplication/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package com.souringhosh.materialchipapplication
2 |
3 | import android.os.Bundle
4 | import android.text.Editable
5 | import android.text.TextWatcher
6 | import android.view.KeyEvent
7 | import androidx.appcompat.app.AppCompatActivity
8 | import com.google.android.material.chip.Chip
9 | import com.google.android.material.textfield.TextInputEditText
10 | import kotlinx.android.synthetic.main.activity_main.*
11 |
12 | class MainActivity : AppCompatActivity() {
13 |
14 | override fun onCreate(savedInstanceState: Bundle?) {
15 | super.onCreate(savedInstanceState)
16 | setContentView(R.layout.activity_main)
17 | horizontal_scroll_view.background = textInputEditText.background
18 | textInputEditText.background = null
19 |
20 | /*
21 | * Listening to text changes in the TextInputEdittext field and generate new chip on entering a comma */
22 | textInputEditText.addTextChangedListener(object: TextWatcher {
23 |
24 | override fun afterTextChanged(s: Editable?) {
25 | val trimmed = s.toString().trim { it <= ' ' }
26 | if (trimmed.length > 1 && trimmed.endsWith(",")) {
27 | val chip = Chip(this@MainActivity)
28 | chip.text = trimmed.substring(0, trimmed.length - 1)
29 | chip.isCloseIconVisible = true
30 | chip.setOnCloseIconClickListener {
31 | chipGroup.removeView(chip)
32 | }
33 | chipGroup.addView(chip)
34 | s?.clear()
35 | }
36 | }
37 |
38 | override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
39 | }
40 |
41 | override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
42 | }
43 | })
44 |
45 | /*
46 | * Deleting chips on pressing backspace on keypad*/
47 | textInputEditText.setOnKeyListener { _, _, event ->
48 | if (event != null && event.action == KeyEvent.ACTION_DOWN && event.keyCode == KeyEvent.KEYCODE_DEL) {
49 | if (textInputEditText.length() == 0 && chipGroup.childCount > 0) {
50 | val chip = chipGroup.getChildAt(chipGroup.childCount - 1) as Chip
51 | chipGroup.removeView(chip)
52 | }
53 | }
54 | false
55 | }
56 |
57 | setEmailTextAction()
58 | }
59 |
60 | private fun setEmailTextAction() {
61 | emailTextInputEditText.background = null
62 |
63 | /*
64 | * Deleting chips on pressing backspace on keypad*/
65 | emailTextInputEditText.setOnKeyListener { view, keyCode, event ->
66 | if (event != null && event.action == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_DEL) {
67 | if ((view as TextInputEditText).length() == 0 && emailChipGroup.childCount > 0) {
68 | val chip = emailChipGroup.getChildAt(emailChipGroup.childCount - 1) as Chip
69 | emailChipGroup.removeView(chip)
70 | }
71 | }
72 | if (event != null && event.action == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_ENTER) {
73 | val s = emailTextInputEditText.text
74 | val trimmed = s.toString().trim { it <= ' ' }
75 | if (trimmed.length > 1) {
76 | val chip = Chip(this@MainActivity)
77 | chip.text = trimmed.substring(0, trimmed.length)
78 | chip.isCloseIconVisible = true
79 | chip.setOnCloseIconClickListener {
80 | emailChipGroup.removeView(chip)
81 | }
82 | emailChipGroup.addView(chip)
83 | s?.clear()
84 | }
85 | }
86 | false
87 | }
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/app/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
7 |
12 |
13 |
19 |