android:unable to make multiline chipgroup

Question

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

    <RelativeLayout
    ...

    <TextView
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:text="TextTitle"
        android:layout_alignParentStart="true"
        android:gravity="left"
        android:layout_marginTop="16dp"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:textSize="14sp"
        android:id="@+id/tv"
        android:layout_toLeftOf="@id/cg"
        android:layout_alignBaseline="@id/cg"
        />

       <com.google.android.material.chip.ChipGroup
       android:id="@+id/cg"
       android:layout_width="wrap_content"
       android:layout_height="14dp"
       android:layout_marginTop="20dp"
       android:layout_marginBottom="5dp"
       android:layout_alignParentRight="true"
       android:layout_alignParentEnd="true"
       android:textColor="@android:color/black"
       android:textStyle="bold"
       android:textSize="12sp"
       app:singleSelection="false"
       app:chipSpacingVertical="32dp"
       app:chipSpacingHorizontal="5dp"
       app:singleLine="false"
       />
  </RelativeLayout>

I add chips to this chipgroup dynamically like the below:

Chip chip;

for(int i=0;i<2;i++){
    chip = new Chip(this);
    chip.setText("Text:"+i);
    chip.setChipBackgroundColorResource(android.R.color.darker_gray);
    chip.setTextColor(Color.WHITE);
    mChipGroup.addView(chip);
}

The above brings the textview and chipgroup side by side (with the chips at the extreme right from the textview,which is what I want).

For 2 or 3 chips the output looks like this:

But when I have more than 3 chips,it looks bad like this:

I referred the docs and tried to make the chipgroup multiline and added the following in chipgroup xml

   app:chipSpacingVertical="32dp"
   app:chipSpacingHorizontal="5dp"
   app:singleLine="false"

It looks the same as in the pic2.

What I need is a chipgroup with multiline option with spacing as that in the pic1,i.e in the pic1 , I want Text3 beneath Text0 and Text4 beneath Text1 and so on, if the no of chips increases!.

Im sure I must be missing something,but dont know what it is.Any help will be very useful.Thanks in advance!!

Answer 1

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:

<LinearLayout xmlns: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">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android: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.FlexboxLayout
        android: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">

        <EditText
            android: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.RecyclerView
    android: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:

private fun addChipToGroup(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) }
}

Answer 2

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

<RelativeLayout 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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="100">

        <TextView
            android: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" />

        <FrameLayout
            android:layout_width="0dp"
            android:layout_weight="75"
            android:layout_height="wrap_content" >

            <com.google.android.material.chip.ChipGroup
                android: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>

Answer 3

use your xml like below

<RelativeLayout 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"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100">

    <TextView
        android: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.ChipGroup
        android: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);