Android:unable To Make Multiline Chipgroup

I have a chipgroup within a relative layout along with a textview whose code is shown below.

Solution 1:

I update from @Sajith 's answer,see if it could work:

<RelativeLayoutxmlns: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"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:weightSum="100"><TextViewandroid:layout_width="0dp"android:layout_weight="25"android:layout_height="wrap_content"android:text="TextTitle"android:gravity="left"android:layout_marginTop="16dp"android:textColor="@android:color/white"android:textStyle="bold"android:textSize="14sp"android:id="@+id/tv" /><FrameLayoutandroid:layout_width="0dp"android:layout_weight="75"android:layout_height="wrap_content" ><com.google.android.material.chip.ChipGroupandroid:id="@+id/cg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="end"android:layout_marginTop="20dp"android:layout_marginBottom="5dp"android:textColor="@android:color/black"android:textStyle="bold"android:textSize="12sp"app:singleSelection="false"app:chipSpacingVertical="32dp"app:chipSpacingHorizontal="5dp"app:singleLine="false" /></FrameLayout></LinearLayout></RelativeLayout>

Solution 2:

use your xml like below

<RelativeLayoutxmlns: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"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:weightSum="100"><TextViewandroid:layout_width="0dp"android:layout_weight="25"android:layout_height="wrap_content"android:text="TextTitle"android:gravity="left"android:layout_marginTop="16dp"android:textColor="@android:color/white"android:textStyle="bold"android:textSize="14sp"android:id="@+id/tv"
        /><com.google.android.material.chip.ChipGroupandroid:id="@+id/cg"android:layout_width="0dp"android:layout_weight="75"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:layout_marginBottom="5dp"android:textColor="@android:color/black"android:textStyle="bold"android:textSize="12sp"app:singleSelection="false"app:chipSpacingVertical="32dp"app:chipSpacingHorizontal="5dp"app:singleLine="false"
        /></LinearLayout></RelativeLayout>

and your final screen would be like below . Adjust space and width of chips according to your requirement.

EDIT

if you want to set height use it like below in your activity (inside for loop)

 chip.setChipMinHeight(10);

Solution 3:

All of the previous solutions didn't work for me if you want to achieve a gmail like behaviour with chips on multiple lines. In order to do that I had to avoid using the ChipGroup and instead using a FlexboxLayout.

your_recipient_layout:

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:id="@+id/recipient_label_TV"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="8dp"android:layout_marginEnd="8dp"android:layout_gravity="center_vertical" /><com.google.android.flexbox.FlexboxLayoutandroid:id="@+id/recipient_group_FL"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginStart="8dp"android:layout_gravity="center_vertical"app:flexWrap="wrap"app:alignItems="stretch"app:alignContent="space_around"app:showDivider="beginning|middle|end"app:dividerDrawable="@drawable/divider"><EditTextandroid:id="@+id/recipient_input_ET"android:layout_width="wrap_content"android:layout_height="32dp"app:layout_flexGrow="1"android:background="@android:color/transparent"android:imeOptions="actionDone"android:inputType="text"/></com.google.android.flexbox.FlexboxLayout></LinearLayout><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recipients_list_RV"android:layout_width="match_parent"android:layout_height="wrap_content"android:visibility="gone" />

The trick now is adding a new chip to the group but as second last position. Something like this:

privatefunaddChipToGroup(person: String, chipGroup: FlexboxLayout) {
    val chip = Chip(context)
    chip.text = person
    chip.chipIcon = ContextCompat.getDrawable(requireContext(), R.mipmap.ic_launcher_round)
    chip.isCloseIconEnabled = true
    chip.isClickable = true
    chip.isCheckable = false
    chipGroup.addView(chip as View, chipGroup.childCount - 1)
    chip.setOnCloseIconClickListener { chipGroup.removeView(chip as View) }
}

Share