Android ViewPager Example To Create Sliding Screens

ViewPager

Android ViewPager widget is found in the support library and it allows the user to swipe left or right to see an entirely new screen.

Today we’re implementing a ViewPager by using Fragment and FragmentPagerAdapter.

Get GITHUB code from Here.

Creating New Project

1.In Android Studio, go to File New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.

2.Open activity_main.xml and write the below code.

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black"
    android:orientation="vertical" >

    <!-- ViewPager -->
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        android:id="@+id/viewPager" />


    <!-- Footer -->
    <include layout="@layout/footer"  />
    
</FrameLayout>

3.Open drawable folder and create round_icon.xml and write below code.

round_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android">
    <shape android:shape="rectangle">
        <gradient
            android:endColor="@color/white"
            android:startColor="@color/white"

            />

        <corners
            android:bottomLeftRadius="10dp"
            android:bottomRightRadius="10dp"
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />
        <stroke
            android:width="1dp"
            android:color="@android:color/holo_green_dark" />
    </shape>
</inset>

4.Open footer.xml defined in activity_main.xml and write the below code.

footer.xml

<?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="wrap_content"
    android:layout_gravity="bottom"
    android:padding="15dp"
    >

    <Button
        android:id="@+id/btn_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/round_icon" />

    <Button
        android:id="@+id/btn_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dip"
        android:layout_toRightOf="@id/btn_1"
        android:background="@drawable/round_icon" />

    <Button
        android:id="@+id/btn_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dip"
        android:layout_toRightOf="@id/btn_2"
        android:background="@drawable/round_icon" />


</RelativeLayout>


5.Create fragment_one,fragment_two,fragment_three and write the below code.

fragment_one.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FragmentOne"
        android:textSize="25dp"
        android:layout_centerInParent="true"/>
</RelativeLayout>

fragment_two.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FragmentTwo"
        android:textSize="25dp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

fragment_three.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FragmentThree"
        android:textSize="25dp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

6.Under package name create a folder name fragment and make three fragments named FragmentOneFragmentTwoFragmentThree.

FragmentOne.Java

package com.example.lenovo.viewpagerapp.fragment;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.support.v4.app.Fragment;
import android.view.ViewGroup;

import com.example.lenovo.viewpagerapp.R;

public class FragmentOne extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_one,container,false);

        return view;
    }
}

FragmentTwo.Java

package com.example.lenovo.viewpagerapp.fragment;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.lenovo.viewpagerapp.R;


public class FragmentTwo extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_two,container,false);

        return view;
    }
}

FragmentThree.Java

package com.example.lenovo.viewpagerapp.fragment;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.lenovo.viewpagerapp.R;


public class FragmentThree extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_three, container, false);

        return view;
    }
}

7.Under package name create a class named ViewPagerAdapter and write the below code.It sets the adapter to the viwpager.

ViewPagerAdapter.Java

package com.example.lenovo.viewpagerapp;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import com.example.lenovo.viewpagerapp.fragment.FragmentOne;
import com.example.lenovo.viewpagerapp.fragment.FragmentThree;
import com.example.lenovo.viewpagerapp.fragment.FragmentTwo;

public class ViewPagerAdapter extends FragmentPagerAdapter {


    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);

    }

    @Override
    public Fragment getItem(int position) {


        switch (position) {
            case 0:

                return new FragmentOne();
            case 1:

                return new FragmentTwo();
            case 2:

                return new FragmentThree();

        }

        return null;
    }

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

8.Open MainActivity.Java and write the below code.

MainActivity.Java

package com.example.lenovo.viewpagerapp;

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

public class MainActivity extends FragmentActivity {

    private ViewPager _mViewPager;
    private ViewPagerAdapter _adapter;
    private Button _btn1, _btn2, _btn3;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // sliding screen create FragmentOne,FragmentTwo,FragmentThree
        setUpView();

        //setting buttons size and text with corresponding fragment
        setButtonWithFragment();


    }


    private void setUpView() {
        _mViewPager = (ViewPager) findViewById(R.id.viewPager);
        _adapter = new ViewPagerAdapter(getSupportFragmentManager());
        _mViewPager.setAdapter(_adapter);
        _mViewPager.setCurrentItem(0);
        initButton();
    }

    private void setButtonWithFragment() {
        _mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageScrollStateChanged(int position) {
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageSelected(int position) {

                btnAction(position);
            }

        });

    }

    //According to the particular fragment position it sets all the three button
    // with the corresponding height,width and text
    private void btnAction(int action) {
        switch (action) {
            case 0:
                setButton(_btn1, "1", 40, 40);
                setButton(_btn2, "", 20, 20);
                setButton(_btn3, "", 20, 20);
                break;

            case 1:
                setButton(_btn2, "2", 40, 40);
                setButton(_btn1, "", 20, 20);
                setButton(_btn3, "", 20, 20);
                break;

            case 2:
                setButton(_btn3, "3", 40, 40);
                setButton(_btn1, "", 20, 20);
                setButton(_btn2, "", 20, 20);
                break;
        }
    }

    // Inisialize buttons and Bydefault setting buttons height,width and text
    private void initButton() {
        _btn1 = (Button) findViewById(R.id.btn_1);
        _btn2 = (Button) findViewById(R.id.btn_2);
        _btn3 = (Button) findViewById(R.id.btn_3);
        setButton(_btn1, "1", 40, 40);
        setButton(_btn2, "", 20, 20);
        setButton(_btn3, "", 20, 20);
    }

    //setting button with the corresponding height,width and text
    private void setButton(Button btn, String text, int h, int w) {
        btn.setWidth(w);
        btn.setHeight(h);
        btn.setText(text);
    }
}

When you run the app it will look like this:

Leave a Reply