Using Android Material Chip

Question

Hello I am new to android and learning to use material chips. I have created a test project and added the following

to my gradle file i added

implementation 'com.android.support:design:28.0.0'

and in my fragment xml i added

<android.support.design.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="test chip"/>

But i keep getting this error

 java.lang.RuntimeException: Unable to start activity ComponentInfo{nonso.android.test/nonso.android.test.MainActivity}: android.view.InflateException: Binary XML file line #20: Binary XML file line #20: Error inflating class android.support.design.chip.Chip
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2778)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2856)
    at android.app.ActivityThread.-wrap11(Unknown Source:0)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1589)
    at android.os.Handler.dispatchMessage(Handler.java:106)
    at android.os.Looper.loop(Looper.java:164)
    at android.app.ActivityThread.main(ActivityThread.java:6494)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
 Caused by: android.view.InflateException: Binary XML file line #20: Binary XML file line #20: Error inflating class android.support.design.chip.Chip
 Caused by: android.view.InflateException: Binary XML file line #20: Error inflating class android.support.design.chip.Chip
 Caused by: java.lang.reflect.InvocationTargetException
    at java.lang.reflect.Constructor.newInstance0(Native Method)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:334)
    at android.view.LayoutInflater.createView(LayoutInflater.java:647)
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:790)
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:730)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:863)
    at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:824)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:515)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:423)
    at nonso.android.test.ui.main.MainFragment.onCreateView(MainFragment.java:26)
    at android.support.v4.app.Fragment.performCreateView(Fragment.java:2439)
    at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1460)
    at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784)
    at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852)
    at android.support.v4.app.FragmentManagerImpl.dispatchStateChange(FragmentManager.java:3269)
    at android.support.v4.app.FragmentManagerImpl.dispatchActivityCreated(FragmentManager.java:3229)
    at android.support.v4.app.FragmentController.dispatchActivityCreated(FragmentController.java:201)
    at android.support.v4.app.FragmentActivity.onStart(FragmentActivity.java:620)
    at android.support.v7.app.AppCompatActivity.onStart(AppCompatActivity.java:178)
    at android.app.Instrumentation.callActivityOnStart(Instrumentation.java:1334)
    at android.app.Activity.performStart(Activity.java:7029)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2741)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2856)
    at android.app.ActivityThread.-wrap11(Unknown Source:0)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1589)
    at android.os.Handler.dispatchMessage(Handler.java:106)
    at android.os.Looper.loop(Looper.java:164)
    at android.app.ActivityThread.main(ActivityThread.java:6494)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
 Caused by: java.lang.IllegalArgumentException: This component requires that you specify a valid TextAppearance attribute. Update your app theme to inherit from Theme.MaterialComponents (or a descendant).
    at android.support.design.internal.ThemeEnforcement.checkTextAppearance(ThemeEnforcement.java:170)
    at android.support.design.internal.ThemeEnforcement.obtainStyledAttributes(ThemeEnforcement.java:75)
E/AndroidRuntime:     at android.support.design.chip.ChipDrawable.loadFromAttributes(ChipDrawable.java:343)
        at android.support.design.chip.ChipDrawable.createFromAttributes(ChipDrawable.java:278)
    at android.support.design.chip.Chip.<init>(Chip.java:172)
    at android.support.design.chip.Chip.<init>(Chip.java:165)
        ... 31 more

It seems android.support.design.chip.Chip has an issue, I have tried using com.google.android.material.chip.Chip but that does not work either, any help would be really appreciated! Thanks!

score 7 · Answer 1 · answered Apr 17 '19 at 07:33

We can use support.design for Chip by MaterialComponent theme.

Use this style in your activity

<style name="ChipStyle" parent="Theme.MaterialComponents.Light.NoActionBar">
     <!-- Your style -->
</style>

And Create ChipGroup component in your activity

 <android.support.design.chip.ChipGroup
     android:id="@+id/cg_filter_items"
     android:layout_width="match_parent"
     android:layout_height="0dp"
     android:layout_margin="16dp"
     android:padding="16dp"
     app:chipSpacing="8dp"
     app:layout_constraintBottom_toTopOf="@id/btn_apply_filter"
     app:layout_constraintTop_toBottomOf="@id/tv_filter_heading" />

Create new xml file item_filter_chip.xml i.e, Item of ChipGroup style="@style/TextAppearance.MaterialComponents.Chip" This line is important to inflate the item

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.chip.Chip 
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/chips_item_filter"
     style="@style/TextAppearance.MaterialComponents.Chip"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:padding="4dp" />

Use this code to generate chips dynamically

    ChipGroup chipGroup = findViewById(R.id.cg_filter_items);
    for (int i = 0; i < 10; i++) {
        View view = LayoutInflater.from(this).inflate(R.layout.item_filter_chips, chipGroup, false);
        Chip chip = view.findViewById(R.id.chips_item_filter);
        chip.setText("chip Text " + i);
        chip.setClickable(true);
        chip.setCheckable(true);
        chipGroup.addView(chip);
        chip.setOnClickListener(<Your Listener>);
    }

That ChipStyle doesn't seem to be needed. – Sudhir Singh Khanger Aug 05 '19 at 16:47 — Sudhir Singh Khanger, Aug 05 '19 at 16:47

score 3 · Answer 2 · answered Sep 26 '18 at 22:10

3

It's right in the error you pasted:

Caused by: java.lang.IllegalArgumentException: This component requires that you specify a valid TextAppearance attribute. Update your app theme to inherit from Theme.MaterialComponents (or a descendant).

So either add android:textAppearance="@style/SomeTextAppearance" to your Chip XML, or change your style to have the parent Theme.MaterialComponents.

answered Sep 26 '18 at 22:10

TheWanderer

16,775
6
49
63

Thanks, I used your suggestion and it fixed the issue. I have started trying out creating chips dynamically and I run into a similar issue, except i can't really set the TextAppearance as I create the chip, here is my code and the error Chip chip = new Chip(getContext()); chip.setText("Some chip"); chip.isCheckable(); chip.setElevation(15); chip.setChipBackgroundColorResource(R.color.colorPrimary); chip.setTextAppearance(R.style.ChipStyle); chipGroup.addView(chip); – user642206 Sep 26 '18 at 22:27
Use the parent of the theme method then. – TheWanderer Sep 26 '18 at 22:29
The parent of the theme when creating the chip object? – user642206 Sep 26 '18 at 22:32
1

I am not very sure how to use the parent of the theme method when creating the chip object. Is it possible to show me an example. – user642206 Sep 26 '18 at 22:59

score 2 · Answer 3 · answered Sep 26 '18 at 22:19

Try using: app:chipText

<android.support.design.chip.Chip
    android:id="@+id/some_chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="This is a chip" />

Also, that wasn't just the case and add this to your styles.xml:

parent="Theme.MaterialComponents.Light.NoActionBar"

Read this & you may wanna do a clean-rebuild project after that.

com.google.android.material.chip.Chip Actually works after Migrating to AndroidX (If I'm not wrong) because it comes from Material Design.

For example:

<com.google.android.material.chip.Chip
      style="@style/TextAppearance.MaterialComponents.Chip"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="5dp"
      android:layout_marginEnd="5dp"
      android:text="Android"
      app:chipIcon="@drawable/androidtag" />

All these should work on Android Studio 3.2 and up with 28.0.0 or after migrating to AndroidX.

score 1 · Answer 4 · answered Dec 25 '18 at 03:57

1

You have to set your AppTheme so that it inherits one of the MaterialComponent themes to use Chips. Try Bridge Themes if you still want to use AppCompat.

Follow the steps in this guide on Getting Started with Material Components.

answered Dec 25 '18 at 03:57

LittleNobody

55
1
7

Using Android Material Chip

4 Answers4