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.
Related
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 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>
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.
So I'm creating a Material design app for Android. I'm using the new Toolbar instead of using an ActionBar. In one activity, I want to display tabs below the toolbar. This works for both portrait and landscape mode alike, but in landscape mode, the tabs are centered and do not cover the entire width of the view.
Is this by design or is there something I need to know?
This is the layout for my activity:
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:height="?attr/actionBarSize"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="#style/ToolbarTitle"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/toolbar_tabs"
android:height="?attr/actionBarSize"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
The following code initializes this in onCreate:
// Set up the toolbar
this.setSupportActionBar(mToolbar);
ActionBar ab = this.getSupportActionBar();
if (ab != null)
{
ab.setDisplayHomeAsUpEnabled(true);
ab.setHomeButtonEnabled(true);
ab.setDisplayShowTitleEnabled(true);
}
// Set up the pager and tabs from the pager
mTabViewPager.setAdapter(mTabPagerAdapter);
mTabLayout.setupWithViewPager(mTabViewPager);
The mTabPagerAdapter is a pager adapter that holds the pages to be shown by the tabs as found in the docs.
You can use app:tabGravity="fill" to fit width in entire screen.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabMode="fixed"
app:tabMaxWidth="0dp"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/white_dim" />`
Meterial design Tab layout detailed tutorial
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" />