TabLayout is one of the Material Design components available in Android Support Library. Before implementing Tabs in Android, you shall go through the guidelines of Tabs implementation.
In this tutorial we will see:
- How to implement simple tabs using TabLayout and ViewPager.
- How to make Tabs scrollable when there are many tabs.
- How to include icons along with text in Tab title.
- How to make only icons as Tab titles.
Table of Contents
Displaying Simple Tabs
1. Create a project in Android Studio with the name Tab Layout. Choose Tabbed Activity from Add an Activity to Mobile option:
In Configure Activity, choose Action Bar Tabs (with ViewPager) from Navigation Style:
2. Add the string resources that will be used in this project to string.xml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<resources> <string name="app_name">TabLayout</string> <string name="tab_text_1">Tab 1</string> <string name="tab_text_2">Tab 2</string> <string name="tab_text_3">Tab 3</string> <string name="action_settings">Settings</string> <string name="tab_format">Tab: %1$d</string> <string name="button_simple">Simple Tabs</string> <string name="button_scrollable">Scrollable Tabs</string> <string name="button_icon_text">With Icon and Text</string> <string name="button_icon">Only With Icons</string> <string name="contacts">Contacts</string> <string name="dialer">Dialer</string> <string name="messages">Messages</string> </resources> |
3. Delete fragment_main.xml file and add 3 fragment layout files namely fragment_dialer.xml, fragment_contacts.xml, fragment_messages.xml. These layout files form each of the fragment in the 3 Tabs we are going to implement. You can edit these files to display appropriate content.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:background="#eff" android:orientation="vertical" tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment"> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="@string/dialer" android:textSize="30sp" /> </LinearLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment"> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="@string/contacts" android:textSize="30sp" /> </LinearLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:background="#ffe" android:orientation="vertical" tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment"> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="@string/messages" android:textSize="30sp" /> </LinearLayout> |
4. Create a POJO named TabDetails. This will be used to hold tab title and corresponding fragment:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
package com.androiddeft.tablayout; /** * Created by Abhi on 11 Dec 2017 011. */ public class TabDetails { private String tabName; private MainActivity.PlaceholderFragment fragment; public TabDetails(String tabName, MainActivity.PlaceholderFragment fragment) { this.tabName = tabName; this.fragment = fragment; } public String getTabName() { return tabName; } public void setTabName(String tabName) { this.tabName = tabName; } public MainActivity.PlaceholderFragment getFragment() { return fragment; } public void setFragment(MainActivity.PlaceholderFragment fragment) { this.fragment = fragment; } } |
5. Edit MainActivity.java with the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
package com.androiddeft.tablayout; 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; import android.view.LayoutInflater; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { /** * The {@link android.support.v4.view.PagerAdapter} that will provide * fragments for each of the sections. We use a * {@link FragmentPagerAdapter} derivative, which will keep every * loaded fragment in memory. If this becomes too memory intensive, it * may be best to switch to a * {@link android.support.v4.app.FragmentStatePagerAdapter}. */ private SectionsPagerAdapter mSectionsPagerAdapter; /** * The {@link ViewPager} that will host the section contents. */ private ViewPager mViewPager; private TabLayout mTabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mTabLayout = (TabLayout) findViewById(R.id.tabs); // Create the adapter that will return a fragment for each of the three // primary sections of the activity. mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.container); populateViewPager(); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: onBackPressed(); return true; default: return super.onOptionsItemSelected(item); } } /** * Creates the fragments and sets it to ViewPager */ private void populateViewPager() { TabDetails tab; tab = new TabDetails("Dialer", PlaceholderFragment.newInstance(R.layout.fragment_dialer)); mSectionsPagerAdapter.addFragment(tab); tab = new TabDetails("Contacts", PlaceholderFragment.newInstance(R.layout.fragment_contacts)); mSectionsPagerAdapter.addFragment(tab); tab = new TabDetails("Messages", PlaceholderFragment.newInstance(R.layout.fragment_messages)); mSectionsPagerAdapter.addFragment(tab); mViewPager.setAdapter(mSectionsPagerAdapter); mTabLayout.setupWithViewPager(mViewPager); } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { /** * The fragment argument representing the section number for this * fragment. */ private static final String ARG_LAYOUT = "layout"; public PlaceholderFragment() { } /** * Returns a new instance of this fragment for the given layout. */ public static PlaceholderFragment newInstance(int layout) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putInt(ARG_LAYOUT, layout); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false); return rootView; } } /** * A {@link FragmentPagerAdapter} that returns a fragment corresponding to * one of the sections/tabs/pages. */ public class SectionsPagerAdapter extends FragmentPagerAdapter { private final List<TabDetails> tabs = new ArrayList<>(); public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return tabs.get(position).getFragment(); } @Override public int getCount() { return tabs.size(); } private void addFragment(TabDetails tab) { tabs.add(tab); } @Override public CharSequence getPageTitle(int position) { return tabs.get(position).getTabName(); } } } |
6. Update activity_main.xml as shown below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.androiddeft.tablayout.MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/appbar_padding_top" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay" app:title="@string/app_name"> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabMode="fixed"> </android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> |
Now run the application, you should be able to see the app as shown below:
Implementing Scrollable Tabs
In order to demonstrate scrollable tabs, we will dynamically add 10 tabs. To do so, follow the below steps:
1. Add a layout file which can be reused for all the 10 tabs:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" tools:context="com.androiddeft.tablayout.MainActivity$PlaceholderFragment"> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textSize="30sp" /> </LinearLayout> |
2. Do the below changes in MainActivty:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
package com.androiddeft.tablayout; 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; import android.view.LayoutInflater; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { /** * The {@link android.support.v4.view.PagerAdapter} that will provide * fragments for each of the sections. We use a * {@link FragmentPagerAdapter} derivative, which will keep every * loaded fragment in memory. If this becomes too memory intensive, it * may be best to switch to a * {@link android.support.v4.app.FragmentStatePagerAdapter}. */ private SectionsPagerAdapter mSectionsPagerAdapter; /** * The {@link ViewPager} that will host the section contents. */ private ViewPager mViewPager; private TabLayout mTabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mTabLayout = (TabLayout) findViewById(R.id.tabs); // Create the adapter that will return a fragment for each of the three // primary sections of the activity. mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.container); populateViewPager(); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: onBackPressed(); return true; default: return super.onOptionsItemSelected(item); } } private void populateViewPager() { TabDetails tab; for (int i = 1; i <= 10; i++) { tab = new TabDetails("Tab " + i, PlaceholderFragment.newInstance(R.layout.fragment_counter, i)); mSectionsPagerAdapter.addFragment(tab); } mViewPager.setAdapter(mSectionsPagerAdapter); //Make tabs scrollable mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); mTabLayout.setupWithViewPager(mViewPager); } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { /** * The fragment argument representing the section number for this * fragment. */ private static final String ARG_LAYOUT = "layout"; private static final String ARG_COUNTER = "counter"; public PlaceholderFragment() { } /** * Returns a new instance of this fragment for the given section * number. */ public static PlaceholderFragment newInstance(int layout, Integer counter) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putInt(ARG_LAYOUT, layout); args.putInt(ARG_COUNTER, counter); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false); Integer counter = getArguments().getInt(ARG_COUNTER); if (counter != 0) { TextView textView = (TextView) rootView.findViewById(R.id.textView); textView.setText(getString(R.string.tab_format, counter)); } return rootView; } } /** * A {@link FragmentPagerAdapter} that returns a fragment corresponding to * one of the sections/tabs/pages. */ public class SectionsPagerAdapter extends FragmentPagerAdapter { private final List<TabDetails> tabs = new ArrayList<>(); public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return tabs.get(position).getFragment(); } @Override public int getCount() { return tabs.size(); } private void addFragment(TabDetails tab) { tabs.add(tab); } @Override public CharSequence getPageTitle(int position) { return tabs.get(position).getTabName(); } } } |
3. Now run the application and you should see the app as shown below:
Tabs with Icons and Text
1. Download mipmap.zip and extract the downloaded files to res folder in your project. This contains necessary icons for displaying in the tabs.
2. Do the highlighted changes in MainActivty
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
package com.androiddeft.tablayout; 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; import android.view.LayoutInflater; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { /** * The {@link android.support.v4.view.PagerAdapter} that will provide * fragments for each of the sections. We use a * {@link FragmentPagerAdapter} derivative, which will keep every * loaded fragment in memory. If this becomes too memory intensive, it * may be best to switch to a * {@link android.support.v4.app.FragmentStatePagerAdapter}. */ private SectionsPagerAdapter mSectionsPagerAdapter; /** * The {@link ViewPager} that will host the section contents. */ private ViewPager mViewPager; private TabLayout mTabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mTabLayout = (TabLayout) findViewById(R.id.tabs); // Create the adapter that will return a fragment for each of the three // primary sections of the activity. mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.container); populateViewPager(); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: onBackPressed(); return true; default: return super.onOptionsItemSelected(item); } } /** * Creates the fragments and sets it to ViewPager */ private void populateViewPager() { TabDetails tab; tab = new TabDetails("Dialer", PlaceholderFragment.newInstance(R.layout.fragment_dialer, 0)); mSectionsPagerAdapter.addFragment(tab); tab = new TabDetails("Contacts", PlaceholderFragment.newInstance(R.layout.fragment_contacts, 0)); mSectionsPagerAdapter.addFragment(tab); tab = new TabDetails("Messages", PlaceholderFragment.newInstance(R.layout.fragment_messages, 0)); mSectionsPagerAdapter.addFragment(tab); mViewPager.setAdapter(mSectionsPagerAdapter); mTabLayout.setupWithViewPager(mViewPager); mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_phone_white); mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_contacts_white); mTabLayout.getTabAt(2).setIcon(R.mipmap.ic_message_white); } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { /** * The fragment argument representing the section number for this * fragment. */ private static final String ARG_LAYOUT = "layout"; public PlaceholderFragment() { } /** * Returns a new instance of this fragment for the given layout. */ public static PlaceholderFragment newInstance(int layout) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putInt(ARG_LAYOUT, layout); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false); return rootView; } } /** * A {@link FragmentPagerAdapter} that returns a fragment corresponding to * one of the sections/tabs/pages. */ public class SectionsPagerAdapter extends FragmentPagerAdapter { private final List<TabDetails> tabs = new ArrayList<>(); public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return tabs.get(position).getFragment(); } @Override public int getCount() { return tabs.size(); } private void addFragment(TabDetails tab) { tabs.add(tab); } @Override public CharSequence getPageTitle(int position) { return tabs.get(position).getTabName(); } } } |
3. Now run the application:
Tabs with Only Icons
To have only icons as the tab title, you need to pass tabName as null while instantiating TabDetails in populateViewPager() method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
package com.androiddeft.tablayout; 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; import android.view.LayoutInflater; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { /** * The {@link android.support.v4.view.PagerAdapter} that will provide * fragments for each of the sections. We use a * {@link FragmentPagerAdapter} derivative, which will keep every * loaded fragment in memory. If this becomes too memory intensive, it * may be best to switch to a * {@link android.support.v4.app.FragmentStatePagerAdapter}. */ private SectionsPagerAdapter mSectionsPagerAdapter; /** * The {@link ViewPager} that will host the section contents. */ private ViewPager mViewPager; private TabLayout mTabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mTabLayout = (TabLayout) findViewById(R.id.tabs); // Create the adapter that will return a fragment for each of the three // primary sections of the activity. mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.container); populateViewPager(); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: onBackPressed(); return true; default: return super.onOptionsItemSelected(item); } } /** * Creates the fragments and sets it to ViewPager */ private void populateViewPager() { TabDetails tab; tab = new TabDetails(null, PlaceholderFragment.newInstance(R.layout.fragment_dialer, 0)); mSectionsPagerAdapter.addFragment(tab); tab = new TabDetails(null, PlaceholderFragment.newInstance(R.layout.fragment_contacts, 0)); mSectionsPagerAdapter.addFragment(tab); tab = new TabDetails(null, PlaceholderFragment.newInstance(R.layout.fragment_messages, 0)); mSectionsPagerAdapter.addFragment(tab); mViewPager.setAdapter(mSectionsPagerAdapter); mTabLayout.setupWithViewPager(mViewPager); mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_phone_white); mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_contacts_white); mTabLayout.getTabAt(2).setIcon(R.mipmap.ic_message_white); } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { /** * The fragment argument representing the section number for this * fragment. */ private static final String ARG_LAYOUT = "layout"; public PlaceholderFragment() { } /** * Returns a new instance of this fragment for the given layout. */ public static PlaceholderFragment newInstance(int layout) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putInt(ARG_LAYOUT, layout); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(getArguments().getInt(ARG_LAYOUT), container, false); return rootView; } } /** * A {@link FragmentPagerAdapter} that returns a fragment corresponding to * one of the sections/tabs/pages. */ public class SectionsPagerAdapter extends FragmentPagerAdapter { private final List<TabDetails> tabs = new ArrayList<>(); public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return tabs.get(position).getFragment(); } @Override public int getCount() { return tabs.size(); } private void addFragment(TabDetails tab) { tabs.add(tab); } @Override public CharSequence getPageTitle(int position) { return tabs.get(position).getTabName(); } } } |
Tabs with Customized Colors
You can customize the tabs 2 ways:
- statically through layout XML.
- dynamically in MainActivity.
Before customizing add necessary colors to colors.xml file:
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="darkGrey">#333</color> <color name="yellow">#ffff00</color> </resources> |
Customizing Tabs through layout XML
You add the attributes to TabLayout widget as highlighted below to change the Tab colors:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.androiddeft.tablayout.MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/appbar_padding_top" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay" app:title="@string/app_name"> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabTextColor="@android:color/holo_blue_bright" app:tabBackground="@color/darkGrey" app:tabSelectedTextColor="@color/yellow" app:tabIndicatorColor="@android:color/white" app:tabMode="fixed"> </android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> |
Customizing Tab colors dynamically
Add the following lines to populateViewPager() method to change Tab colors:
1 2 3 4 5 6 |
//Set Tab text color and selected tab color mTabLayout.setTabTextColors(getResources().getColor(android.R.color.holo_blue_light),getResources().getColor(R.color.yellow)); //Set selected Tab Underline color mTabLayout.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.white)); //Set Tab background color mTabLayout.setBackgroundColor(getResources().getColor(R.color.darkGrey)); |
Now run the application:
Source code and APK file
You can download the Source code and APK files from the below links. I have combined all the features into one app.
Download Source CodeDownload APK
If you have any doubts, then we can discuss them in the comments section. If you have liked this tutorial, please do follow us on Twitter and Facebook.
Abhishek
Latest posts by Abhishek (see all)
- Accessing Camera and Taking Pictures in Android - April 27, 2019
- Android: Download File from URL with Progress Bar - March 18, 2018
- Android: Uploading File to Server with Progress Bar - February 18, 2018