4

How can I justify the chips in a ChipGroup? I want to implement the chiose chips using Material Components and I was unable to justify the chips inside the ChipGroup.

I will be able the justify those inside a FlexBoxLayout but then I have to handle the single selection manually.

<com.google.android.material.chip.ChipGroup
        android:id="@+id/general_feedback_flexboxlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/general_feedback_textview_subtitle"
        app:layout_constraintVertical_bias="0.0"
        app:singleSelection="true">

        <!--<com.google.android.flexbox.FlexboxLayout-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="match_parent"-->
            <!--app:flexWrap="wrap"-->
            <!--app:justifyContent="space_between">-->

            <com.google.android.material.chip.Chip
                android:id="@+id/general_feedback_chip_idea"
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                android:text="Idea"
                android:textColor="@color/colorPrimaryDark"
                app:chipBackgroundColor="@color/feedback_chip_state_list"
                app:chipStrokeColor="@color/colorPrimaryDark"
                app:chipStrokeWidth="1dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/general_feedback_chip_problem"
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                android:text="Problem"
                android:textColor="@color/colorPrimaryDark"
                app:chipBackgroundColor="@color/feedback_chip_state_list"
                app:chipStrokeColor="@color/colorPrimaryDark"
                app:chipStrokeWidth="1dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/general_feedback_chip_question"
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                android:text="Question"
                android:textColor="@color/colorPrimaryDark"
                app:chipBackgroundColor="@color/feedback_chip_state_list"
                app:chipStrokeColor="@color/colorPrimaryDark"
                app:chipStrokeWidth="1dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/general_feedback_chip_praise"
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                android:text="Praise"
                android:textColor="@color/colorPrimaryDark"
                app:chipBackgroundColor="@color/feedback_chip_state_list"
                app:chipStrokeColor="@color/colorPrimaryDark"
                app:chipStrokeWidth="1dp" />

        <!--</com.google.android.flexbox.FlexboxLayout>-->


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

Result : enter image description here

Excepted : enter image description here

Anjula
  • 1,690
  • 23
  • 29
  • check this https://stackoverflow.com/a/49973416/7666442 and this https://stackoverflow.com/a/50411183/7666442 – AskNilesh Mar 26 '19 at 09:40
  • @NileshRathod After adding FlexboxLayout chips will become multi-selectable. I wanted it to be a single selection. – Anjula Mar 26 '19 at 09:44
  • for single section use this logic https://stackoverflow.com/a/35060634/7666442 – AskNilesh Mar 26 '19 at 09:48

0 Answers0