Components

Chips

Chips allow users to enter information, make selections, filter content, or trigger actions.

While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

Usage

Use this tag LgnPrimary{Size}ChipContainerto implement Legion Chips.

Variants

Size

Legion have two size variants of chips.

1. Small Variants

The following is usage to implement Small Size variants

Static in Xml

<com.telkom.legion.component.chips.small.LgnPrimarySmallChipContainer
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Stacked Chip Filter Type"
    app:chipType="FILTER_TYPE" />

Dynamic using Kotlin

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnPrimarySmallChipContainer(requiredContext()).apply {
              //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

2. Large variants

The following is usage to implement Large Size variants

Static in Xml

<com.telkom.legion.component.chips.large.LgnPrimaryLargeChipContainer
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Stacked Chip Filter Type"
    app:chipType="FILTER_TYPE" />

Dynamic using Kotlin

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnPrimaryLargeChipContainer(requiredContext()).apply {
              //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Style

Legion have two style variants of chips.

1. Default Type

To implement Default style , you can customize from the properties. app:chipType="DEFAULT_TYPE"

Static in Xml

<com.telkom.legion.component.chips.small.LgnPrimarySmallChipContainer
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Stacked Chip Filter Type"
    app:chipType="DEFAULT_TYPE" />

Dynamic using Kotlin

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnPrimarySmallChipContainer(requiredContext()).apply {
            chipType = ChipsType.DEFAULT_TYPE
              //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

2. Filter Type

To implement Filter style , you can customize from the properties. app:chipType="FILTER_TYPE"

Static in Xml

<com.telkom.legion.component.chips.small.LgnPrimarySmallChipContainer
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Stacked Chip Filter Type"
    app:chipType="FILTER_TYPE" />

Dynamic using Kotlin

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnPrimarySmallChipContainer(requiredContext()).apply {
            chipType = ChipsType.FILTER_TYPE
              //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Attributes

Attribute Name	Xml Attrs	Related method(s)	Description
Text	`N/A`	`text`	To get or set selection value on Filter Type directly
Hint	`android:hint`	`hint`	To set label value directly via xml
Enable Status [WIP]	`N/A`	`N/A`	To set enable or disable chips directly via xml
Required Status	`app:isRequired`	`isRequired`	To set required status on text area directly via xml
Optional Status	`app:isOptional`	`isOptional`	To set optional status on text area directly via xml
Helper text	`app:helperText`	`helper`	To set helper text directly via xml
Chip Type	`app:chipType`	`chipType`	To set chip type directly via xml
Single Line	`app:isSingleLine`	`isSingleLine`	To set chips single line directly via xml
Show Close Icon	`app:closeIconVisible`	`closeIconVisible`	To set show close icon on chips directly via xml
Single Selection [BETA]	`app:isSingleSelection`	`isSingleSelection`	To set chips single selection directly via xml
Background Color [BETA]	`app:chipBackgroundColor`	`chipBackgroundColor`	To set chips background color directly via xml
Stroke Color [BETA]	`app:chipStrokeColor`	`chipStrokeColor`	To set chips stroke color directly via xml
Text Color [BETA]	`android:textColor`	`textColors`	To set chips text color directly via xml
Add Chips	`N/A`	`addAll(List<String>)`	To add chips programaticaly
Add Listener	`N/A`	`setListener { text -> }`	To add listener on chips programaticaly
Add Close Listener	`N/A`	`setOnCloseIconClickListener { text -> }`	To add close listener on chips programaticaly

* BETA : Attribute mean there is a possibility that it does not work as expected and there is a possibility of bugs

Do you have feedback?

Please let us know to make it better

Send Feedback