CODEWITHSUNDEEP
androidkotlinmaterial-designandroid-chips
A S M Sayem
A S M Sayem

Reputation: 2070

How can I limit the area of chip items (the wrap area) to 2 lines max inside the ChipGroup?

I am trying to implement a ChipGroup with some chip items inside it. Which works fine so far. But My requirement is to show these items inside the ChipGroup with certain number of rows. As example: I have 20 items as chip inside my group, And only 6/7 items fits in between the 2 lines. So, I want to show the chips which fit into the ChipGroup between 2 lines only.

Currently I am getting this (sample) output:

current situation

And my expectation is like below:

expected ouput

Additional queries:

Upvotes: 1

Views: 4088

Answers (2)

Tiarait
Tiarait

Reputation: 175

ExtendedChipGroup U can set max lines and show/hide button For this I created a class and inherited it from ChipGroup, next rewrote the onLayout method so that all elements that are after the visible line are hidden

<io.github.tiarait.extendedchipgroup.ExtendedChipGroup
            android:id="@+id/chip_group"
            app:maxRow="2"
            app:itemSpacing="6dp"
            app:additionalTextColor="#eee"
            app:additionalChipColor="@color/colorDarkBtn"
            app:additionalChipColorPressed="@color/colorDarkBtnSecondary"
            app:additionalChipMore="@string/btn_show"
            app:additionalChipHide="@string/btn_hide"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

enter image description here

Upvotes: 0

peerless2012
peerless2012

Reputation: 209

I use customer view to make this feature.

public class AppChipGroup extends ChipGroup {

    private static final int[] MAX_HEIGHT_ATTRS = {android.R.attr.maxHeight};

    private int mMaxHeight = Integer.MAX_VALUE;

    public AppChipGroup(Context context) {
        super(context);
    }

    public AppChipGroup(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AppChipGroup(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, MAX_HEIGHT_ATTRS);
        mMaxHeight = typedArray.getDimensionPixelSize(0, Integer.MAX_VALUE);
        typedArray.recycle();
    }

    @SuppressLint("RestrictedApi")
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = Math.min(getMeasuredHeight(), mMaxHeight);
        setMeasuredDimension(getMeasuredWidth(), height);
    }

}

then when use ChipGroup, set the maxHeight value.

<packagename.chip.AppChipGroup
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.MaterialComponents.ChipGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="@dimen/search_input_history_max_height"
    app:chipSpacing="@dimen/search_input_history_chip_space" />

Or you can get the chip height and calculate the max_height in onMeasure method and set the measure dimension.

Upvotes: 1

Related Questions