Material-components-android: [Chip] Outlined style

[leinardi]

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).

[wcshi]

Consulting with Design, stay tuned.

[wcshi]

@leinardi Is there something preventing you from creating custom outlined chip styles?

[matpag]

@wcshi probably not, but I think it would be nice to have them, like TextInputLayout ones 😁

[leinardi]

@wcshi I haven't tried yet but I will soon. It's just that I was expecting to have it from the library since the Outlined style is available for Buttons and Text Fields, I was surprised to not find it for the Chips.

[wcshi]

Since outlined chip styles can easily be made by developers we are not planning to prioritize adding them at this time. If you have questions about the spec, please let us know.

[leinardi]

I don't think is going to be easier than creating the Outlined style for the Buttons, and that stile is provided by the library so, for consistency, it would be nice to have also the style for the Chips.

Anyway, I'll try to make the style myself and I'll share it here if I succeed or, if I fail, I'll come here to ask for help.

[leinardi]

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.

[alorma]

I hope this will save some time to other developers.

It will be awesome if those style are integrated into library