How to add Chips to input field in Android

In this android programming source code example, we are going to add Chips to input field in Android.

You can copy and adopt this source code example to your android project without reinventing the wheel.

Below is a step by step source code to add Chips to input field in Android.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="15dp"
    android:background="#CACACA">

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:inputType="phone"/>

</RelativeLayout>

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.AppCompatEditText;

import android.os.Bundle;
import android.text.Editable;
import android.text.Spanned;
import android.text.TextWatcher;
import android.text.style.ImageSpan;

import com.bluapp.androidview2.R;
import com.google.android.material.chip.Chip;
import com.google.android.material.chip.ChipDrawable;

public class AndroidChipActivity13 extends AppCompatActivity {
    private AppCompatEditText phone;
    private int SpannedLength = 0;
    private int chipLength = 4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_android_chip13);
        phone = (AppCompatEditText) findViewById(R.id.phone);
        phone.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
             if(s.length() == SpannedLength - chipLength){
                 SpannedLength = s.length();
             }
            }

            @Override
            public void afterTextChanged(Editable s) {
                if(s.length() - SpannedLength == chipLength){
                    ChipDrawable chip = ChipDrawable.createFromResource(AndroidChipActivity13.this, R.xml.chip);
                    chip.setText(s.subSequence(SpannedLength, s.length()));
                    chip.setBounds(0, 0, chip.getIntrinsicWidth(), chip.getIntrinsicHeight());
                    ImageSpan span = new ImageSpan(chip);
                    s.setSpan(span, SpannedLength, s.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                    SpannedLength = s.length();
                }

            }
        });
    }
}

xml/chip.xml

<chip
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:checkable="false"
    app:chipIcon="@drawable/ic_user"
    app:iconStartPadding="5dp"
    style="@style/Widget.MaterialComponents.Chip.Entry"/>

values/styles.xml

<style name="ChipTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

app/build.gradle

implementation 'com.google.android.material:material:1.0.0'

If you have any question or suggestions kindly use the comment box or you can contact us directly through our contact page below.

Add a Comment