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);
}
});
