I am trying to set custom view to tab layout, but the tab is not getting the height of the custom view,so it displays cut off,can someone please tell me what am I doing wrong?I tried to call invalidate() and requestlayput() for tabLayout,but that didn't help.
ContactPagerAdapter contactPagerAdapter = new ContactPagerAdapter(getFragmentManager(), new String[]{getString(R.string.received), getString(R.string.given)});
viewPager.setAdapter(contactPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
TabLayout.Tab tab1 = tabLayout.getTabAt(0);
tab1.setCustomView(getTabView(0, 0));
TabLayout.Tab tab2 = tabLayout.getTabAt(1);
tab2.setCustomView(getTabView(1, 2));
public View getTabView(int position, int count) {
String[] tabTitles = new String[]{getString(R.string.received), getString(R.string.given)};
View tabView = LayoutInflater.from(getActivity()).inflate(R.layout.tab_layout, null);
if (position == 0) {
receivedCount = tabView.findViewById(R.id.tv_vouch_count);
receivedCount.setText(String.format("%s", String.valueOf(count)));
} else {
givenCount = tabView.findViewById(R.id.tv_vouch_count);
givenCount.setText(String.format("%s", String.valueOf(count)));
}
TextView tabTitle = tabView.findViewById(R.id.tv_tab_title);
tabTitle.setText(tabTitles[position]);
return tabView;
}
tab_layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_vouch_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textColor="#color/action_bar_color"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textColor="#color/tv_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_vouch_count" />
</android.support.constraint.ConstraintLayout>
tab.xml
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
app:tabBackground="#drawable/bg_tab"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/holo_orange_dark"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/tv_color"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/tv_color" />
You should refresh the layoutParams of the TabLayout after add the customView, but I couldn't calculate the new size and i used a fix size to test it:
tabLayout.setLayoutParams(new ConstraintLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 190 ));
ContactPagerAdapter contactPagerAdapter = new ContactPagerAdapter(getFragmentManager(), new String[]{getString(R.string.received), getString(R.string.given)});
viewPager.setAdapter(contactPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
TabLayout.Tab tab1 = tabLayout.getTabAt(0);
tab1.setCustomView(getTabView(0, 0));
TabLayout.Tab tab2 = tabLayout.getTabAt(1);
tab2.setCustomView(getTabView(1, 2));
tabLayout.setLayoutParams(new ConstraintLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 190 ));
I hope it helps you to understand it better.
Solution:
Try
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_orange_light">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:tabGravity="center"
app:tabMode="scrollable" />
</FrameLayout>
Wrap the TabLayout inside FramLayout and try.
Hope it helps.
tab layout using default android hight try to put real value for it like this
<android.support.design.widget.TabLayout
..
android:layout_height="50dp"
.. />
Have you tried using it this way? if you want to use dynamic height according to the screen size of the device then do something like this:
private void initTabLayout() {
tabsMultipleList.addTab(tabsMultipleList.newTab().setText("" + getString(R.string.tab_1)));
tabsMultipleList.addTab(tabsMultipleList.newTab().setText("" + getString(R.string.tab_2)));
tabsMultipleList.setTabGravity(TabLayout.GRAVITY_FILL);
tabsMultipleList.setPadding(0, 0, 0, 0);
// The line below is the real fix here it will adjust your tab size according to your screen size.
tabsMultipleList.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
//tabsMultipleList.setSelectedTabIndicatorColor(Color.parseColor("#0070C0"));
int accentColor = ResourcesCompat.getColor(getResources(), R.color.colorAccent, null);
tabsMultipleList.setSelectedTabIndicatorColor(accentColor);
TextView tabOne = (TextView) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab, null);
tabOne.setText("" + getString(R.string.tab_1));
tabOne.setTextColor(accentColor);
tabOne.setGravity(Gravity.CENTER | Gravity.CENTER_HORIZONTAL);
tabsMultipleList.getTabAt(0).setCustomView(tabOne);
TextView tabTwo = (TextView) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab, null);
tabTwo.setText("" + getString(R.string.2));
tabTwo.setTextColor(accentColor);
tabTwo.setGravity(Gravity.CENTER | Gravity.CENTER_HORIZONTAL);
tabsMultipleList.getTabAt(1).setCustomView(tabTwo);
}
Set a layout_height in dps instead of wrap_content this could differ in different display sizes but if you wanna set a height dynamically, check this
Related
I want to change my tab text size when selected or unselected like this.
My tablayout
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar"
android:overScrollMode="never"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="scrollable"
app:tabRippleColor="#null"
app:tabTextAppearance="#style/MyCustomTabText"
app:tabIndicatorHeight="0dp"
/>
MyCustom style
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyCustomTabText">
<item name="android:textSize">16sp</item>
</style>
<resources>
I use the custom style for text size but I do not know how to change when it is selected/unselected. Could someone give me a hand with this, please?
To change the Tab font size based the selected/unselected state you have to use your custom tab view and use TabLayout.OnTabSelectedListener to change the size of selected/unselected tab.
1.TabLayout in xml can be like below:
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/holo_orange_light">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 2" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 3" />
</com.google.android.material.tabs.TabLayout>
2.Initialise for each tab a CustomView using setCustomView method and use TabLayout.OnTabSelectedListener to listen which tab is currently selected and which one is now unselected and change the text size like below:
//get each tab from tabLayout
TabLayout.Tab tab0 = tabLayout.getTabAt(0);
TabLayout.Tab tab1 = tabLayout.getTabAt(1);
TabLayout.Tab tab2 = tabLayout.getTabAt(2);
//and set for each one a custom View
tab0.setCustomView(createCustomTabView("Tab 0", 30, android.R.color.holo_green_light)); //initially this tab is selected
tab1.setCustomView(createCustomTabView("Tab 1", 15, android.R.color.black));
tab2.setCustomView(createCustomTabView("Tab 2", 15, android.R.color.black));
//add OnTabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
#Override
public void onTabSelected(TabLayout.Tab tab) {
setTabTextSize(tab, 30, android.R.color.holo_green_light);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
setTabTextSize(tab, 15, android.R.color.black);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
with the below helper functions to create the Tab CustomView and to change the text size based the selected/unselected state:
private View createCustomTabView(String tabText, int tabSizeSp, int textColor){
View tabCustomView = getLayoutInflater().inflate(R.layout.tab_customview, null);
TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
tabTextView.setText(tabText);
tabTextView.setTextSize(tabSizeSp);
tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor));
return tabCustomView;
}
private void setTabTextSize(TabLayout.Tab tab, int tabSizeSp, int textColor){
View tabCustomView = tab.getCustomView();
TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
tabTextView.setTextSize(tabSizeSp);
tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor));
}
3.And the custom Tab layout R.layout.tab_customview can be like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="#+id/tabTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:textSize="15sp"
android:textAlignment="center"
android:textColor="#android:color/black"
android:maxLines="1"
tools:text="Tab"/>
</RelativeLayout>
Result:
I have a TabLayout in my app and it holds custom views:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal">
<com.myproject.app.utils.commons.IconImageView
android:id="#android:id/icon"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_marginRight="14dp"
android:layout_marginEnd="14dp"
app:iconStateListColor="#color/color_order_tab"/>
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/color_order_tab"
android:textSize="14sp"
android:fontFamily="sans-serif-medium"/>
</LinearLayout>
</RelativeLayout>
I want to show text on the Tab only if it selected - already done - and resize these tabs dynamically, is there any way to do that?
If I use app:tabMode="fixed" tabs don't resize, if I use app:tabMode="scrollable" my tabs are always on the left of my screen. If I do android:layout_width="wrap_content" and android:layout_gravity="center_horizontal" - TabLayout doesn't fill the screen..
So I need to:
Resize tabs when text appears or disappears;
Tabs should fill the screen in any case.
First of all, you cannot obtain all the desired feature on using fixed mode. As in fixed mode, you cannot resize your tabs.
You need to use scrollable mode in order to resize the tabs.
If I do android:layout_width="wrap_content" and
android:layout_gravity="center_horizontal" - TabLayout doesn't fill
the screen
You can set a parent container and set a background so that it gives you a feel of a tab layout with full device width.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_orange_light">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:tabGravity="center"
app:tabMode="scrollable" />
</FrameLayout>
Then, you can add the tabs i.e. your custom tabs in your tab layout and after that, you can add addOnTabSelectedListener to get the desired results:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
View view = getLayoutInflater().inflate(R.layout.custom_tab, null);
((TextView) view.findViewById(R.id.text)).setText("large text one");
View view1 = getLayoutInflater().inflate(R.layout.custom_tab, null);
((TextView) view1.findViewById(R.id.text)).setText("1");
View view2 = getLayoutInflater().inflate(R.layout.custom_tab, null);
((TextView) view2.findViewById(R.id.text)).setText("Large Text Text Text");
View view3 = getLayoutInflater().inflate(R.layout.custom_tab, null);
((TextView) view3.findViewById(R.id.text)).setText("One");
View view4 = getLayoutInflater().inflate(R.layout.custom_tab, null);
((TextView) view4.findViewById(R.id.text)).setText("Another large text");
mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view));
mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view1));
mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view2));
mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view3));
mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view4));
mBinding.tabs.getTabAt(0).getCustomView().findViewById(R.id.text).setVisibility(View.VISIBLE);
mBinding.tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
tab.getCustomView().findViewById(R.id.text).setVisibility(View.VISIBLE);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.getCustomView().findViewById(R.id.text).setVisibility(View.GONE);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
As you can see the tabs are now resizable and only text on the selected tab is visible. Hope that help
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
app:tabTextAppearance="?attr/tabTextAppearance"
app:tabMode="scrollable" />
I have a tablayout with 2 tabs. I am using custom view to set the tabs
Tablayout XML
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabPaddingBottom="-1dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabPaddingTop="-1dp"
app:tabGravity="fill"
app:tabIndicatorHeight="5dp"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Custom View XML
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:andorid="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#android:color/white"
andorid:text="XXX" />
Java code for tab set up
private void setupTabIcons() {
TextView tabOne = (TextView) LayoutInflater.from(getActivity()).inflate(R.layout.tab_text, null);
tabOne.setBackgroundColor(ContextCompat.getColor(getActivity(),R.color.tabText1));
tabOne.setText(tabTitle[0]);
tabLayout.getTabAt(0).setCustomView(tabOne);
TextView tabTwo = (TextView) LayoutInflater.from(getActivity()).inflate(R.layout.tab_text, null);
tabTwo.setBackgroundColor(ContextCompat.getColor(getActivity(),R.color.tabText2));
tabTwo.setText(tabTitle[1]);
tabLayout.getTabAt(1).setCustomView(tabTwo);
}
This is my output
How do I match the height of the textview to tablayout height?
Had to do it programmatically
ViewGroup.LayoutParams layoutParams = new TableLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
Setting the params to textview
tabOne.setLayoutParams(layoutParams);
instead of this try this layout for full access layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:andorid="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#android:color/white"
andorid:text="XXX" />
</RelativeLayout>
Try to use this.. this is how i customize my tabs
TabLayout tabs = (TabLayout)findviewById(R.id.tabs);
ViewGroup vg = (ViewGroup) tabs.getChildAt(0);
int tabsCount = vg.getChildCount();
for (int j = 0; j < tabsCount; j++) {
ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
int tabChildsCount = vgTab.getChildCount();
for (int i = 0; i < tabChildsCount; i++) {
View tabViewChild = vgTab.getChildAt(i);
// Get TextView Element
if (tabViewChild instanceof TextView) {
// change font
((TextView) tabViewChild).setTypeface(tf);
// change color
((TextView) tabViewChild).setTextColor(getResources().getColor(R.color.white));
// change size
((TextView) tabViewChild).setTextSize(18);
// change padding
tabViewChild.setPadding(0, 0, 0, 0);
//..... etc...
}
}
}
Set height of tablayout wrap_content and set textview height 60dp/
I want to change indicator of tablayout from bottom to top.
my code
activity_tab.xml
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#000000"
app:tabMode="scrollable"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
I want this result.
how to do
thx for ask me and sorry for bad english.
Don't use scale = -1 and things like that.
From XML you can use app:tabIndicatorGravity="top"
From code you can use setSelectedTabIndicatorGravity(INDICATOR_GRAVITY_TOP)
It can be done by xml attribute, use android:scaleY="-1" in xml code. The view will flip vertically. Use the same method to correct the text and image used in tab title.
In xml file:
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:scaleY="-1"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
In Java code
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
// Adding the tabs using addTab() method
tabLayout.addTab(tabLayout.newTab().setText("Section 1"));
tabLayout.addTab(tabLayout.newTab().setText("Section 2"));
tabLayout.addTab(tabLayout.newTab().setText("Section 3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
TextView tv1 = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(0)).getChildAt(1));
tv1.setScaleY(-1);
TextView tv2 = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(1)).getChildAt(1));
tv2.setScaleY(-1);
TextView tv3 = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(2)).getChildAt(1));
tv3.setScaleY(-1);
You can achieve this by rotating the TabLayout like this:
tabLayout.setRotationX(180);
Then you must rotate all of its TextView children back, or you can set the TabLayout a custom view, instead of recursively searching for a TextView:
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(R.layout.layout_tab_view);
layout_tab_view.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rotationX="180"
android:text="HOME"/>
I guess you loose some default functionality if you set a custom view, such as Fragment title naming from PagerAdapter and TextView disabled appearance, but you can bind that somehow together in another way.
Unfortunately you cannot do it by setting an attribute or setting it in code.
TabLayout has a property mTabStrip of SlidingTabStrip (internal class), which is set as private final
private final SlidingTabStrip mTabStrip;
, so you cannot access it, by extending TabLayout.
So SlidingTabStrip (which extends LinearLayoyut)is a view which overrides draw method
#Override
public void draw(Canvas canvas) {
super.draw(canvas);
// Thick colored underline below the current selection
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
}
}
So you can see that it draws the rectangle with a top and bottom properties.
May be in future they will have a flag to change it.
I have a different approach for doing that..
Set the tab indicator color same as the background color of the tab layout (So that you will not see the tab indicator at bottom)
Add a linear layout (horizontal) just above the tab layout containing views (same number as equal to number of tabs).
<LinearLayout
android:layout_width="match_parent"
android:layout_height="5dp"
android:orientation="horizontal"
android:background="#color/tab_bg"
android:weightSum="3">
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:elevation="10dp"
android:background="#drawable/selector_tab_indicator_white"/>
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:elevation="10dp"
android:background="#drawable/selector_tab_indicator_blue"/>
<View
android:id="#+id/view3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:elevation="10dp"
android:background="#drawable/selector_tab_indicator_blue"/>
</LinearLayout>
Now just programmatically adjust the view backgrounds.
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
setTitle(getPageTitle(position));
switch(position){
case 0:
view1.setBackgroundResource( R.drawable.selector_tab_indicator_white );
view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
break;
case 1:
view1.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
view2.setBackgroundResource( R.drawable.selector_tab_indicator_white );
view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
break;
case 2:
view1.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
view3.setBackgroundResource( R.drawable.selector_tab_indicator_white );
break;
default:
view1.setBackgroundResource( R.drawable.selector_tab_indicator_white );
view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
break;
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
Use these selectors for customising the views
selector_tab_indicator_white.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="50dp"/>
<stroke
android:width="1dp"
android:color="#c4c0c0" />
<solid
android:color="#fafafa" />
selector_tab_indicator_blue.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="0dp"/>
<stroke
android:width="1dp"
android:color="#color/tab_bg" />
<solid
android:color="#color/tab_bg" />
The Result:
You only need those lines
tabLayout.setRotationX(180);
tabListed = ((LinearLayout)tabLayout.getChildAt(0));
for(int position = 0;position<tabListed.getChildCount();position++) {
LinearLayout item=((LinearLayout) tabListed.getChildAt(position));
item.setBackground(getDrawable(R.drawable.square_tab));
item.setRotationX(180);
}
First tab rotation turn tab layout 180º then you will get all tabs and them turn it 180º. So they be good again.
It can't be done by xml attribute, but can be done via setting image in background of tab with filled colour at top and transparent at bottom.
<android.support.design.widget.TabLayout
...
app:tabBackground="#drawable/bg_tab"
...
/>
bg_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/cap" android:state_selected="true" />
</selector>
cap.png
transparent at bottom
I know this question was asked 2 years ago, but I didn't find any simple solution without using any library (smartTabLayout doesn't have SelectedTextColour property).
invert your tabLayout to get the indicator at the top
android:rotationX="180"
now this will cause the text in that tab to be inverted as well, so to counter that
we'll have to create custom Tab view. Make an xml file eg: layout_custom_tab
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tab.text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:padding="10dp"
android:rotationX="180"
android:textAllCaps="true"
android:textSize="12sp"
android:textColor="#color/white"
/>
Note: you don't need RelativeLayout or anyting else when there is just one element
create your own TabLayout
and set the customView to it.
public class TabLayoutPlus extends TabLayout {
public TabLayoutPlus(Context context) {
super(context);
}
public TabLayoutPlus(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TabLayoutPlus(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public void setupWithViewPager(ViewPager viewPager) {
super.setupWithViewPager(viewPager);
this.removeAllTabs();
PagerAdapter adapter = viewPager.getAdapter();
for (int i = 0, count = adapter.getCount(); i < count; i++) {
Tab tab = this.newTab();
View customView = LayoutInflater.from(getContext()).inflate(R.layout.layout_custom_tab, null);
TextViewPlus tv = (TextViewPlus) customView.findViewById(R.id.tab_text);
tv.setText(adapter.getPageTitle(i));
tab.setCustomView(customView);
this.addTab(tab.setText(adapter.getPageTitle(i)));
}
}
}
your TabLayout in your activity will look like this
<TabLayoutPlus
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="36dp"
android:layout_above="#+id/camera.buttons.layout"
android:layout_centerHorizontal="true"
android:background="#color/cardscan.background"
android:rotationX="180"
app:tabGravity="center"
app:tabIndicatorColor="#color/colorPrimary"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/white"
/>
if you need to highlight Selected tab text colour
private void setSelectedTab(TabLayoutPlus.Tab tab) {
View view = tab.getCustomView();
TextViewPlus tabtext = (TextViewPlus) view.findViewById(R.id.tab_text);
tabtext.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary)); // color you want to highlight your text with
}
private void setUnselectedTab(TabLayoutPlus.Tab tab){
View view = tab.getCustomView();
TextViewPlus tabtext = (TextViewPlus) view.findViewById(R.id.tab_text);
tabtext.setTextColor(ContextCompat.getColor(this, R.color.white)); // color you want to lowlight your text with
}
Now just add OnTabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
setSelectedTab(tab);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
setUnselectedTab(tab);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
setSelectedTab(tab);
}
});
I solved using this method
set scaleY="-1" , this will rotate TabLayout to 180 degrees, as a result tab layout rotated reverse with text and rotate your TextView to Horizontally to 180 degrees, that will solve the problem, see the code below
activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager_exp"
android:layout_above="#+id/tabs_RL"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<RelativeLayout
android:id="#+id/tabs_RL"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="#dimen/footer_height">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_60"
android:background="#color/white"
android:clipToPadding="false"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:scaleY="-1"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#color/dark_pink1"
app:tabMinWidth="50dp"
app:tabPaddingEnd="0dp"
app:tabPaddingStart="0dp"
app:tabMode="fixed" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
custom_tab.xml
<customviews.CusMediumTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#000000"
android:textSize="#dimen/dimen_12"
android:rotationX="180"
android:textStyle="bold" />
MainActivity.class
tabLayout.setupWithViewPager(viewPager);
tabOne = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabOne.setText("Tab1");
tabOne.setTextColor(getResources().getColor(R.color.light_black));
tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.home_icon, 0, 0);
tabTwo = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabTwo.setText("Tab2");
tabTwo.setTextColor(getResources().getColor(R.color.light_black));
tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.settin_icon, 0, 0);
tabThree = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabThree.setText("Tab3");
tabThree.setTextColor(getResources().getColor(R.color.light_black));
tabThree.setCompoundDrawablesWithIntrinsicBounds( 0,R.drawable.delete_icon, 0, 0);
tabFour = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabFour.setText("Tab4");
tabFour.setTextColor(getResources().getColor(R.color.light_black));
tabFour.setCompoundDrawablesWithIntrinsicBounds( 0, R.drawable.msg_icon,0, 0);
tabLayout.getTabAt(0).setCustomView(tabOne);
tabLayout.getTabAt(1).setCustomView(tabTwo);
tabLayout.getTabAt(2).setCustomView(tabThree);
tabLayout.getTabAt(3).setCustomView(tabFour);
I want to put only text in tab bar, no image... I want to center text in a tab bar, horizontally and vertically. Exactly in the center.
If someone still interested in simple solution without creating own layout and styles:
Use android.widget.TabHost.TabSpec#setIndicator(CharSequence label) for each added tab
Use next code to center and wrap text inside the tab:
int tabCount = tabHost.getTabWidget().getTabCount();
for (int i = 0; i < tabCount; i++) {
final View view = tabHost.getTabWidget().getChildTabViewAt(i);
if ( view != null ) {
// reduce height of the tab
view.getLayoutParams().height *= 0.66;
// get title text view
final View textView = view.findViewById(android.R.id.title);
if ( textView instanceof TextView ) {
// just in case check the type
// center text
((TextView) textView).setGravity(Gravity.CENTER);
// wrap text
((TextView) textView).setSingleLine(false);
// explicitly set layout parameters
textView.getLayoutParams().height = ViewGroup.LayoutParams.FILL_PARENT;
textView.getLayoutParams().width = ViewGroup.LayoutParams.WRAP_CONTENT;
}
}
}
You can add this to xml layout android:gravity="center" or android:layout_gravity="center"
<android.support.design.widget.TabLayout
app:tabMode="fixed"
app:tabContentStart="0dp"
Try this it will be help to you !!!
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="1dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="1dp" >
</FrameLayout>
You can add the following line to the Tab layout to align the text to the center.
app:tabGravity="fill"