SayantanRC
SayantanRC

Reputation: 949

Add "weight" to Chip in ChipGroup to fill parent width

I have 2 Chip inside a ChipGroup. I need them to fill the entire width of the screen, something like how we can do using android:layout_weight in a LinearLayout.

I have tried this:

<com.google.android.material.chip.ChipGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    app:selectionRequired="true"
    >

        <com.google.android.material.chip.Chip
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="@dimen/pill_button_height"
            android:id="@+id/chip1"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            app:shapeAppearanceOverlay="@style/Chip.LeftRounded"
            android:text="Left"
            />

        <com.google.android.material.chip.Chip
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="@dimen/pill_button_height"
            android:id="@+id/chip2"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            app:shapeAppearanceOverlay="@style/Chip.RightRounded"
            android:text="Right"
            />

</com.google.android.material.chip.ChipGroup>

But the layout_weight does not work and the chips simply vanish because the width is 0dp. If anyone knows how to solve this, without completely discarding ChipGroup and creating my own implementation, it would be really helpful.

Thanks.

Upvotes: 4

Views: 1816

Answers (1)

Here is an example of how to make two Chips take up the entire width of the screen:

<com.google.android.material.chip.ChipGroup
    android:id="@+id/chip_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:checkable="true"
    app:selectionRequired="true"
    app:singleLine="true"
    app:singleSelection="true">

    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_consuption"
            style="@style/Widget.MaterialComponents.Chip.Action"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".1"
            android:checkable="true"
            android:checked="true"
            android:text="statistics_tile_consumption_title"
            android:textAlignment="center"
            app:checkedIconVisible="false"
            app:ensureMinTouchTargetSize="false" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_electric"
            style="@style/Widget.MaterialComponents.Chip.Action"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".1"
            android:checkable="true"
            android:checked="false"
            android:text="electrical_appliances"
            android:textAlignment="center"
            app:checkedIconVisible="false"
            app:ensureMinTouchTargetSize="false"/>

    </LinearLayout>

</com.google.android.material.chip.ChipGroup>

Upvotes: 0

Related Questions