Chip - Android Material UI/UX

Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.
Takeaways
Chips represent options in a specific context, unlike buttons, which are persistent.
There are four kinds of chips: Assist, filter, input, and suggestion.
While the default elevation is 0, chips can be elevated if the placement requires protection, such as on top of an image.
What's the new:
Color: New color mappings and compatibility with dynamic color
Shape: Rounded rectangle
Types: Action chips have been separated into assist chips and suggestion chips. Choice chips are now a subset of filter chips.
In the layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.core.widget.NestedScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="16dp"
            android:clipToPadding="false">

            <com.google.android.material.chip.Chip
                android:id="@+id/inputChip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:text="@string/chip_input"
                android:textAppearance="@style/chipText"
                app:chipIcon="@drawable/ic_baseline_accessible_forward_24"
                style="@style/Widget.MaterialComponents.Chip.Entry" />

            <com.google.android.material.chip.Chip
                android:id="@+id/choiceChip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:text="@string/chip_choice"
                android:textAppearance="@style/chipText"
                style="@style/Widget.MaterialComponents.Chip.Choice" />

            <com.google.android.material.chip.Chip
                android:id="@+id/filterChip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:text="@string/chip_filter"
                android:textAppearance="@style/chipText"
                android:checked="true"
                style="@style/Widget.MaterialComponents.Chip.Filter" />

            <com.google.android.material.chip.Chip
                android:id="@+id/actionChip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:text="@string/chip_chip"
                android:textAppearance="@style/chipText"
                app:chipIcon="@drawable/ic_baseline_color_lens_24"
                style="@style/Widget.MaterialComponents.Chip.Action" />

            <com.google.android.material.chip.Chip
                android:id="@+id/styledChip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="32dp"
                android:text="@string/chip_chip"
                android:textAppearance="@style/chipText"
                app:chipIcon="@drawable/ic_baseline_accessible_forward_24"
                app:closeIconVisible="true" />

            <com.google.android.material.chip.Chip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="32dp"
                android:text="@string/chip_disable"
                android:enabled="false"
                android:textAppearance="@style/chipText"
                app:chipIcon="@drawable/ic_baseline_accessible_forward_24"
                app:closeIconVisible="true" />



            <com.google.android.material.textfield.TextInputLayout
                android:visibility="gone"
                android:layout_width="240dp"
                android:layout_height="wrap_content"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                android:layout_gravity="center"
                android:hint="Text Field">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/editText"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Text" />

            </com.google.android.material.textfield.TextInputLayout>




            <View
                android:layout_marginTop="15dp"
                android:layout_marginBottom="15dp"
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/md_theme_light_surfaceVariant"/>

            <com.google.android.material.textview.MaterialTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="20dp"
                android:text="Filter chip"
                />
            <com.google.android.material.chip.ChipGroup
                android:id="@+id/reflow_group"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">
            <com.google.android.material.chip.Chip
                style="@style/Widget.Material3.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Filter 1"/>
            <com.google.android.material.chip.Chip
                style="@style/Widget.Material3.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="Filter 2"/>
            <com.google.android.material.chip.Chip
                style="@style/Widget.Material3.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Filter 3"/>
        </com.google.android.material.chip.ChipGroup>


            <com.google.android.material.textview.MaterialTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="20dp"
                android:text="Input chip"
                />
            <com.google.android.material.chip.ChipGroup
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">
                <com.google.android.material.chip.Chip
                    style="@style/Widget.Material3.Chip.Input"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Filter 1"/>
                <com.google.android.material.chip.Chip
                    style="@style/Widget.Material3.Chip.Input"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Filter 2"/>
                <com.google.android.material.chip.Chip
                    style="@style/Widget.Material3.Chip.Input"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Filter 3"/>
            </com.google.android.material.chip.ChipGroup>


            <com.google.android.material.textview.MaterialTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="20dp"
                android:text="Suggestion chip"
                />
            <com.google.android.material.chip.ChipGroup
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp">
                <com.google.android.material.chip.Chip
                    style="@style/Widget.Material3.Chip.Suggestion"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Suggestion 1"/>
                <com.google.android.material.chip.Chip
                    style="@style/Widget.Material3.Chip.Suggestion"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="false"
                    android:text="Suggestion 2"/>
                <com.google.android.material.chip.Chip
                    style="@style/Widget.Material3.Chip.Suggestion.Elevated"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Suggestion 3"/>
            </com.google.android.material.chip.ChipGroup>

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Search This Blog

Bolt UiX

Chip - Android Material UI/UX

Comments

Post a Comment
