CODEWITHSUNDEEP
androidandroid-layoutandroid-tabs
Shanki Bansal
Shanki Bansal

Reputation: 1740

layout_height="wrap_content" not working for android.support.design.widget.TabLayout

 <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/primary_color"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:theme="@style/AppTheme"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabIndicatorColor="@color/red"
            app:tabIndicatorHeight="3dp"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_below="@+id/app_bar_layout"/>

</android.support.design.widget.CoordinatorLayout>

I have set the custom UI for tab : 

private TabLayout mTabLayout;
for (int i = 0; i < TITLES.length; i++) {
        RelativeLayout tabView = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        mTabLayout.getTabAt(i).setCustomView(tabView);
}

The below is my custom UI : custom_tab.xml

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:text="Title"
    android:textSize="14sp"/>

When I increase the above height of text view then the height of Tablayout doesn't increases and the custom view in tab get cut-off from the bottom.

I think some how Tablayout's height is fixed (may be the height of Action bar), even changing the it's height to "match_parent" doesn't work.

How can I increase the height of Tablayout? Is there anything I'm doing wrong?

Upvotes: 4

Views: 2262

Answers (1)

dell116
dell116

Reputation: 5915

TabLayout seems to be restricted from having a height that's less than 48 DIPs.

Have a look at TabLayout's onMeasure method and how it calculates height.

The onMeasure methods calculates an "idealHeight" based on a hard-coded DIP's value from TabLayout.DEFAULT_HEIGHT.

Since this is a Material Design widget layout Google probably wants to make sure you're not violating their Material Design spec with regard to some touchable height rule someone important made up :-P

I created a work-around for this by subclassing TabLayout, and setting its height to match that of exactly its first child (tabStrip).

Be sure to call through super.onMeasure so the children of this View can be measured. This is vital to do before calling tabStrip.getMeasuredHeight()

@NonNull private ViewGroup tabStrip;

public CustomTabLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    tabStrip = (ViewGroup) getChildAt(0);
    tabStrip.getLayoutParams().height = LayoutParams.WRAP_CONTENT;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    // Force the height of this ViewGroup to be the same height of the tabStrip
    setMeasuredDimension(getMeasuredWidth(), tabStrip.getMeasuredHeight());
}

Upvotes: 3

Related Questions