TabLayout<\/code> is a construct for better organizing a user interface. It does so by making the user interface more organized and less cluttered.<\/p>\nThis example will also explain the different aspect which makes an android application briefly. These aspects include the XML configuration of an android application, the basics of Android activities, the manifest file and some of Gradle basic usages and features in an Android context.<\/p>\n
At the end of this article, we will have a working example build using Android Studio, Gradle, The Android SDK which in our case will come packaged with Android Studio.\n<\/p>\n
2. Technologies used<\/h2>\n\n- Android Studio 3<\/li>\n
- Android 7.1.1 (Nougat): API 25<\/li>\n
- Android Virtual Device: Nexus 5X.<\/li>\n<\/ul>\n
3. Create a Fragment<\/h2>\n
Below is the very first step when creating a fragment in Android Studio.<\/p>\n
![\"\"](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2017\/11\/creating-fragment-1.png\")
<\/a>This is the first step in creating a fragment in Android studio.<\/figcaption><\/figure><\/p>\nBelow is the second step when creating a fragment in Android Studio.<\/p>\n
![\"\"](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2017\/11\/creating-fragment-2.png\")
<\/a>This is the second step in creating a fragment in Android studio.<\/figcaption><\/figure><\/p>\n4. Implement the First Fragment class<\/h2>\n
Below is a basic implementation of a fragment. In this Fragment all we are basically doing is setting the layout which must be rendered when this fragment loads. This concept applies to all the other fragments implementations in this articles namely SecondFragment<\/code> and ThirdFragment<\/code><\/p>\nFirstFragment.java<\/em><\/span><\/p>\npackage com.tablelayout.javacodegeeks.tablayoutexample;\nimport android.os.Bundle;\nimport android.support.v4.app.Fragment;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\n\npublic class FirstFragment extends Fragment {\n @Override\n public View onCreateView(LayoutInflater inflater, ViewGroup container,\n Bundle savedInstanceState) {\n \/\/ Inflate the layout for this fragment\n return inflater.inflate(R.layout.fragment_first, container, false);\n }\n}\n<\/pre>\n\n- line 2 to 6: we import all the required dependencies for this class.<\/li>\n
- line 8: we define the
FirstFragment<\/code> Class which extends the Fragment<\/code> supper class from the Android platform.<\/li>\n- line 10: we override the
onCreateView<\/code> Method from the Fragment<\/code> superclass. This method is a lifecycle method that gets executed when the Fragment component is been loaded for the first time.<\/li>\n- line 13: we use the
LayoutInflater<\/code> component to register our XML layout configuration with the rest of the application. This is accomplished by calling the inflate<\/code> method of the inflater<\/code> object and passing to the fragment_first<\/code> as its layout definition.<\/li>\n<\/ul>\n5. Implement the Second Fragment class<\/h2>\n
SecondFragment.java<\/em><\/span><\/p>\npackage com.tablelayout.javacodegeeks.tablayoutexample;\nimport android.support.v4.app.Fragment;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\n\npublic class SecondFragment extends Fragment {\n @Override\n public View onCreateView(LayoutInflater inflater, ViewGroup container,\n Bundle savedInstanceState) {\n \/\/ Inflate the layout for this fragment\n return inflater.inflate(R.layout.fragment_second, container, false);\n }\n}\n<\/pre>\n\n- line 2 to 6: we import all the required dependencies for this class.<\/li>\n
- line 8: we define the
SecondFragment<\/code> Class which extends the Fragment<\/code> supper class from the Android platform.<\/li>\n- line 10: we override the
onCreateView<\/code> Method from the Fragment<\/code> superclass. This method is a lifecycle method that gets executed when the Fragment component is been loaded for the first time.<\/li>\n- line 13: we use the
LayoutInflater<\/code> component to register our XML layout configuration with the rest of the application. This is accomplished by calling the inflate<\/code> method of the inflater<\/code> object and passing to the fragment_second<\/code> as its layout definition.<\/li>\n<\/ul>\n6. Implement the Third Fragment class<\/h2>\n
ThirdFragment.java<\/em><\/span> <\/div> <\/div><\/p>\npackage com.tablelayout.javacodegeeks.tablayoutexample;\nimport android.os.Bundle;\nimport android.support.v4.app.Fragment;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\n\npublic class ThirdFragment extends Fragment {\n @Override\n public View onCreateView(LayoutInflater inflater, ViewGroup container,\n Bundle savedInstanceState) {\n \/\/ Inflate the layout for this fragment\n return inflater.inflate(R.layout.fragment_third, container, false);\n }\n}\n<\/pre>\n\n- line 2 to 6: we import all the required dependencies for this class.<\/li>\n
- line 8: we define the
ThirdFragment<\/code> Class which extends the Fragment<\/code> supper class from the Android platform.<\/li>\n- line 10: we override the
onCreateView<\/code> Method from the Fragment<\/code> superclass. This method is a lifecycle method that gets executed when the Fragment component is been loaded for the first time.<\/li>\n- line 13: we use the
LayoutInflater<\/code> component to register our XML layout configuration with the rest of the application. This is accomplished by calling the inflate<\/code> method of the inflater<\/code> object and passing to the fragment_third<\/code> as its layout definition.<\/li>\n<\/ul>\n7. Fragment Layouts<\/h2>\n
Below is the corresponding xml layout configuration for all 3 fragments respectively. All that’s happening in a nutshell is, we are defining a text that will get displayed whenever we are on the correct tab. For example when we are on the First Tab, the First Tab text will be displayed in its body. This is accomplished by using the TextView<\/code> tag and its text<\/code>property.<\/p>\nBelow is the first fragment s layout file.<\/p>\n
![\"\"](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2017\/11\/first-fragment-layout.png\")
<\/a>This is the first fragment s layout file.<\/figcaption><\/figure><\/p>\nBelow is the second fragment s layout file.<\/p>\n
![\"\"](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2017\/11\/second-fragment-layout.png\")
<\/a>This is the second fragment s layout file.<\/figcaption><\/figure><\/p>\nBelow is the third fragment s layout file.<\/p>\n
![\"\"](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2017\/11\/third-fragment-layout.png\")
<\/a>This is the third fragment s layout file.<\/figcaption><\/figure><\/p>\n8. Implement the PagerAdapter class<\/h2>\n
In order for us to manage all our defined fragments as a single unit, we need to implement an adapter which will help us configure our Fragments from the client application.<\/p>\n
Below is our implementation of a FragmentPagerAdapter<\/code><\/p>\nPagerAdapter.java<\/em><\/span><\/p>\npackage com.tablelayout.javacodegeeks.tablayoutexample;\nimport android.support.v4.app.Fragment;\nimport android.support.v4.app.FragmentManager;\nimport android.support.v4.app.FragmentPagerAdapter;\n\npublic class PagerAdapter extends FragmentPagerAdapter {\n int numberOfTabs;\n public PagerAdapter(FragmentManager fm, int NumOfTabs) {\n super(fm);\n this.numberOfTabs = NumOfTabs;\n }\n\n @Override\n public Fragment getItem(int position) {\n switch (position) {\n case 0:\n FirstFragment tab1 = new FirstFragment();\n return tab1;\n case 1:\n SecondFragment tab2 = new SecondFragment();\n return tab2;\n case 2:\n ThirdFragment tab3 = new ThirdFragment();\n return tab3;\n default:\n return null;\n }\n }\n\n @Override\n public int getCount() {\n return numberOfTabs;\n }\n}\n<\/pre>\n\n- line 1 to 4: we import all the required dependencies for this class.<\/li>\n
- line 6: we define the
PagerAdapter<\/code> Class which extends the FragmentPagerAdapter<\/code> supper class from the Android platform.<\/li>\n- line 7: we define the
numberOfTabs<\/code> variable to hold the tab number<\/li>\n- line 8 to 10: we define the constructor which will help initialize the
FragmentManager<\/code> and the numberOfTabs<\/code><\/li>\n- line 14: we override the
getItem<\/code> method of the FragmentPagerAdapter<\/code> super class<\/li>\n- line 15 to 26: we define the logic via a switch statement which will be responsible fo assigning the right Fragment to correct Tab.<\/li>\n
- line 31: we override the
getCount<\/code> method of the FragmentPagerAdapter<\/code> class, so that the client code could determine the number of tabs beforehand.<\/li>\n<\/ul>\n9. Implement the MainActivity class<\/h2>\n
Any Android or even Java application must always have an entry point. This is why we have to create the MainActivity<\/code> class which will be in our example, the entry point to the application.[ulp id=’Ja8Orb5oPKdShcXt’]<\/p>\nMainActivity.java<\/em><\/span><\/p>\npackage com.tablelayout.javacodegeeks.tablayoutexample;\nimport android.support.v4.view.ViewPager;\nimport android.support.v7.app.AppCompatActivity;\nimport android.os.Bundle;\nimport android.support.design.widget.TabLayout;\n\npublic class MainActivity extends AppCompatActivity {\n @Override\n protected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n setContentView(R.layout.activity_main);\n\n TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);\n tabLayout.addTab(tabLayout.newTab().setText(\"First Tab\"));\n tabLayout.addTab(tabLayout.newTab().setText(\"Second Tab\"));\n tabLayout.addTab(tabLayout.newTab().setText(\"Third Tab\"));\n tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);\n\n final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);\n final PagerAdapter adapter = new PagerAdapter\n (getSupportFragmentManager(), tabLayout.getTabCount());\n viewPager.setAdapter(adapter);\n viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));\n tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {\n @Override\n public void onTabSelected(TabLayout.Tab tab) {\n viewPager.setCurrentItem(tab.getPosition());\n }\n\n @Override\n public void onTabUnselected(TabLayout.Tab tab) {\n }\n\n @Override\n public void onTabReselected(TabLayout.Tab tab) {\n }\n });\n }\n}<\/pre>\n\n- line 2 to 5: we import all the required dependencies for this class.<\/li>\n
- line 7: we define the
MainActivity<\/code> class which will be the entry point to our application. This class extends the AppCompatActivity<\/code> class from the android platform.<\/li>\n- line 9: we override the
onCreate<\/code> method of the AppCompatActivity<\/code> class. This method is a lifecycle method and it gets excecuted only once and that is when the application loads up for the first time.<\/li>\n- line 10: we call the
onCreate<\/code> method of the AppCompatActivity<\/code> class in order to save the state of our activity each time we close the application<\/li>\n- line 11: we set the content view of the activity to the
activity_main<\/code> layout.<\/li>\n- line 13 to 17: we define the tab layout using the
TabLayout<\/code> class and the tab_layout<\/code> definition from the activity_main<\/code>layout. Next, we add tabs to the layout. Then the Gravity.<\/li>\n- line 19 to 39: here we define the view pager for our tab layout. The very first step in this process is to load the pager configuration from the main activities layout. Then instantiate an object of the
PagerAdapter<\/code> class which will be used to set the number of Tabs most importantly. Once the pager adapter object has been instantiated we have to use the ViewPager<\/code>‘s setAdapter method to register the adapter with the view pager. Afterward we have to add a page change listener using the addOnPageChangeListener<\/code> method of the viewPager. The last step is to add a TabSelectedListener<\/code> using the addOnTabSelectedListener<\/code> of the tabLayout object.<\/li>\n<\/ul>\n10. MainActivity Layout<\/h2>\n
Main activity s layout file activity_main.xml<\/code> contains all the layout definitions for the MainActivity<\/code>. In this layout the few things that happen are:<\/p>\n\n- We create a TabLayout component using the
TabLayout<\/code> tag. Then we add some basic properties to align the view.<\/li>\n- We create a ViewPager component using the
ViewPagerTag<\/code> tag. Then we add some basic properties to align the view<\/li>\n<\/ul>\n