Android Tablayout Android Design

Android TabLayout Android Design

I've just managed to setup new TabLayout, so here are the quick steps to do this (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

1. Add dependencies inside your build.gradle file:

   dependencies {
       compile 'com.android.support:design:23.1.1'
   }
   

2. Add TabLayout inside your layout

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">
   
       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="?attr/colorPrimary"/>
   
       <android.support.design.widget.TabLayout
           android:id="@+id/tab_layout"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"/>
   
       <android.support.v4.view.ViewPager
           android:id="@+id/pager"
           android:layout_width="match_parent"
           android:layout_height="match_parent"/>
   
   </LinearLayout>
   

3. Setup your Activity like this:

   import android.os.Bundle;
   import android.support.design.widget.TabLayout;
   import android.support.v4.app.Fragment;
   import android.support.v4.app.FragmentManager;
   import android.support.v4.app.FragmentPagerAdapter;
   import android.support.v4.view.ViewPager;
   import android.support.v7.app.AppCompatActivity;
   import android.support.v7.widget.Toolbar;
   
   public class TabLayoutActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_pull_to_refresh);
   
           Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
           TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
           ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
   
           if (toolbar != null) {
               setSupportActionBar(toolbar);
           }
   
           viewPager.setAdapter(new SectionPagerAdapter(getSupportFragmentManager()));
           tabLayout.setupWithViewPager(viewPager);
       }
   
       public class SectionPagerAdapter extends FragmentPagerAdapter {
   
           public SectionPagerAdapter(FragmentManager fm) {
               super(fm);
           }
   
           @Override
           public Fragment getItem(int position) {
               switch (position) {
                   case 0:
                       return new FirstTabFragment();
                   case 1:
                   default:
                       return new SecondTabFragment();
               }
           }
   
           @Override
           public int getCount() {
               return 2;
           }
   
           @Override
           public CharSequence getPageTitle(int position) {
               switch (position) {
                   case 0:
                       return "First Tab";
                   case 1:
                   default:
                       return "Second Tab";
               }
           }
       }
   
   }
   

How to change font size in Material Design TabLayout android?

Well, I was able to find a solution to my issue.

Adding the below line of code in dimens.xml somehow made it work for me.

<dimen name="design_tab_text_size_2line" tools:override="true">20sp</dimen>

Android Design Support Library: TabLayout tabs text in single line

Just add app:tabMode="scrollable" to TabLayout;

<android.support.design.widget.TabLayout 
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs" 
android:layout_width="match_parent" 
app:tabMode="scrollable"
android:layout_height="wrap_content" /> 

TabLayout (Android Design Library) Text Color

Via XML attributes:

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="@color/your_unselected_text_color"
        app:tabSelectedTextColor="@color/your_selected_text_color"/>

Additionally, there are attributes like tabIndicatorColor or tabIndicatorHeight for further styling.

In code:

tabLayout.setTabTextColors(
    getResources().getColor(R.color.your_unselected_text_color),
    getResources().getColor(R.color.your_selected_text_color)
);

Since this old way is deprecated as of API 23, the alternative is:

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);

Android Support Design TabLayout: Gravity Center and Mode Scrollable

As I didn't find why does this behaviour happen I have used the following code:

float myTabLayoutSize = 360;
if (DeviceInfo.getWidthDP(this) >= myTabLayoutSize ){
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
} else {
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}

Basically, I have to calculate manually the width of my tabLayout and then I set the Tab Mode depending on if the tabLayout fits in the device or not.

The reason why I get the size of the layout manually is because not all the tabs have the same width in Scrollable mode, and this could provoke that some names use 2 lines as it happened to me in the example.

---

Related Topics