Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to implement ViewPager with tabs in android?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 250
    Comment on it

    To switch easily from one page to another using slide either from left-to-right or right-to-left becomes easy using ViewPager. The below example is to make view pager with TabLayout, tabs may be used to display headings, we can also move easily from one fragment to another. Below four steps will be enough to implement ViewPager in your application.

    Step1: Creating supporting TabLayout and ViewPager in your xml file

    <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F6F6F6"
                app:tabGravity="fill"
                app:tabMode="fixed" />
    
    <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white" />

     

    Step2: Initializing ViewPager and TabLayout and calling below methods from onCreate()

    viewPager = (ViewPager) view.findViewById(R.id.viewpager);
    	tabLayout = (TabLayout) view.findViewById(R.id.tabs);
    
    	// Adding fragments to the view pager
            setupViewPager(viewPager);
    
            // Tab layout view
            tabLayout.setupWithViewPager(viewPager);
            setupTabIcons();

     

    Step3: In this step, we going to add fragments to the FragmentPagerAdapter class and if someone needs to customize the view like adding icons and setting state_selected, state_focused, state_active, state_activated colors can be done using selector tag.

    // initializing adapter class and adding fragments to that adapter
    private void setupViewPager(ViewPager viewPager) {
    
            ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
    
            // first fragment
            adapter.addFrag(new FriendsMessageFragment(), "FriendsMessageFragment");
    
            // second fragment
            adapter.addFrag(new MyConnectMessageFragment(), "MyConnectMessageFragment");
    
            // attaching adapter to viewPager
            viewPager.setAdapter(adapter);
        }
    
    // customising the Tab
    private void setupTabIcons() {
    	
            TextView tabOne = (TextView) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab_addfriend, null);
            tabOne.setText(" Friends");
    	// if you need to add image/icon with tab title        
    	tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.new_friend, 0, 0, 0);
            tabLayout.getTabAt(0).setCustomView(tabOne);
    
            TextView tabTwo = (TextView) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab_addfriend, null);
            tabTwo.setText(" My Connect");
            //tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.drawable.friends_add, 0, 0, 0);
            tabLayout.getTabAt(1).setCustomView(tabTwo);
        }
    
    private class ViewPagerAdapter extends FragmentPagerAdapter {
    
            private final List<Fragment> mFragmentList = new ArrayList<>();
            private final List<String> mFragmentTitleList = new ArrayList<>();
    
            public ViewPagerAdapter(FragmentManager manager) {
                super(manager);
            }
    
    	// returns fragment to display at particular page
            @Override
            public Fragment getItem(int position) {
                return mFragmentList.get(position);
            }
    
    	// returns total number of pages
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
    
            public void addFrag(Fragment fragment, String title) {
                mFragmentList.add(fragment);
                mFragmentTitleList.add(title);
            }
    
    	// returns page title
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentTitleList.get(position);
            }
        }

     

    Step4: Don't forget to add dependencies in your build.gradle file

    compile 'com.android.support:appcompat-v7:24.1.1'
    	compile 'com.android.support:design:24.1.1'

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: