I can't seem to align my tab titles to the left, inside my TabLayout. At the moment, the titles are centered. Here is what I want to achieve.
And this is what I have at the moment.
The code I'm using is as follows:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white"
app:tabSelectedTextColor="#color/white"
app:tabIndicatorColor="#color/white"
android:background="#color/slate_grey"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
add app:tabMode="scrollable" to your <TabLayout.../> and don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" too.
For more info check out https://developer.android.com/reference/android/support/design/widget/TabLayout.html
Just set the TabLayout width to wrap_content. Done.
Try app:tabPaddingEnd="" very late answer but hope it will help someone
In addition of Elvis' answer, the app:tabPadding* attributes could help you to distribute (or normalize the length of) the tab titles.
There is a way out ....
wrap your Tablayout with a Relative layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="169dp"
android:layout_height="?actionBarSize"
android:layout_alignParentStart="true"
android:layout_marginEnd="120dp"
android:textAllCaps="false"
app:tabIndicator="#drawable/tab_indicator"
app:tabIndicatorColor="#ffffff"
app:tabIndicatorFullWidth="false"
app:tabIndicatorGravity="bottom"
app:tabPaddingEnd="-3dp"
app:tabPaddingStart="-6dp"
app:tabSelectedTextColor="#ffffff"
app:tabTextColor="#717171" />
</RelativeLayout>
Related
There are other questions about it but all of them answers how to take full witdh in XML tag:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
and the answer (above) didn't work in my project's XML tag:
<com.google.android.material.tabs.TabLayout/>
I am using ConstraintLayout as a root:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
It should be possible but it seems that I can't find an answer.
So how to fill root width with fixed number of Tabs?
Apparently it was so simple. The key is use:
android:layout_width="0dp" instead of app:tabMaxWidth="0dp", with app:tabGravity and app:tabMode
Here is full tag:
<com.google.android.material.tabs.TabLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
app:tabGravity="fill"
app:tabMode="fixed"/>
I want to remove space between tabs. I use custom tab layout. please check the image for clear understanding. I already tried app:tabPaddingEnd="0dp" app:tabPaddingStart="0dp", but not working.
<CustomViewPager
android:id="#+id/tabs_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
android:fillViewport="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:clipToPadding="false"
android:layout_marginTop="5dp"
android:background="#color/white"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="scrollable"
app:tabPaddingEnd="0dp"
app:tabPaddingStart="0dp" />
</CustomViewPager>
Try below code. This code will help you.
final int pageMargin = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 8, getResources() .getDisplayMetrics());
viewPager.setPageMargin(pageMargin);
Try to make android:layout_width="match_parent" to the child view of your TabLayout
you can set margin between pages of viewpager using
viewPager.setPageMargin(int marginPixels);
and apply margin in negative value to reduce margin between pages
I have a TabLayout, where I want the tabs to be displayed in the center of the screen.
Below is the XML for my TabLayout.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white"
app:tabGravity="center"
app:tabIndicatorColor="#color/about_tab_selected"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabPaddingEnd="20dp"
app:tabPaddingStart="20dp"
app:tabSelectedTextColor="#color/about_tab_selected"
app:tabTextAppearance="#style/UGTabTextAppearance"
app:tabTextColor="#color/about_tab_unselected" />
However, my Tabs are still displayed to the left, and I'm unable to center them in the Activity.
What I'm getting is this:
What I really want is:
Can somebody please tell me what I'm doing wrong here? If you need additional information regarding the rest of the XML, please let me know.
Tab gravity only effects MODE_FIXED.
One possible solution is to set your layout_width to wrap_content and layout_gravity to center_horizontal
Ok, so the problem was with layout_width="match_parent"
When I changed that to layout_width="wrap_content", it solved my problem.
The final XML is:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white"
app:tabGravity="center"
app:tabIndicatorColor="#color/about_tab_selected"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabPaddingEnd="20dp"
app:tabPaddingStart="20dp"
app:tabSelectedTextColor="#color/about_tab_selected"
app:tabTextAppearance="#style/UGTabTextAppearance"
app:tabTextColor="#color/about_tab_unselected" />
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.
Here is my layout inside ViewPager. I would like to change the color of the current tab highlighter which is below the text. Actually it is showing in black color. But I don't know whether it is a color by default or not. And also I have one more doubt. If I use PagerTitleStrip this tab highlighter doesn't appear. Is there a way to bring that with titlestrip?
Here is my layout:
<android.support.v4.view.PagerTabStrip android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#color/pager_titlestrip_bg"
android:textColor="#color/pager_titlestrip_text"
android:paddingTop="5dp"
android:paddingBottom="4dp" >
</android.support.v4.view.PagerTabStrip>
This just works.
PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_title_strip);
pagerTabStrip.setDrawFullUnderline(true);
pagerTabStrip.setTabIndicatorColor(Color.RED);
Thanks!
It can be done in both programmatically with jAVA or with XML
By XML
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#android:color/white"
android:layout_height="wrap_content" />
Or more simply you can solve this Code aswell
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
Similarly to change the Height
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
This works in my project.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
app:tabGravity="fill"
app:tabIndicatorColor="#color/text3"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/text3"
app:tabTextColor="#000" />