Search code examples
androidviewandroid-tablayout

Custom tabLayout badge view getting cut off [Android]


For the tab layout, am inflating custom layout custom_tab.xml, Where the badge view is getting cut off if the length of the name is increased.

I have tried wrap_content for all views, still no effect

This is the custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="48dp"
              android:layout_margin="5dp"
              android:orientation="horizontal">

    <TextView

        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="title"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView

        android:id="@+id/tv_count"
        android:layout_width="31dp"
        android:layout_height="31dp"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/badge_drawable"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="12sp" />

</LinearLayout>

This is the java code for inflating views for tablayout

private void setupTabIcons() {
    for (int i = 0; i < NewFragment.categories.size(); i++) {
        try {
            LinearLayout currentTabLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);

            ..............................
            ..............................

            tabLayout.getTabAt(i).setCustomView(currentTabLayout);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Screen shot for text having increased length with single line set as false

Screen shot for text having increased length with single line set as true

enter image description here

which in both case cuts the badge view from the layout I want the text view to be single line.

Can anyone please help me fixing this issue.

Any kind of help or suggestion will be greatly appreciated.

Thanks


Solution

  • Fixed the issue by setting width to a higher level under dimens.xml file under tag

    <dimen name="tab_max_width">XXXdp</dimen>