Hi all, Today we are going to learn more about TabLayout about which i have wrote article long back. So today we will lean how to do many things with TabLayout like showing Icons over Tab, Icons with Text over Tab and Customised Tabs.
In this tutorial, we are going to learn how to implement Material Design Tabs by using TabLayout with advanced feature.
1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.
2. Now create an activity_main.xml file under layout directory and add the following code this design will be going to be used for setting material design tabs.
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 |
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/coordinatorLayout" android:layout_width="fill_parent" android:layout_height="fill_parent"> <!-- AppBar Layout --> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="fill_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="fill_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <!-- Tab Layout for creating tabs --> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" app:tabIndicatorColor="@android:color/white" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout> <!-- Helps handing the Fragments for each Tab --> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="fill_parent" android:layout_height="fill_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> |
3. Create one more xml layout naming demo_activity.xml which contains some Buttons to do the respective tasks.
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"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" android:padding="15dp"> <Button android:id="@+id/default_tab_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:onClick="showDefaultTab" android:text="@string/default_tab" android:textColor="@android:color/white" android:textSize="14sp" /> <Button android:id="@+id/tab_with_icon_andr_text_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="7dp" android:onClick="showTabWithIconAndText" android:background="@color/colorPrimary" android:text="@string/tab_with_icon_text" android:textColor="@android:color/white" android:textSize="14sp" /> <Button android:id="@+id/tab_with_icons_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="7dp" android:onClick="showTabWithIconsOnly" android:background="@color/colorPrimary" android:text="@string/tab_with_icons" android:textColor="@android:color/white" android:textSize="14sp" /> <Button android:id="@+id/custom_tab_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="showCustomTab" android:layout_marginTop="7dp" android:background="@color/colorPrimary" android:text="@string/custom_tab" android:textColor="@android:color/white" android:textSize="14sp" /> </LinearLayout> |
4. For demo_activity.xml we need to create Java file as well. So lets create one java class naming StartingActivity.java and place the below code to it.
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 |
package tabbardemo.com.materialdesigntabs_demo; import android.content.Intent; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v7.app.AppCompatActivity; import android.view.View; /** * Created by sonu on 12/06/17. */ public class StartingActivity extends AppCompatActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.demo_activity); } public void showDefaultTab(View view) { startTabActivity(TabType.DEFAULT); } public void showTabWithIconAndText(View view) { startTabActivity(TabType.ICON_TEXT); } public void showTabWithIconsOnly(View view) { startTabActivity(TabType.ICONS_ONLY); } public void showCustomTab(View view) { startTabActivity(TabType.CUSTOM); } /** * method to start MainActivity with passing TabType * * @param tabType type of tab to show **/ private void startTabActivity(TabType tabType) { Intent intent = new Intent(StartingActivity.this, MainActivity.class); intent.putExtra(MainActivity.TAB_TYPE, tabType); startActivity(intent); } } |
Don’t forget to declare the StartingActivity.java in Manifest and make this activity as launcher activity.
5. In above class we are passing some intent data naming TabType which is type of ENUM so we will create a java class naming TabType.java and some ENUMs to it.
1 2 3 4 5 6 7 8 9 |
package tabbardemo.com.materialdesigntabs_demo; /** * Created by sonu on 12/06/17. */ public enum TabType { DEFAULT, ICON_TEXT,ICONS_ONLY,CUSTOM; } |
6. Now to achieve the different type of tabs we need to follow below procedure:
1 2 3 4 5 6 7 |
private void tabWithIcon() { for (int i = 0; i < tabIcons.length; i++) { TabLayout.Tab tab = tabLayout.getTabAt(i);//get tab via position if (tab != null) tab.setIcon(tabIcons[i]);//set icon } } |
1 2 3 4 5 |
@Override public CharSequence getPageTitle(int position) { return ""; } |
1 2 3 4 5 6 7 8 9 10 |
private void setUpCustomTabs() { for (int i = 0; i < tabArray.length; i++) { TextView customTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab_layout, null);//get custom view customTab.setText(tabArray[i]);//set text over view customTab.setCompoundDrawablesWithIntrinsicBounds(0, tabIcons[i], 0, 0);//set icon above the view TabLayout.Tab tab = tabLayout.getTabAt(i);//get tab via position if (tab != null) tab.setCustomView(customTab);//set custom view } } |
Custom tab xml layout
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/custom_tab_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/white" android:textSize="14sp" /> |
7. Finally our MainActivity.java will look like 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 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 tabbardemo.com.materialdesigntabs_demo; 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.util.Log; import android.view.LayoutInflater; import android.widget.TextView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private ViewPager viewPager; private TabLayout tabLayout; private TabType tabType; public static final String TAB_TYPE = "tab_type"; private static final String[] tabArray = {"Home", "Chat", "Profile"};//Tab title array private static final Integer[] tabIcons = {R.drawable.ic_home_white_24dp, R.drawable.ic_chat_white_24dp, R.drawable.ic_account_box_white_24dp};//Tab icons array @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabType = (TabType) getIntent().getSerializableExtra(TAB_TYPE);//get the type of tab //Find id of toolbar Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); viewPager = (ViewPager) findViewById(R.id.viewPager); setupViewPager(viewPager); tabLayout = (TabLayout) findViewById(R.id.tabLayout); tabLayout.setupWithViewPager(viewPager);//setting tab over viewpager //Implementing tab selected listener over tablayout tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition());//setting current selected item over viewpager switch (tab.getPosition()) { case 0: Log.e("TAG", "TAB1"); break; case 1: Log.e("TAG", "TAB2"); break; case 2: Log.e("TAG", "TAB3"); break; } } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); //Call tab type method onTabType(); } /** on the basis of tab type call respective method **/ private void onTabType() { switch (tabType) { case DEFAULT: //don't do anything here break; case ICON_TEXT: case ICONS_ONLY: //for both Types call set Icons method tabWithIcon(); break; case CUSTOM: //Call custom tab method setUpCustomTabs(); break; } } //Setting View Pager private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); for (String tab : tabArray) adapter.addFrag(DummyFragment.newInstance(tab), tab); viewPager.setAdapter(adapter); } /** method to set icon over tab **/ private void tabWithIcon() { for (int i = 0; i < tabIcons.length; i++) { TabLayout.Tab tab = tabLayout.getTabAt(i);//get tab via position if (tab != null) tab.setIcon(tabIcons[i]);//set icon } } /** set custom layout over tab **/ private void setUpCustomTabs() { for (int i = 0; i < tabArray.length; i++) { TextView customTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab_layout, null);//get custom view customTab.setText(tabArray[i]);//set text over view customTab.setCompoundDrawablesWithIntrinsicBounds(0, tabIcons[i], 0, 0);//set icon above the view TabLayout.Tab tab = tabLayout.getTabAt(i);//get tab via position if (tab != null) tab.setCustomView(customTab);//set custom view } } //View Pager fragments setting adapter class private class ViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragmentList = new ArrayList<>();//fragment arraylist private final List<String> mFragmentTitleList = new ArrayList<>();//title arraylist ViewPagerAdapter(FragmentManager manager) { super(manager); } @Override public Fragment getItem(int position) { return mFragmentList.get(position); } @Override public int getCount() { return mFragmentList.size(); } //adding fragments and title method void addFrag(Fragment fragment, String title) { mFragmentList.add(fragment); mFragmentTitleList.add(title); } @Override public CharSequence getPageTitle(int position) { if (tabType == TabType.ICONS_ONLY) return ""; return mFragmentTitleList.get(position); } } } |
8. Finally all done, now you can also make an app with custom tabs.
Thanks.
Subscribe to us and get the latest news.
4 Comments
Gilvan
Thursday, November 23rd, 2017Thank you, very clean explanation.
Isso
Sunday, January 21st, 2018Excellent travail!!!!
Error:(96, 42) error: cannot find symbol method newInstance(String)
can you help me
Isso
Sunday, January 21st, 2018Great !! 1
I understood why I had the error (96,42); I was not in the right project
Thank you for this beautiful work
son
Saturday, October 31st, 2020great tutorial, simple and easy, thanks.