How to add chip to edit text in Android Studio

Question

I found a dependency that I thought might help me, and it looked promising. But when I try to implement it I get a "Failed to resolve: com.hootsuite.android:nachos:1.1.1" :

https://i.stack.imgur.com/qgbEx.png

And the thing I'm trying to accomplish is this:

https://i.stack.imgur.com/d2JaU.png

as seen in this video : https://www.youtube.com/watch?v=UCZeHeDDBMw&list=PLi_3BTX1-5i4ieQOm-W-i3rkOU3qOA06o&index=3&t=401s&ab_channel=AndroidRion

Answer 1

Gradle's failing to resolve that dependency for some reason. First thing you should check is if there's a site for that library, or an entry in the repositories you're using, to check if that's a valid version or if there's anything else you need to know.

Turns out it has a project repository on Github, so there's a readme telling you how to install it:

Add this line to your project level build.gradle:

buildscript {
 repositories {
   jcenter()
 }

Add this line to your module level build.gradle:

dependencies {
   implementation "com.hootsuite.android:nachos:1.1.1"
}

But in this case that won't help - JCenter shut down last year. The last update to this project was 4 years ago - but they have a JitPack link at the top of the readme. JitPack is basically a way to add dependencies from Github repositories, when they're not in a central repository like the Google one, or Maven Central. So try adding the config stuff at that JitPack link if you want to use this library (you could also build it locally if you really wanted)

---

That said, Chips are part of the Material Components library now, so you might want to just use that instead - it's basically part of a typical Android app at this point. Scroll down to the Standalone ChipDrawable section to see how you can add one to a TextView

Answer 2

You can follow this answer. It shows you all the details to set chips in edit text.

Reference

Answer 3

You need to use AppCompatEdittext you can change to any view which listening the text inputs.

Step 1

Create file named chip.xml and Add resource in the following folder.

• res -> xml -> chip.xml

<?xml version="1.0" encoding="utf-8"?>
<chip xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:textAppearance="@style/ChipTextAppearance"
 app:chipBackgroundColor="@color/colorAccent"
 app:chipIcon="@drawable/ic_call_white_24dp"
 app:closeIconEnabled="true"  <!--property for close icon if no need set to false. -->
 app:closeIconTint="@android:color/white" />

Then add style in style.xml

<style name="ChipTextAppearance" parent="TextAppearance.MaterialComponents.Chip">
    <item name="android:textColor">@android:color/white</item>
</style>

Step 2

Add AppCompactEditText

 <android.support.v7.widget.AppCompatEditText
    android:id="@+id/phone"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tvt_Contact" />

Step 3

java code

private int SpannedLength = 0,chipLength = 4;

 AppCompatEditText Phone = findViewById(R.id.phone);

 Phone.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            if (charSequence.length() == SpannedLength - chipLength)
            {
                SpannedLength = charSequence.length();
            }
        }

        @Override
        public void afterTextChanged(Editable editable) {

            if(editable.length() - SpannedLength == chipLength) {
                ChipDrawable chip = ChipDrawable.createFromResource(getContext(), R.xml.chip);
                chip.setChipText(editable.subSequence(SpannedLength,editable.length()));
                chip.setBounds(0, 0, chip.getIntrinsicWidth(), chip.getIntrinsicHeight());
                ImageSpan span = new ImageSpan(chip);
                editable.setSpan(span, SpannedLength, editable.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                SpannedLength = editable.length();
            }

        }
    });

@Override
public int getSize(@NonNull Paint paint, CharSequence text, int start, int end,
                   Paint.FontMetricsInt fontMetricsInt) {
    Drawable drawable = getDrawable();
    Rect rect = drawable.getBounds();
    if (fontMetricsInt != null) {
        Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
        int fontHeight = fmPaint.descent - fmPaint.ascent;
        int drHeight = rect.bottom - rect.top;
        int centerY = fmPaint.ascent + fontHeight / 2;

        fontMetricsInt.ascent = centerY - drHeight / 2;
        fontMetricsInt.top = fontMetricsInt.ascent;
        fontMetricsInt.bottom = centerY + drHeight / 2;
        fontMetricsInt.descent = fontMetricsInt.bottom;
    }
    return rect.right;
}

@Override
public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end,
                 float x, int top, int y, int bottom, @NonNull Paint paint) {

    Drawable drawable = getDrawable();
    canvas.save();
    Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
    int fontHeight = fmPaint.descent - fmPaint.ascent;
    int centerY = y + fmPaint.descent - fontHeight / 2;
    int transY = centerY - (drawable.getBounds().bottom - drawable.getBounds().top) / 2;
    canvas.translate(x, transY);
    drawable.draw(canvas);
    canvas.restore();
}

}

And change your image span class like below

VerticalImageSpan span = new VerticalImageSpan(chip);