TagLayout: A custom View that creates a multiple tag like views in side one layout

item_user_detail_tags.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:id="@+id/cardView_userDetailTags"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="@dimen/_5sdp"
    app:cardElevation="0dp"
    tools:ignore="ContentDescription,RtlHardcoded">

    <LinearLayout
        android:id="@+id/linearLayout_userDetailTags"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <io.raychat.raychat.util.customWidget.textView.CustomTextView
            android:id="@+id/textView_tagName_itemUserDetailTag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            android:maxLines="1"
            android:paddingStart="@dimen/_10sdp"
            android:paddingTop="@dimen/_5sdp"
            android:paddingEnd="@dimen/_10sdp"
            android:paddingBottom="@dimen/_5sdp"
            android:text="@string/Tags"
            android:textStyle="bold"
            app:size="medium"
            app:typeface="shabnam" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|center_vertical"
            android:layout_marginRight="@dimen/_5sdp">

            <ImageView
                android:id="@+id/imageView_delete_itemUserDetailTag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="?selectableItemBackground"
                android:padding="@dimen/_5sdp"
                android:visibility="gone"
                app:srcCompat="@drawable/ic_delete" />

            <ProgressBar
                android:id="@+id/progressBar_delete_itemUserDetailTag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/imageView_delete_itemUserDetailTag"
                android:layout_alignTop="@+id/imageView_delete_itemUserDetailTag"
                android:layout_alignRight="@+id/imageView_delete_itemUserDetailTag"
                android:layout_alignBottom="@+id/imageView_delete_itemUserDetailTag"
                android:visibility="gone" />


        </RelativeLayout>


    </LinearLayout>


</androidx.cardview.widget.CardView>

TagLayout.java

package io.raychat.raychat.util.customWidget.tagLayout;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;

import androidx.annotation.ColorInt;
import androidx.annotation.ColorRes;
import androidx.cardview.widget.CardView;
import androidx.core.content.ContextCompat;

import java.util.ArrayList;
import java.util.List;
import java.util.Locale;

import io.raychat.raychat.R;
import io.raychat.raychat.model.user.tags.TagsData;
import io.raychat.raychat.util.customWidget.textView.CustomTextView;

@SuppressWarnings("unchecked")
public class TagLayout extends LinearLayout {

    /* Border color of each bubble */
    private int layoutBgColor;
    /* Color of text (used by count view) */
    private int textColor;

    /* Stores count of excess bubbles (used when peek exceeded) */
    private int excess = 0;

    private int screenWidth = 0;

    private Context context;
    private int counter = 0;
    private List<TagsData> tagsDataList = new ArrayList<>();
    private TagLayoutClickListener drawableListener;

    public TagLayout(Context context) {
        this(context, null);
        setOrientation(HORIZONTAL);
        setLayoutDirection(LAYOUT_DIRECTION_RTL);
    }

    public TagLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        setOrientation(HORIZONTAL);
        setLayoutDirection(LAYOUT_DIRECTION_RTL);
    }

    public TagLayout(Context c, AttributeSet attrs, int defStyleAttr) {
        super(c, attrs, defStyleAttr);
        setOrientation(HORIZONTAL);
        setLayoutDirection(LAYOUT_DIRECTION_RTL);

    }

    public void setClickListener(TagLayoutClickListener drawableListener) {
        this.drawableListener = drawableListener;
    }

    public void setScreenWidth(int screenWidth) {
        this.screenWidth = screenWidth;
    }

    public void addTag(List<TagsData> tagsData, Context context, int tagCount, int excess) {
        this.context = context;
        this.tagsDataList = tagsData;

        for (int i = 0; i < tagCount; i++) {
            addView(createThemedTagLayout(tagsData.get(i)));
        }

        addView(createThemedCount(excess));
    }

    public void addTag(List<TagsData> tagsData, Context context, int tagCount) {
        this.context = context;
        this.tagsDataList = tagsData;

        for (int i = 0; i < tagCount; i++) {
            addView(createThemedTagLayout(tagsData.get(i)));
        }

    }

    /**
     * Reset the excess count and remove all bubbles from this ViewGroup.
     */
    public void clearBubbles() {
        this.excess = 0;
        tagsDataList = new ArrayList<>();
        removeAllViews();
    }

    public void setLayoutBgColor(@ColorInt int color) {
        this.layoutBgColor = color;
        invalidate();
    }

    public void setBubbleBorderColorResource(@ColorRes int res) {
        setLayoutBgColor(ContextCompat.getColor(getContext(), res));
    }

    public void setBubbleTextColor(@ColorInt int color) {
        this.textColor = color;
        invalidate();
    }

    public void setBubbleTextColorResource(@ColorRes int res) {
        setBubbleTextColor(ContextCompat.getColor(getContext(), res));
    }


    private View createThemedCount(int excess) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_user_detail_tags, null);

        TextView txtTagTitle = view.findViewById(R.id.textView_tagName_itemUserDetailTag);

        LinearLayout layout = view.findViewById(R.id.linearLayout_userDetailTags);

        CardView cardView = view.findViewById(R.id.cardView_userDetailTags);

        LayoutParams cardParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        int marginFive = context.getResources().getDimensionPixelSize(R.dimen._5sdp);

        int marginTen = context.getResources().getDimensionPixelSize(R.dimen._10sdp);

        cardParams.setMargins(0, marginFive, marginFive, marginFive);

        cardView.setLayoutParams(cardParams);

        txtTagTitle.setPadding(marginTen, marginFive, marginTen, marginFive);

        txtTagTitle.setText(String.format(Locale.getDefault(), "%s%d", "+", excess));

        txtTagTitle.setTextColor(Color.parseColor("#841474"));

        layout.setBackgroundColor(Color.parseColor("#F0F1F2"));

        txtTagTitle.setGravity(Gravity.CENTER);

        return view;
    }

    private View createThemedTagLayout(TagsData tagsData) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_user_detail_tags, null);

        CustomTextView txtTagTitle = view.findViewById(R.id.textView_tagName_itemUserDetailTag);

        ImageView btnDelete = view.findViewById(R.id.imageView_delete_itemUserDetailTag);

        ProgressBar progressBar = view.findViewById(R.id.progressBar_delete_itemUserDetailTag);

        LinearLayout layout = view.findViewById(R.id.linearLayout_userDetailTags);

        CardView cardView = view.findViewById(R.id.cardView_userDetailTags);

        LayoutParams cardParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        int marginFive = context.getResources().getDimensionPixelSize(R.dimen._5sdp);

        int marginTen = context.getResources().getDimensionPixelSize(R.dimen._10sdp);

        cardParams.setMargins(0, marginFive, marginFive, marginFive);

        cardView.setLayoutParams(cardParams);

        txtTagTitle.setPadding(marginTen, marginFive, marginFive, marginFive);

        txtTagTitle.setTypefaceIndex(5);

        txtTagTitle.setTextSizeIndex(4);

        txtTagTitle.setText(tagsData.getTitle());

        txtTagTitle.setTextColor(Color.parseColor(tagsData.getTextColor()));

        layout.setBackgroundColor(context.getResources().getColor(R.color.GreyDivider));

//        txtTagTitle.setCompoundDrawablesWithIntrinsicBounds(null, null,
//                ContextCompat.getDrawable(context, R.drawable.ic_delete), null);
//
//        txtTagTitle.setCompoundDrawablePadding(context.getResources().getDimensionPixelSize(R.dimen._4sdp));

        btnDelete.setVisibility(VISIBLE);

        btnDelete.setOnClickListener(v -> {
            if (drawableListener != null) {
                drawableListener.onDeleteTagClickListener(tagsData);
                btnDelete.setVisibility(INVISIBLE);
                progressBar.setVisibility(VISIBLE);
            }
        });

        txtTagTitle.setGravity(Gravity.CENTER);

        return view;
    }
}