Google Play Style Tabs using TabLayout
Tabs are now best implemented by leveraging the ViewPager with a custom «tab indicator» on top. In this guide, we will be using Google’s new TabLayout included in the support design library release for Android «M».
Prior to Android «M», the easiest way to setup tabs with Fragments was to use ActionBar Tabs as described in ActionBar Tabs with Fragments guide. However, all methods related to navigation modes in the ActionBar class (such as setNavigationMode() , addTab() , selectTab() , etc.) are now deprecated.
To implement Google Play style sliding tabs, make sure to add the Material Design Components Library. In your root build.gradle , make sure the google() entry is listed:
Add this dependency to your app/build.gradle list:
Simply add com.google.android.material.tabs.TabLayout , which will be used for rendering the different tab options. The androidx.viewpager.widget.ViewPager component will be used to page between the various fragments we will create.
Now that we have the ViewPager and our tabs in our layout, we should start defining the content of each of the tabs. Since each tab is just a fragment being displayed, we need to create and define the Fragment to be shown. You may have one or more fragments in your application depending on your requirements.
In res/layout/fragment_page.xml define the XML layout for the fragment which will be displayed on screen when a particular tab is selected:
In PageFragment.java define the inflation logic for the fragment of tab content:
The next thing to do is to implement the adapter for your ViewPager which controls the order of the tabs, the titles and their associated content. The most important methods to implement here are getPageTitle(int position) which is used to get the title for each tab and getItem(int position) which determines the fragment for each tab.
Finally, we need to attach our ViewPager to the SampleFragmentPagerAdapter and then configure the sliding tabs with a two step process:
- In the onCreate() method of your activity, find the ViewPager and connect the adapter.
- Set the ViewPager on the TabLayout to connect the pager with the tabs.
Heres the output:
There are many attributes you can use to customize the behavior of your TabLayout as shown below:
The most important properties available are listed below:
| Name | Options | Description |
|---|---|---|
| tabBackground | @drawable/image | Background applied to the tabs |
| tabGravity | center , fill | Gravity of the tabs |
| tabIndicatorColor | @color/blue | Color of the tab indicator line |
| tabIndicatorHeight | @dimen/tabh | Height of the tab indicator line |
| tabMaxWidth | @dimen/tabmaxw | Maximum width of the tab |
| tabMode | fixed , scrollable | Small number of fixed tabs or scrolling list |
| tabTextColor | @color/blue | Color of the text on the tab |
Normally, the tab indicator color chosen is the accent color defined for your Material Design theme. We can override this color by defining a custom style in styles.xml and then applying the style to your TabLayout :
You can then override this style for your TabLayout:
There are several other styles that can be configured for the TabLayout :
Currently, the TabLayout class does not provide a clean abstraction model that allows for icons in your tab. However, you can manually add the icons after you have setup your TabLayout.
Inside your FragmentPagerAdapter, you can delete the getPageTitle() line or simply return null:
After you setup your TabLayout, you can use the getTabAt() function to set the icon:
Sliding tabs with images:
We can also apply color tinting to the tabs by following this guide.
Another approach is to use SpannableString to add icons and text to TabLayout :
By default, the tab created by TabLayout sets the textAllCaps property to be true, which prevents ImageSpans from being rendered. You can override this behavior by changing the tabTextAppearance property.
Note the additional spaces that are added before the tab title while instantiating SpannableString class. The blank spaces are used to place the image icon so that the actual title is displayed completely. Depending on where you want to position your icon, you can specify the range start…end of the span in setSpan() method.
In certain cases, instead of the default tab view we may want to apply a custom XML layout for each tab. To achieve this, iterate over all the TabLayout.Tab s after attaching the sliding tabs to the pager:
Next, we add the getTabView(position) method to the SampleFragmentPagerAdapter class:
With this you can setup any custom tab content for each page in the adapter.
With the recent updates to the design support library, you can also get the selected tab position by calling getSelectedTabPosition() . If you need to save or restore the selected tab position during screen rotation or other configuration changes, this method is helpful for restoring the original tab position.
First, move your tabLayout and viewPager as member variables of your main activity:
Next, we can save and restore the last known tab position by implementing methods on onSaveInstanceState() and onRestoreInstanceState() to persist this data. When the view is recreated, we can use this data and set the current tab to the last selected tab value.
Источник
TabLayout Tutorial With Example In Android Studio
In Android TabLayout is a new element introduced in Design Support library. It provides horizontal layout to display tabs on the screen. We can display more screens in a single screen using tabs. We can quickly swipe between the tabs. TabLayout is basically view class required to be added into our layout(xml) for creating Sliding Tabs. We use different methods of TabLayout to create, add and manage the tabs.
Special Note: TabLayout is used to display tabs on the screen. We can create sliding as well as non sliding tabs by using TabLayout. If we need simple tabs without sliding then we replace the layout with the fragment on tab selected listener event and if we need sliding tabs then we use Viewpager.
Table Of Contents
Basic TabLayout XML Code:
Important Methods Of TabLayout:
Let’s we discuss some important methods of TabLayout that may be called in order to manage the TabLayout.
1. newTab(): This method is used to create and return a new TabLayout.Tab.
Below we create a new tab and set the text and icon for the tab.
2. addTab(Tab tab): This method is used to add a tab in the TabLayout. By using this method we add the tab which we created using newTab() method in the TabLayout. The tab will be added at the end of the list and If it is the first tab to be added then it will become the selected tab.
Below we firstly create a new tab and then add it in the TabLayout.
3. addTab(Tab tab, boolean setSelected): This method is used to add a tab in the TabLayout and set the state for the tab. By using this method we add the tab which we created using newTab() method in the TabLayout. In this method we also set the state of the tab whether it is selected or not.
Below we firstly create a new tab and then add it in the TabLayout and set the true value for setSelected parameter that makes it selectable.
4. addTab(Tab tab, int position): This method is used to add a tab in the TabLayout and set the state for the tab. By using this method we add the tab which we created using newTab() method in the TabLayout. The tab will be inserted at the given position. If it is the first tab to be added then it will become the selected tab.
Below we firstly create a new tab and then add it in the TabLayout at a specific position.
5. addTab(Tab tab, int position, boolean setSelected): This method is used to add a tab at a specific position and set the state of the tab. By using this method we add the tab which we created using newTab() method in the TabLayout. The tab will be inserted at the defined position and a Boolean value used to set the state of the tab. True value is used to make the tab selectable.
Below we firstly create a tab and then add it in the TabLayout at a specific position and we also set true value to make the tab selectable.
6. getSelectedTabPosition(): This method is used to get the position of the current selected tab. This method returns an int type value for the position of the selected tab. It returns -1 if there isn’t a selected tab.
Below we get the current selected tab position.
7. getTabAt(int index): This method is used to get the tab at the specified index. This method returns TabLayout.Tab.
Below we get the tab at 1th index.
8. getTabCount(): This method is used to get the number of tabs currently registered with the action bar. This method returns an int type value for the number of total tabs.
Below we get the total number of tabs currently registered with the action bar.
9. setTabGravity(int gravity): This method is used to set the gravity to use when laying out the tabs.
Below we set the gravity for the tabs.
10. getTabGravity(): This method is used to get the current gravity used for laying out tabs. This method returns the gravity which we set using setTabGravity(int gravity) method.
Below we firstly set the gravity and then get the current gravity used for laying out tabs.
11. setTabMode(int mode): This method is used to set the behavior mode for the Tabs in this layout. The valid input options are:
MODE_FIXED: Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
MODE_SCROLLABLE: Scrollable tabs display a subset of tabs at any given moment and it can contain longer tab labels and a larger number of tabs. They are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels. This mode is commonly used with a ViewPager.
Below we set the behaviour mode for the tabs.
12. getTabMode(): This method is used to get the current mode of TabLayout. This method returns an int type value which we set using setTabMode(int mode) method.
Below we firstly set the tab mode and then get the current mode of the TabLayout.
13. setTabTextColors(int normalColor, int selectedColor): This method is used to set the text colors for the different states (normal, selected) of the tabs.
Below we set the tab text colors for the both states of the tab.
14. getTabTextColors(): This method is used to get the text colors for the different states (normal, selected) of the tabs. This method returns the text color which we set using setTabTextColors(int normalColor, int selectedColor) method.
Below we firstly set the text colors and then get the text colors for the both states of the tab.
15. removeAllTabs(): This method is used to remove all tabs from the action bar and deselect the current tab.
Below we remove all the tabs from the action bar and deselect the current tab.
16. setOnTabSelectedListener(OnTabSelectedListener listener): This method is used to add a listener that will be invoked when tab selection changes.
Below we show how to use addOnTabSelectedListener of TabLayout.
17. removeTab(Tab tab): This method is used to remove a tab from the layout. In this method we pass the TabLayout.Tab object to remove the tab from the layout. If the removed tab was selected then it will be automatically deselected and another tab will be selected if present in the TabLayout.
Below we firstly create and add a tab and then remove it from the TabLayout.
18. removeTabAt(int position): This method is used to remove a tab from the layout. In this method we pass the position of the tab that we want to remove from the layout. If the removed tab was selected then it will be automatically deselected and another tab will be selected if present in the TabLayout.
Below we remove the tab from a specified position of TabLayout.
19. setSelectedTabIndicatorColor(int color): This method is used to set the tab indicator’s color for the currently selected tab.
Below we set the red color for the selected tab indicator.
20. setSelectedTabIndicatorHeight(int height): This method is used to set the tab indicator’s height for the currently selected tab.
Below we set the height for the selected tab’s indicator.
21. setupWithViewPager(ViewPager viewPager): This method is used for setting up the TabLayout with ViewPager. ViewPager is mainly used for creating Sliding tabs.
Below we set the TabLayout with the ViewPager.
Attributes of TabLayout:
Now let’s we discuss some common attributes of a TabLayout that helps us to configure it in our layout (xml).
1. id: id attribute is used to uniquely identify a TabLayout.
2. support.design:tabBackground: This attribute is used to set the background of the tabs. We can set a color or drawable in the background of tabs.
Below we set the Black color for the background of the tabs.
3. support.design:tabGravity: This attribute is used to set the gravity to use when laying out the tabs. We can also set gravity programmatically means in java class using setTabGravity(int gravity) method.
Below we set the gravity for the tabs.
4. support.design:tabIndicatorColor: This attribute is used to set the Color of the indicator used to show the currently selected tab. We can also set color programmatically means in java class using setSelectedTabIndicatorColor(int color) method.
Below we set the red color for the selected tab indicator
5. support.design:tabIndicatorHeight: This attribute is used to set the height of the indicator used to show the currently selected tab. We can also set height programmatically means in java class using setSelectedTabIndicatorHeight(int height) method.
Below we set the height for the selected tab’s indicator.
6. support.design:tabMaxWidth: This attribute is used to set the maximum width for the tabs.
Below we set the maximum width value for the tabs.
7. support.design:tabMinWidth: This attribute is used to set the minimum width for the tabs.
Below we set the minimum width value for the tabs.
8. support.design:tabMode: This attribute is used to set the behavior mode for the Tabs in this layout. We can also set the mode programmatically means in java class using setTabMode(int mode) method.
Below we set the behaviour mode for the tabs.
9. support.design:tabPadding: This attribute is used to set the padding along all edges of tabs.
android.support.design:tabPaddingBottom: Set padding along the bottom edge of the tabs.
android.support.design:tabPaddingEnd: Set padding along the end edge of the tabs.
android.support.design:tabPaddingStart: Set padding along the start edge of the tabs.
android.support.design:tabPaddingTop: Set padding along the top edge of the tabs.
Below we set the padding along all edges of the tabs.
10. support.design:tabSelectedTextColor: This attribute is used to set the text color to be applied to the currently selected tab. We can also set this programmatically using setTabTextColors(int normalColor, int selectedColor) method.
Below we set the text color for the selected tab.
11. support.design:tabTextColor: This method is used to set the default text color to be applied to tabs. . We can also set this programmatically using setTabTextColors(int normalColor, int selectedColor) method.
Below we set the default text color for the tabs.
TabLayout Example In Android Studio:
Example 1 of TabLayout:
Below is the first example of TabLayout in which we display three non-sliding tabs. In this example we define a TabLayout and a FrameLayout in our xml file. In this example we create and add 3 tabs in the TabLayout with the help of different methods of TabLayout. After that we implement setOnTabSelectedListener event and replace the FrameLayout with the fragment’s according to selected tab.
Step 1: Create a new project and name it TabLayoutExample
Step 2: Open build.gradle and add Design support library dependency.
Step 3: Open res -> layout ->activity_main.xml (or) main.xml and add following code:
In this step we add the code for displaying TabLayout and ViewPager in our xml file.
Step4: Open src -> package -> MainActivity.java
In this step we open MainActivity and add the code for initiate the FrameLayout and TabLayout. After that we create and add 3 tabs in the TabLayout. Finally we implement setOnTabSelectedListener event and replace the FrameLayout with the fragment’s according to selected tab.
Step 5: Now we need 3 fragments and 3 xml layouts for three tabs. So create three fragments by right click on your package folder and create classes and name them as FirstFragment, SecondFragment and ThirdFragment and add the following code respectively.
FirstFragment.class
SecondFragment.class
ThirdFragment.class
Step 6: Now create 3 xml layouts by right clicking on res/layout -> New -> Layout Resource File and name them as fragment_first, fragment_second and fragment_third and add the following code in respective files.
Here we will design the basic simple UI for all the three tabs.
fragment_first.xml
fragment_second.xml
fragment_third.xml
Example 2 of TabLayout Using ViewPager:
Below is the example of TabLayout in which we display sliding tabs with the help of ViewPager. In this example we define a TabLayout and a ViewPager in our xml file. In this example we create and add 3 tabs in the TabLayout with the help of different methods of TabLayout. After that we create a PagerAdapter to set up the TabLayout with ViewPager.
Step 1: Create a new project and name it TabLayoutExample
Step 2: Open build.gradle and add Design support library dependency.
Step 3: Open res -> layout ->activity_main.xml (or) main.xml and add following code:
Step 4: Open src -> package -> MainActivity.java
In this step we open MainActivity and add the code for initiate the ViewPager and TabLayout. After that we create and add 3 tabs in the TabLayout. Finally we set an Adapter named PagerAdapter to set up the TabLayout with ViewPager.
Step 5: Create a new Class named PagerAdapter and extend FragmentStatePagerAdapter in the class. In this step we create a PagerAdapter class and extends FragmentStatePagerAdapter In the class for setting the TabLayout with the ViewPager.
Step 6: Now we need 3 fragments and 3 xml layouts for three tabs. So create three fragments by right click on your package folder and create classes and name them as FirstFragment, SecondFragment and ThirdFragment and add the following code respectively.
FirstFragment.class
SecondFragment.class
ThirdFragment.class
Step 7: Now create 3 xml layouts by right clicking on res/layout -> New -> Layout Resource File and name them as fragment_first, fragment_second and fragment_third and add the following code in respective files.
Here we will design the basic simple UI for all the three tabs.
Источник
