I am using the DesignSupportLibrary (v22.2.0) and want the tabs in the TabLayout to be the same width - regardless the tab text length. I have tried MODE_FIXED but it still shows the tabs with different widths. Here is the xml:
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabMode="fixed"/>
If you want to specify the minimum width for each tab, you can set it in the style:
<style name="MyTabLayoutStyle" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="tabMinWidth">100dp</item>
</style>
and then set the theme to this style instead (you can delete the tabMode attribute as well):
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/MyTabLayoutStyle"/>
Alternately, you can set the tabMinWidth directly on the TabLayout:
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabMinWidth="100dp"/>
An additional note: It looks like MODE_FIXED does not work properly unless you define the layout_width of the TabLayout (instead of using "wrap_content"). However the tabs will still only expand to match the widest tab (as determined by the longest length of text). So if your defined width is larger than the generated tabs. there will be an empty space to the right of the tabs.
Related
I want to centralize TabLayout when app:tabMode="scrollable"
My TabLayout
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="center"
android:background="#android:color/white"
android:gravity="center"
android:visibility="visible"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="0dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/colorTabSelected"
app:tabTextAppearance="#style/CustomTextStyle"
app:tabTextColor="#color/colorTabNormal"></android.support.design.widget.TabLayout>
With that layout. Tablayout like this (but all tabs are aligned left):
if app:tabMode="fixed", the text in the center tab will have smaller size than the others.
So. I want make the same size of all text in TabLayout if app:tabMode="fixed" (all tabs are aligned central). If app:tabMode="scrollable", I want to centralize tab(like tabMode fixed).
Thanks
SmartTabLayout library could help you having your tabs always in center.
I work around by adding padding, still in app:tabMode="fixed"
app:tabMode="fixed"
app:tabPaddingEnd="1dp"
app:tabPaddingStart="1dp"
to TabLayout.
I'm using Tablayout + ViewPager as the UI frame.
There is a underline of the selected tab in tablayout.the length of text and the underline length don't equal.I wanna them equal
How to do this?
Thanks very much
I have the same requirement. You can use
app:tabIndicatorFullWidth="false"
I hope this will work for you.
You can change tabIndicator color and height like below
<android.support.design.widget.TabLayout
android:id="#id/pages_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="4dp"/>
AFAIK you the tab indicator length is set to its tab width, you can't change only indicator size
if you really want to change try changing tabWidth so indicator also vary with this change.
app:tabMaxWidth="30dp"
app:tabMinWidth="210dp"
app:tabMaxWidth="110dp"
Add just these two line of code in your XML. Its depend on your tab item. You can modified just increase and decrease both at a time.
You can add another layout over tab layout and give padding accordingly.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:layout_below="#+id/toolbar"
android:id="#+id/tabLayout"
android:background="#color/colorTangerine">
<com.techlabs.oodhaar.views.CustomTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#color/colorTangerine"
app:tabIndicatorColor="#color/colorBackground"
app:tabSelectedTextColor="#color/colorBackground"
app:tabTextColor="#color/colorBackground"
app:tabIndicatorHeight="4dp"
/>
</RelativeLayout>
I have created a view pager with TabLayout. Now the issue is if I have 2 or more tabs then everything is fine. But if I am having only one tab then it is not covering the entire screen width. PFA the xml layout
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
style="#style/TabLayout"
android:fillViewport="true"
android:layout_below="#id/ssrToolbar"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/sliding_tabs"
android:layout_above="#+id/llButtonLayout"
android:background="#android:color/white" />
Also here are the two images
If someones still interested you should add this property for TabLayout in xml app:tabMaxWidth="big_number", for big_number i chose 2000dp. If you are not assigning any value default implementation subtracts widths measured specifications size with TAB_MIN_WIDTH_MARGIN value.
I want to programmatically hide / show the TabLayout in my AppBarLayout. Simply setting visibility to VISIBLE and GONE is not enough, as I want to animate the changes and reclaim the space with my content while the tab retreats and leave the space once the tab is shown back.
Below is the relevant part of my layout XML -
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabMode="scrollable"
android:layout_marginStart="42dp"
android:layout_marginLeft="42dp"
style="#style/MainTabLayout">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
As any ViewGroup subclass, AppBarLayout allows for automatic animations during the adding/removal of child views. You just need to add android:animateLayoutChanges="true" (default to false) in your layout file.
As for reclaiming the space content when the view is gone, all you have to do is use setVisibility(View.GONE) rather than setVisibility(View.INVISIBLE), because the latter holds the space for the invisible view.
When I setup the tabBackground attribute of the "22.2.0 Android design library" TabLayout (android.support.design.widget.TabLayout) two problems appear :
The ripple effect in the tabs is lost
The tab indicator disappears.
This occurs on both Lollipop and Kitkat devices.
Without the tabBackground settings, both ripple effect and tab indicator work but the background has a default color that is different from the toobar, which is not exactly conform to the material design guidelines.
Please find below the XML :
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabBackground = "?attr/colorPrimary" />
Use android:background="?attr/colorPrimary" instead of app:tabBackground = "?attr/colorPrimary".
If you have a dark primary color, you may also want to change the theme to ThemeOverlay.AppCompat.Dark. This makes the text and the ripple color white.
Full example:
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark" />