How to make a ViewPager in Android Studio:

Making a ViewPager in Android Studio is extremely difficult to do if you don’t know what to do and, it’s even harder if you are new to coding. I am going to explain it as easily and thoroughly as I can so that you can make a ViewPager with less difficulty than I had. Here are the steps to making your own ViewPager.

1.You need to make a xml file that contains a viewpager. Here is the code you need to put in this file. I named my this file activity_schedules but you can name it something else that matches with your project.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/schedule_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="visible">
</android.support.v4.view.ViewPager>

2. Make a second xml file that contains this code. Make sure it is RelativeLayout and this one also needs a viewpager inside of it, also seen in the code below. This file I named activity_schedules2 but you can name it something else.

<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" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</RelativeLayout>

3. Make another xml file and you want to call it a fragment. You don’t need an ImageView in this file but I did so I could distinguish this fragment from the other one we need to make. Use this code to put in the first fragment xml file. Make sure that it is a LinearLayout. This one I named fragment_schedule but you can name it something different.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srcCompat="@mipmap/ic_launcher"
        android:contentDescription=""
        tools:ignore="ContentDescription" />
</LinearLayout>

4. Make another xml that is named fragment2 but instead of using the code above, use this code instead. It needs to be a RelativeLayout. This is named fragment_schedule2 but you don’t have to name it this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />
</RelativeLayout>

5. Now that you have finished making all the xml files, we need to start making the java files. Put this code in your java file for the first xml we made. Anything that is bolded and italicized is the names I have in my project and you do not need to use these. SchedulesActivity is the name of the java we just made, ScheduleFragment is the name of the third xml we made, SchedulesPagerAdapter is what we are going to make in a little, and schedule_pager is the name of my pager in the first xml we made. When you put this code into Android Studio, some of it will be crossed out and they will cause warnings but it’s okay because it won’t affect your app.

package YOUR PACKAGE NAME HERE;

import android.app.ActionBar;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.app.FragmentTransaction;
import android.support.v4.view.ViewPager;


public class SchedulesActivity extends FragmentActivity {
    // When requested, this adapter returns a ScheduleFragment,
    // representing an object in the collection.
    SchedulesPagerAdapter mSchedulesPagerAdapter;
    ViewPager mViewPager;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_schedules);

        // ViewPager and its adapters use support library
        // fragments, so use getSupportFragmentManager.
        mSchedulesPagerAdapter =
                new SchedulesPagerAdapter(
                        getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.schedule_pager);
        mViewPager.setAdapter(mSchedulesPagerAdapter);

        final ActionBar actionBar = getActionBar();

        // Specify that tabs should be displayed in the action bar.
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Create a tab listener that is called when the user changes tabs.
        ActionBar.TabListener tabListener = new ActionBar.TabListener() {

            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
                // show the given tab
                mViewPager.setCurrentItem(tab.getPosition());

            }

            public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
                // hide the given tab
            }

            public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
                // probably ignore this event
            }
        };

        // Add 3 tabs, specifying the tab's text and TabListener
        for (int i = 0; i < 3; i++) {
            actionBar.addTab(
                    actionBar.newTab()
                            .setText("Tab " + (i + 1))
                            .setTabListener(tabListener));
        }


    }


}

6. We need to put this code in the java file of the second xml file you made. Schedules2Activity is the name of the java file you see down below, Schedules2PagerAdapter is what we are going to make in a little bit, and Schedules2Fragment is the fourth xml file you made. Once again, you don’t have to use the names I used, I’m just telling you what I named them so you don’t get too confused.

package YOUR PACKAGE NAME HERE;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import java.util.ArrayList;
import java.util.List;

public class Schedules2Activity extends FragmentActivity {
    Schedules2PageAdapter pageAdapter;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_schedules2);
        List<Fragment> fragments = getFragments();
        pageAdapter = new Schedules2PageAdapter(getSupportFragmentManager(), fragments);
        ViewPager pager =
                (ViewPager) findViewById(R.id.viewpager);
        pager.setAdapter(pageAdapter);

    }

    private List<Fragment> getFragments() {
        List<Fragment> fList = new ArrayList<>();
        fList.add(Schedule2Fragment.newInstance("Fragment 1"));
        fList.add(Schedule2Fragment.newInstance("Fragment 2"));
        fList.add(Schedule2Fragment.newInstance("Fragment 3"));
        fList.add(Schedule2Fragment.newInstance("Fragment 4"));
        fList.add(Schedule2Fragment.newInstance("Fragment 5"));
        return fList;
    }

}

7. You need to make a java file called SchedulesPagerAdapter. You can use your own name but make sure that PagerAdapter is on the end of it. You need to put the code down below in this file. SchedulesPagerAdapter is the name of this java file and ScheduleFragment is the third xml file you made.

package YOUR PACKAGE NAME HERE;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

// Since this is an object collection, use a FragmentStatePagerAdapter,
// and NOT a FragmentPagerAdapter.
public class SchedulesPagerAdapter extends FragmentStatePagerAdapter {
    public SchedulesPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        Fragment fragment = new ScheduleFragment();
        Bundle args = new Bundle();
        // Our object is just an integer :-P
        args.putInt(ScheduleFragment.ARG_OBJECT, i + 1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public int getCount() {
        return 100;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "OBJECT " + (position + 1);
    }
}

8. Make another java file named Schedules2PagerAdapter but you can use your name instead of Schedules but use 2PagerAdapter. Schedules2PageAdapter is the name of this java file that I used.

package com.example.a19cmiller.mainpageforgps;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;


public class Schedules2PageAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;
    public Schedules2PageAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }
    @Override
    public Fragment getItem(int position) {
        return this.fragments.get(position);
    }
    @Override
    public int getCount() {
        return this.fragments.size();
    }
}

9.

Leave a Reply