Home

Awesome

Material Chip View

Material Chip view. Can be used as tags for categories, contacts or creating text clouds. This library can be an alternative for Material Chip from Jetpack library.<img src="https://github.com/robertlevonyan/materialChipView/blob/master/images/chip.png" width="500" />
Android ArsenalAndroid Arsenal API
MaterialChipVersionMaven Central
ComposeChipVersionMaven Central
Material3ComposeChipVersionMaven Central

Setup

Add following line of code to your project level gradle file

  repositories {
    mavenCentral()
  }

Add following line of code to your module(app) level gradle file

Groovy:

    implementation 'com.robertlevonyan.view:MaterialChipView:<MaterialChipVersion>'

Kotlin:

    implementation("com.robertlevonyan.view:MaterialChipView:$MaterialChipVersion")

Maven:

  <dependency>
    <groupId>com.robertlevonyan.view</groupId>
    <artifactId>MaterialChipView</artifactId>
    <version>MaterialChipVersion</version>
    <type>pom</type>
  </dependency>

For Jetpack Compose version

    implementation("com.robertlevonyan.compose:materialchip:$ComposeChipVersion")

or if you want to yse Material3 version

    implementation("com.robertlevonyan.compose:material3chip:$Material3ComposeChipVersion")

Usage

  <com.robertlevonyan.views.chip.Chip
    android:id="@+id/chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/customTitle" />

alt text

Cutomizing Chip

    app:mcv_closable="true"

alt text

    app:mcv_selectable="true"
alt textalt text
    app:mcv_chipIcon="@drawable/customIcon"

alt text

    app:mcv_backgroundColor="@color/customChipBackgroundColor"
    app:mcv_closeColor="@color/customCloseIconColor"
    app:mcv_selectedBackgroundColor="@color/customSelectedChipColor"
    app:mcv_textColor="@color/customTitleColor"
alt textalt text

Attributes

Custom AtributesDescription
app:mcv_textColorCustom color for text label
app:mcv_backgroundColorCustom background color
app:mcv_selectedBackgroundColorCustom background color when selected
app:mcv_chipIconIcon resource for Chip
app:mcv_closableChip with close button
app:mcv_closeColorCustom color for close button
app:mcv_selectableChip with selection button
app:mcv_selectedTextColorCustom color for label when selected
app:mcv_cornerRadiusChange the corner radius of your Chip
app:mcv_strokeSizeAdd stroke to your Chip
app:mcv_strokeColorChoose a custom stroke color for your Chip
app:mcv_selectedStrokeSizeStroke size when selected
app:mcv_selectedStrokeColorCustom stroke color when selected
app:mcv_iconTextInstead of an image create icon from String
app:mcv_iconTextColorSelect a color for your String icon
app:mcv_iconTextBackgroundColorSelect a background color for String icon

Setting Listeners

    val chip = findViewById(R.id.chip);

Chip click listener

    chip.setOnClickListener { view ->
         //Your action here...
    }

On Close button click listener

    chip.setOnCloseClickListener { view ->
         //Your action here...
    }

On Icon click listener

    chip.setOnIconClickListener { view ->
         //Your action here...
    }

On Select button click listener

    chip.setOnSelectClickListener { view: View, selected: Boolean ->
         //Your action here...
    }

Customizing Chip from code

        chip.text = "My awesome Chip" // Set Chip label
        chip.chipTextColor = chipTextColor // Set Chip label color
        chip.chipBackgroundColor = chipBackgroundColor //Set custom background color
        chip.chipSelectedBackgroundColor = chipSelectedBackgroundColor //Set custom background color when selected
        chip.chipIcon = myIconDrawable //Set Icon Drawable for Chip
        chip.chipIconBitmap = myIconBitmap //Set Icon Bitmap for Chip
        chip.closable = true //Set Chip has close button
        chip.chipCloseColor = chipCloseColor //Set custom color for close button
        chip.chipSelectedCloseColor = chipSelectedCloseColor //Set custom color for close button on selected state
        chip.selectable = false //Set Chip has selection button
        chip.chipSelected = true // Set Chip selected
        chip.chipSelectedTextColor = chipSelectedTextColor //Set custom color for label when selected
        chip.cornerRadius = 5 // Set corner radius of your Chip
        chip.strokeSize = 2 // Set width of stroke
        chip.strokeColor = strokeColor // Set stroke color for your Chip
        chip.selectedStrokeSize = 2 // Set width of stroke when selected
        chip.selectedStrokeColor = selectedStrokeColor // Set stroke color for your Chip when selected
        chip.setIconText(text, iconTextColor, iconTextBackgroundColor); // Set Chip icon text, text color and background color (in case of Kotlin iconTextColor and iconTextBackgroundColor have default value of 0)
        chip.chipHorizontalPadding = 10 // Set horizontal padding for chip

For Jetpack Compose version

setContent {
  Box(modifier = Modifier.fillMaxWidth()) {
    MaterialChip(
      text = "Some Text",
      chipIcon = ChipIconRes(icon = R.drawable.android), // ChipIconBitmap or ChipIconDrawable
      interaction = ChipInteraction.Closable, // Selectable, SelectableWithoutIcon or None
      strokeSize = 1.dp,
      selectedStrokeSize = 2.dp,
      strokeColor = Color.Red,
      selectedStrokeColor = Color.Blue,
      onSelectClick = { selected ->
        // your code here
      },
      onIconClick = {
        // your code here
      },
      onChipClick = {
        // your code here
      },
      onCloseClick = {
        // your code here
      }
    )
  }
}

Also there is a MaterialChipGroup available for Jetpack Compose version

setContent {
  Box(modifier = Modifier.fillMaxWidth()) {
    MaterialChipGroup(
      items = listOf("Chip1", "Chip2", "Chip3"),
      createTitle = { it }, //returns a String for the title
      initialSelectedElementIndex = 1, // default value is -1 (means nothing is selected)
      onItemSelected = { position, element ->
        // do something
      },
      // the rest is for Chip appearance
      interaction = ChipInteraction.Selectable,
      strokeSize = 1.dp,
      selectedStrokeSize = 2.dp,
      strokeColor = Color.Red,
      selectedStrokeColor = Color.Blue,
      backgroundColor = Color.Red,
      selectedBackgroundColor = Color.Blue,
    )
  }
}

Versions

1.0.0 (Material3)

Jetpack compose version with Material 3 styling

3.0.0

Jetpack Compose support added Chip Group added for JetpackCompose

2.2.1 - 2.2.7

Update to Java 11 SDK 31 ready Minor updates

2.2.0

Migration to mavenCentral

2.1.1 - 2.1.7

Minor changes, some missing parts pushed

2.1.0

New update, now it is possible to make chip selectable without selection icon

2.0.1 - 2.0.7

Minor changes, some missing parts pushed

2.0.0

New version of the library. Fully rewritten with Kotlin and AndroidX ready 🤩

1.2.1, 1.2.2

General bug fixed

1.1.3

Selection option added

1.1.2

Icon text issue fixed

1.1.1

Updated version of Material Chip View: - the attribute names are changed to escape conflicts with other libs - added new features like customizable corner radius and stroke - recreation issue fixed for post Lollipop versions

1.0.1

Recreation issues are fixed

1.0.0

First version of library

Contact

<a href="https://www.buymeacoffee.com/robertlevonyan"> <img src="https://github.com/robertlevonyan/material-chip-view/blob/master/images/coffee.jpeg" width="300" /> </a>

Licence

    Material Chip View©
    Copyright 2022 Robert Levonyan
    Url: https://github.com/robertlevonyan/materialChipView

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.