Tuesday, 12 September 2017

Adding TabsLayout (Tabs) | With Text and Icon in Android Studio

About Example:- Here is the basic example that "How to Add TabsLayout   in Android Application By Coding"

Basic Requirement:-
1. MainActivity.java  | activity_main.xml
Steps are:-

Step 1: Add a new project and open activity_main.xml and write following code:-<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" 

android:orientation="vertical"

android:layout_width="match_parent" 

android:layout_height="match_parent">

    <android.support.design.widget.TabLayout 
    android:id="@+id/tabsLayout1"    
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    app:tabMode="fixed"       
    app:tabGravity="fill">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager   
 android:id="@+id/viewPager1"   
 android:layout_width="match_parent"  
 android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>


Step 2: Add some Fragment classes as much as u needs to show in tabs, here i am adding 3 classe:- Right click on your package and add new java class:-

 A). GameFragment.java | SongFragment.java | MovieFragment.java

B) In every class code will be like following:-

public class GameFragment extends android.support.v4.app.Fragment {
    public static final String ARG_OBJECT = "object";
    @Nullable    
@Override    
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View v=inflater.inflate(R.layout.gamefargment,container,false);
        Bundle args=getArguments();
        TextView tv=(TextView)v.findViewById(R.id.tvgame);
        tv.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View view) {
                Toast.makeText(getActivity(),"Click 1",Toast.LENGTH_LONG).show();
            }
        });
        
        return v;
    }
}

C) gamefragment.xml will be like following:-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
 android:orientation="vertical" 
android:layout_width="match_parent"    
android:layout_height="match_parent"  
  android:background="#DAF7A6"   
 android:gravity="center">
    <TextView        
android:id="@+id/tvgame"  
      android:layout_width="match_parent"       
 android:layout_height="wrap_content"      
  android:text="Game"      
  android:textSize="30sp"      
  android:gravity="center"/>


</LinearLayout>

Step 3:  Open MainActivity  and write following code:-

public class MainActivity extends AppCompatActivity{


    ViewPager viewPager;
    TabLayout tabLayout;
    int[] iconList={R.drawable.game,R.drawable.song,R.drawable.mov};
    @Override    
protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout=(TabLayout)findViewById(R.id.tablaout3);
        viewPager=(ViewPager)findViewById(R.id.viewPager3);
        tabLayout.setupWithViewPager(viewPager);
        setViewAdapter4(viewPager);
        setIcon();

    }

    //set class to releted tabs....    public void setViewAdapter4(ViewPager vp){
        ViewPagerAdapterClasss3 adapter=new ViewPagerAdapterClasss3(getSupportFragmentManager());
        adapter.addFragment(new GameFragment(),"Game");
        adapter.addFragment(new SongFragment(),"Song");
        adapter.addFragment(new MovieFragment(),"Movie");
        vp.setAdapter(adapter);

    }
    //set icon method start..    public void setIcon(){
        tabLayout.getTabAt(0).setIcon(iconList[0]);
        tabLayout.getTabAt(1).setIcon(iconList[1]);
        tabLayout.getTabAt(2).setIcon(iconList[2]);
    }
}
class ViewPagerAdapterClasss3 extends FragmentPagerAdapter {
    final List<Fragment> mFragmentAdd4=new ArrayList<>();
    final List<String> mTitel4=new ArrayList<>();
    @Override   
 public Fragment getItem(int position) {
        return mFragmentAdd4.get(position);
    }

    @Override   
 public int getCount() {
        return mFragmentAdd4.size();
    }

    @Override    
public CharSequence getPageTitle(int position) {
        return mTitel4.get(position);
    }
    public void addFragment(Fragment fragment,String titel){
        mFragmentAdd4.add(fragment);
        mTitel4.add(titel);

    }

    public ViewPagerAdapterClasss3(FragmentManager fm) {
        super(fm);
    }
}

Step 4: Open build.gradle and add following:-

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'    })
    compile 'com.android.support:appcompat-v7:26.+'    compile 'com.android.support:design:26.+'
    
}

Step 1: Output will be like:-




No comments:

Post a Comment