Material-components-android: I have been trying to add chips to a chips group dynamically, but the chips don't seem to wrap the text completely and text isn't aligned in the center either.

Created on 5 Jun 2018  路  3Comments  路  Source: material-components/material-components-android

Most helpful comment

You can now use the alpha version of the design support library by google itself to use chips and chip groups in your code.

In your build.gradle file add the following (changing your compileSdkVersion and some default dependencies):

android {
    compileSdkVersion 28
    defaultConfig {
       ...
        minSdkVersion 23 //or any of your choice
        targetSdkVersion 28
      ...
    }

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
    implementation 'com.android.support:recyclerview-v7:28.0.0-alpha3'
    implementation 'com.android.support:support-v4:28.0.0-alpha3'
    implementation 'com.android.support:design:28.0.0-alpha3'
    ....
    ....
}

To add chips into a chipgroup, this worked for me well:
Add a chipgroup to your xml

 <android.support.design.chip.ChipGroup
            android:id="@+id/chipgroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

You can then perform a simple findViewById for this element in java and then go for this:

Chip chip = new Chip(getApplicationContext());
            //chip.setChipText("your...text");
            //chip.setCloseIconEnabled(true);
            //chip.setCloseIconResource(R.drawable.your_icon);
            //chip.setChipIconResource(R.drawable.your_icon);
            //chip.setChipBackgroundColorResource(R.color.red);
            //chip.setTextAppearanceResource(R.style.ChipTextStyle);
            //chip.setElevation(15);

            chipgroup.addView(chip);

where ChipTextStyle was defined as:

  <style name="ChipTextStyle">
        <item name="android:textSize">13dp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:fontFamily">@font/sourcesansproregular</item>
    </style>

All 3 comments

You can now use the alpha version of the design support library by google itself to use chips and chip groups in your code.

In your build.gradle file add the following (changing your compileSdkVersion and some default dependencies):

android {
    compileSdkVersion 28
    defaultConfig {
       ...
        minSdkVersion 23 //or any of your choice
        targetSdkVersion 28
      ...
    }

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
    implementation 'com.android.support:recyclerview-v7:28.0.0-alpha3'
    implementation 'com.android.support:support-v4:28.0.0-alpha3'
    implementation 'com.android.support:design:28.0.0-alpha3'
    ....
    ....
}

To add chips into a chipgroup, this worked for me well:
Add a chipgroup to your xml

 <android.support.design.chip.ChipGroup
            android:id="@+id/chipgroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

You can then perform a simple findViewById for this element in java and then go for this:

Chip chip = new Chip(getApplicationContext());
            //chip.setChipText("your...text");
            //chip.setCloseIconEnabled(true);
            //chip.setCloseIconResource(R.drawable.your_icon);
            //chip.setChipIconResource(R.drawable.your_icon);
            //chip.setChipBackgroundColorResource(R.color.red);
            //chip.setTextAppearanceResource(R.style.ChipTextStyle);
            //chip.setElevation(15);

            chipgroup.addView(chip);

where ChipTextStyle was defined as:

  <style name="ChipTextStyle">
        <item name="android:textSize">13dp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:fontFamily">@font/sourcesansproregular</item>
    </style>

I was using the alpha version but there was no documentation regarding chips; thanks for the help.

you can just create xml layout at res/layout/chip.xml

    <com.google.android.material.chip.Chip 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="@dimen/dimens4dp"
            android:padding="@dimen/dimens8dp"
            tools:text="@string/check"
            android:textColor="@color/black"
            app:checkedIconTint="@color/black"
            app:chipBackgroundColor="@color/white"
            app:chipCornerRadius="@dimen/dimens8dp"
            app:chipIconEnabled="true"
            app:closeIconEnabled="false" />

then inflate that chip layout and change it's text like that

    val chip = LayoutInflater.from(_activity).inflate(R.layout.fliter_item,null) as Chip
    chip.text = "the text'
    parent.addView(chip)

Was this page helpful?
0 / 5 - 0 ratings