Friday, 16 October 2015

Tablayout with ViewPager android Tutorial | Android tab layout with swipeable views

Hey everyone in this tutorial i am going to teach how to make swipe tab with viewpager using android material design tablayout. I will use new Design support library for tablayout. in next 3-4 post i will take you through all component of design support library so keep visiting.




So like always i will make a complete module of steps then we will move further into codes. so these are the steps:


  1. First of all we will add Design Support Library to our build.gradle file to use tablayout.
  2. we will make our main layout activity_main.xml in which we will add viewpager and tablaout.
  3. we will make three fragment for different tab of viewpager name as game,movie and study
  4. we will define viewpager and tablayout in our MainActivity java file
  5. we will create an adapter java class name as PagerAdapter.java and we will extend FragmentStatePagerAdapter and will implement two method getItem() and itemCount().
  6. we will set adapter to viewpager and will set tab to viewpager thats it.


  • So Lets start with coding and open your android studio go to File->New Project and create a new project name it SwipeTabWithViewPager like below picture.


  • Select Empty Activity from template like below picture .


  • Now lets start with our module discussed earlier in tutorial and start with first step. we will add Design Support Library to our build.gradle file to use tablayout. so open build.gradle file and add library under dependencies. means copy below line and paste it under dependencies of build.gradle like below image.click on image to see clearly.
    
compile 'com.android.support:design:23.0.1'

  • Moving towards second step we will make our main layout activity_main.xml in which we will add viewpager and tablayout. so open your activity_main.xml and copy and paste below code in which i am adding a tablayout and a viewpager below tablayout.

  activity_main.xml
<?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   xmlns:app="http://schemas.android.com/apk/res-auto"  
   tools:context=".MainActivity">  
   
   <android.support.design.widget.TabLayout  
     android:background="@color/colorPrimary"  
     android:layout_alignParentTop="true"  
     android:id="@+id/tab_layout"  
     android:layout_width="match_parent"  
     android:layout_height="48dp"  
     app:tabSelectedTextColor="#ffffff"  
   />    
   <android.support.v4.view.ViewPager  
     android:layout_below="@id/tab_layout"  
     android:id="@+id/view_pager"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     />  
 </RelativeLayout>  

  • Moving towards third step we will make three fragment for different tab of viewpager name as game,movie and study. Right click on your Java folder -->new-->Fragment-->Blank Fragment and name it Game like below picture.



  • Make sure check box are not selected for include fragment factory methods and include interface callback because these code will confuse you as a begineer.




  • Repeat same process for two more fragment and name them as Movie and Study.after creating three fragment you should have structure of code like below picture.




  • Add same Lyout to all three fragment like below code here is my fragment_game.xml file. only change text of text view according to name of fragment.


 fragment_game.xm
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   tools:context="roy.tablayoutwithviewpager.GameFragment">  
   
   <!-- TODO: Update blank fragment layout -->  
   <TextView  
     android:layout_centerInParent="true"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="I am game fragment" />  
   
 </RelativeLayout>  
   

  • Moving towards third step we will define viewpager and tablayout in our MainActivity java file. open your MainActivity.java and define viewpager and tablayout like below code.

 MainActivity.java
public class MainActivity extends AppCompatActivity {  
   ViewPager pager;  
   TabLayout tabLayout;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
   
     pager= (ViewPager) findViewById(R.id.view_pager);  
     tabLayout= (TabLayout) findViewById(R.id.tab_layout);  
   
   }  
 }  

  • Moving towards fourth step we will create an adapter java class name as PagerAdapter.java and we will extend FragmentStatePagerAdapter and will implement two method getItem() and itemCount(). Right click on your main package and create a new java class name as PagerAdapter and extend FragmentStatePagerAdapter it will ask you to implement two method called getItem() and getCount(). it will also suggest you to create a constructor matching super. so after this your PagerAdapter.java class looks like below code.

 import android.support.v4.app.Fragment;  
 import android.support.v4.app.FragmentManager;  
 import android.support.v4.app.FragmentStatePagerAdapter;  
   
 /**  
  * Created by androidwarriors on 10/16/2015.  
  */  
 public class PagerAdapter extends FragmentStatePagerAdapter{  
   public PagerAdapter(FragmentManager fm) {  
     super(fm);  
   }  
   
   @Override  
   public Fragment getItem(int position) {  
   
     Fragment frag=null;  
     switch (position){  
       case 0:  
         frag=new GameFragment();  
         break;  
       case 1:  
         frag=new MovieFragment();  
         break;  
       case 2:  
         frag=new StudyFragment();  
         break;  
     }  
     return frag;  
   }  
   
   @Override  
   public int getCount() {  
     return 3;  
   }  
   
   @Override  
   public CharSequence getPageTitle(int position) {  
     String title=" ";  
     switch (position){  
       case 0:  
         title="Game";  
         break;  
       case 1:  
         title="Movie";  
         break;  
       case 2:  
         title="Study";  
         break;  
     }  
   
     return title;  
   }  
 }  

In above code getItem method return fragment to your viewpager according to position and getCount returns number of page you want. you have seen one more method called getPageTitle this method is used to set name of your Tabs according to position. in my case name are Game,Movie and Study.
  •  Moving towards our last step in which we will set adapter to viewpager and will set tab to viewpager. in this step we will add six line of code to our MainActivity these are following

 
     // Fragment manager to add fragment in viewpager we will pass object of Fragment manager to adpater class.  
           FragmentManager manager=getSupportFragmentManager();  
             
     //object of PagerAdapter passing fragment manager object as a parameter of constructor of PagerAdapter class.  
     PagerAdapter adapter=new PagerAdapter(manager);  
             
     //set Adapter to view pager  
     pager.setAdapter(adapter);  
             
     //set tablayout with viewpager  
     tabLayout.setupWithViewPager(pager);  
             
     // adding functionality to tab and viewpager to manage each other when a page is changed or when a tab is selected  
     pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));  
   
           //Setting tabs from adpater  
     tabLayout.setTabsFromPagerAdapter(adapter);  

Copy and paste above code in your onCreate method of MainActivity and you are done. I hope this post will help you dont forget to like and give your feedback to this post because your feedback motivate us to write more post thanks.you can see demo app made from this tutorial below.




http://www.mediafire.com/download/m7y022p7n9m7v7y/TabLayoutWithViewPager.zip

0 comments:

Post a Comment