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
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 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 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.
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" />