Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Chip] Outlined style

See original GitHub issue

Is your feature request related to a problem? Please describe. The TextField are available in 2 types: Filled and Outlined:

Both types are correctly implemented by material-components-android

The Chips are also available in these 2 types:

But, as far as I know, only the Filled type is provided by material-components-android`.

Describe the solution you’d like The same way that there 2 styles type for the TextFields (Widget.MaterialComponents.TextInputLayout.FilledBox and Widget.MaterialComponents.TextInputLayout.OutlinedBox) there should be also 2 style types for the Chips (Widget.MaterialComponents.Chip.FilledBox and Widget.MaterialComponents.Chip.OutlinedBox).

Issue Analytics

State:
Created 3 years ago
Reactions:9
Comments:9 (5 by maintainers)

Top GitHub Comments

7reactions

leinardicommented, Aug 4, 2020

Here is my implementation of the Outlined style for anyone else that that needs it:

ds_widget_styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools" tools:ignore="UnusedResources">

    <style name="Widget.DesignSystem.Chip.FilledBox.Input" parent="Widget.MaterialComponents.Chip.Entry">
        <item name="closeIconTint">@color/ds_chip_close_icon</item>
    </style>

    <style name="Widget.DesignSystem.Chip.FilledBox.Filter" parent="Widget.MaterialComponents.Chip.Filter">
        <item name="closeIconTint">@color/ds_chip_close_icon</item>
    </style>

    <style name="Widget.DesignSystem.Chip.FilledBox.Choice" parent="Widget.MaterialComponents.Chip.Choice">
        <item name="closeIconTint">@color/ds_chip_close_icon</item>
    </style>

    <style name="Widget.DesignSystem.Chip.FilledBox.Action" parent="Widget.MaterialComponents.Chip.Action">
        <item name="closeIconTint">@color/ds_chip_close_icon</item>
    </style>

    <style name="Widget.DesignSystem.Chip.OutlinedBox.Input" parent="Widget.MaterialComponents.Chip.Entry">
        <item name="chipBackgroundColor">@color/ds_chip_outlined_background_color</item>
        <item name="chipStrokeColor">@color/ds_chip_stroke</item>
        <item name="chipStrokeWidth">1dp</item>
        <item name="closeIconTint">@color/ds_chip_close_icon</item>
    </style>

    <style name="Widget.DesignSystem.Chip.OutlinedBox.Filter" parent="Widget.MaterialComponents.Chip.Filter">
        <item name="chipBackgroundColor">@color/ds_chip_outlined_background_color</item>
        <item name="chipStrokeColor">@color/ds_chip_stroke</item>
        <item name="chipStrokeWidth">1dp</item>
        <item name="closeIconTint">@color/ds_chip_close_icon</item>
    </style>

    <style name="Widget.DesignSystem.Chip.OutlinedBox.Choice" parent="Widget.MaterialComponents.Chip.Choice">
        <item name="chipBackgroundColor">@color/ds_chip_outlined_choice_background_color</item>
        <item name="chipStrokeColor">@color/ds_chip_choice_stroke</item>
        <item name="chipStrokeWidth">1dp</item>
        <item name="closeIconTint">@color/ds_chip_close_icon</item>
    </style>

    <style name="Widget.DesignSystem.Chip.OutlinedBox.Action" parent="Widget.MaterialComponents.Chip.Action">
        <item name="chipBackgroundColor">@color/ds_chip_outlined_background_color</item>
        <item name="chipStrokeColor">@color/ds_chip_stroke</item>
        <item name="chipStrokeWidth">1dp</item>
        <item name="closeIconTint">@color/ds_chip_close_icon</item>
    </style>

</resources>

ds_chip_choice_stroke.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:alpha="0.25" android:color="?attr/colorPrimary" android:state_pressed="true" />
    <item android:alpha="0.25" android:color="?attr/colorPrimary" android:state_focused="true" android:state_hovered="true" />
    <item android:alpha="0.25" android:color="?attr/colorPrimary" android:state_focused="true" />
    <item android:alpha="0.25" android:color="?attr/colorPrimary" android:state_hovered="true" />
    <item android:alpha="0.25" android:color="?attr/colorPrimary" android:state_checked="true" android:state_enabled="true" />
    <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_checked="true" android:state_enabled="true" />
    <item android:alpha="0.25" android:color="?attr/colorOnSurface" android:state_enabled="true" />
    <!-- 38% of 54% opacity. -->
    <item android:alpha="0.06" android:color="?attr/colorOnSurface" />

</selector>

ds_chip_close_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:alpha="1.0" android:color="?attr/colorOnSurface" android:state_pressed="true" />
    <item android:alpha="1.0" android:color="?attr/colorOnSurface" android:state_focused="true" android:state_hovered="true" />
    <item android:alpha="1.0" android:color="?attr/colorOnSurface" android:state_focused="true" />
    <item android:alpha="1.0" android:color="?attr/colorOnSurface" android:state_hovered="true" />
    <item android:alpha="0.54" android:color="?attr/colorOnSurface" android:state_enabled="true" />
    <!-- 25% of 54% opacity. -->
    <item android:alpha="0.15" android:color="?attr/colorOnSurface" />

</selector>

ds_chip_outlined_background_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="true" android:state_selected="true" />
    <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_checked="true" android:state_enabled="true" />
    <item android:alpha="0.10" android:color="@android:color/transparent" android:state_enabled="true" />
    <item android:alpha="0.12" android:color="@android:color/transparent" />

</selector>

ds_chip_outlined_choice_background_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 12% opacity -->
    <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_enabled="true" android:state_selected="true" />
    <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_checked="true" android:state_enabled="true" />
    <!-- 12% of 87% opacity -->
    <item android:alpha="0.10" android:color="@android:color/transparent" android:state_enabled="true" />
    <item android:alpha="0.12" android:color="@android:color/transparent" />

</selector>

ds_chip_stroke.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:alpha="0.25" android:color="?attr/colorOnSurface" android:state_pressed="true" />
    <item android:alpha="0.25" android:color="?attr/colorOnSurface" android:state_focused="true" android:state_hovered="true" />
    <item android:alpha="0.25" android:color="?attr/colorOnSurface" android:state_focused="true" />
    <item android:alpha="0.25" android:color="?attr/colorOnSurface" android:state_hovered="true" />
    <item android:alpha="0.25" android:color="?attr/colorOnSurface" android:state_enabled="true" />
    <!-- 38% of 54% opacity. -->
    <item android:alpha="0.06" android:color="?attr/colorOnSurface" />

</selector>

I hope this will save some time to other developers.

2reactions

alormacommented, Aug 4, 2020

I hope this will save some time to other developers.

It will be awesome if those style are integrated into library

Top Results From Across the Web

Chip API - Material UI - MUI

Rule name Global class Description root.MuiChip‑root Styles applied to the root element. avatar.MuiChip‑avatar Styles applied to the avatar element. icon.MuiChip‑icon Styles applied to the icon element....

Chips Outline Vector Images (over 34,000) - VectorStock

Download 34000+ Royalty Free Chips Outline Vector Images. ... casino chips icon outline style vector · casino chips icon outline poker game vector....

Chip - Components - LINE Design System

Chips are components that allow users to make single or multiple ... Select "Contained" or "Outlined" depending on the desired design styles and...

Change Material-UI outlined Chip focus and hover color

Trying to add styles to a Material-UI chip (outlined variant) upon hovering, but not getting the expected results.

Chips – Material Design 3

Choice chips are now a subset of filter chips. Assist and filter chips in M3 style. Chips have rounded rectangle shapes and updated...