Android sliding page navigation

Question

I am trying to achieve sliding page navigation in android, right now I'm using fragment activity and view pager inside of it. I am able to achieve the sliding page thing a little bit, but I want it to be more comprehensive. What should I do? Here is my code

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Button button1 = (Button)findViewById(R.id.button1);
    Button button2 = (Button)findViewById(R.id.button2);
    Button button3 = (Button)findViewById(R.id.button3);

    List<Fragment> fragments = getFragments();

    pageAdapter = new MyPageAdapter(getSupportFragmentManager(), fragments);

    pager = (ViewPager)findViewById(R.id.viewpager);
    pager.setAdapter(pageAdapter);
    pager.setCurrentItem(0);

    button1.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            pager.setCurrentItem(0);
        }
    });

    button2.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            pager.setCurrentItem(1);
        }
    });

    button3.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            pager.setCurrentItem(2);
        }
    });
}

private List<Fragment> getFragments() {
    List<Fragment> fList = new ArrayList<Fragment>();

    fList.add(MyFragment.newInstance("Tv Shows"));
    fList.add(MyFragment.newInstance("Movies"));
    fList.add(MyFragment.newInstance("Music Videos"));

    return fList;
}

Answer 1

I am editing your question and converting it into a very simple tutorial for you.

Here you go:

Main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@drawable/back"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="60dp"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/button1" >

    </android.support.v4.view.ViewPager>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_alignRight="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="15dp"
        android:text="Movies" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button2"
        android:layout_below="@+id/button2"
        android:layout_marginTop="16dp"
        android:layout_toLeftOf="@+id/viewpager"
        android:text="Music Videos" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="18dp"
        android:layout_marginTop="110dp"
        android:text="Tv Shows" />

</RelativeLayout>

And then fragment.xml; put these files into the res/layout folder.

<?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:background="@drawable/back"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="24dp" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView"
        android:background="@drawable/back" >

        <RelativeLayout
            android:id="@+id/imageView1"
            android:layout_width="280dp"
            android:layout_height="380dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/movie1" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="37dp"
                android:layout_marginRight="85dp"
                android:text="SIMPSONS" />

            </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout15"
            android:layout_width="280sp"
            android:layout_height="230dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignRight="@+id/imageView1"
            android:background="@drawable/movie"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout1"
            android:layout_width="20dp"
            android:layout_height="150dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/imageView1"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout2"
            android:layout_width="250dp"
            android:layout_height="150dp"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/RelativeLayout1"
            android:background="@drawable/avatar"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout3"
            android:layout_width="250dp"
            android:layout_height="10dp"
            android:layout_alignLeft="@+id/RelativeLayout2"
            android:layout_below="@+id/RelativeLayout2"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout4"
            android:layout_width="250dp"
            android:layout_height="150dp"
            android:layout_alignLeft="@+id/RelativeLayout3"
            android:layout_below="@+id/RelativeLayout3"
            android:background="@drawable/movienight"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout5"
            android:layout_width="250dp"
            android:layout_height="10dp"
            android:layout_alignLeft="@+id/RelativeLayout4"
            android:layout_below="@+id/RelativeLayout4"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout6"
            android:layout_width="250sp"
            android:layout_height="230dp"
            android:layout_alignLeft="@+id/RelativeLayout5"
            android:layout_below="@+id/RelativeLayout5"
            android:background="@drawable/movie3"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout7"
            android:layout_width="70dp"
            android:layout_height="600dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/RelativeLayout2"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout8"
            android:layout_width="280dp"
            android:layout_height="380dp"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/RelativeLayout7"
            android:background="@drawable/band" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout9"
            android:layout_width="10sp"
            android:layout_height="20dp"
            android:layout_alignLeft="@+id/RelativeLayout8"
            android:layout_below="@+id/RelativeLayout8"
            android:background="@drawable/movie3"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout20"
            android:layout_width="280sp"
            android:layout_height="230dp"
            android:layout_alignLeft="@+id/RelativeLayout9"
            android:layout_below="@+id/RelativeLayout9"
            android:background="@drawable/movie3"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout10"
            android:layout_width="20dp"
            android:layout_height="600dp"
            android:layout_alignParentTop="true"
            android:layout_marginTop="21dp"
            android:layout_toRightOf="@+id/RelativeLayout8"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout11"
            android:layout_width="250dp"
            android:layout_height="150dp"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/RelativeLayout10"
            android:background="@drawable/war"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout12"
            android:layout_width="250dp"
            android:layout_height="10dp"
            android:layout_alignLeft="@+id/RelativeLayout11"
            android:layout_below="@+id/RelativeLayout11"
            android:orientation="vertical" >
        </RelativeLayout>
        ////

        <RelativeLayout
            android:id="@+id/RelativeLayout14"
            android:layout_width="250dp"
            android:layout_height="10dp"
            android:layout_alignLeft="@+id/RelativeLayout11"
            android:layout_below="@+id/RelativeLayout13"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout13"
            android:layout_width="250dp"
            android:layout_height="150dp"
            android:layout_above="@+id/RelativeLayout5"
            android:layout_alignLeft="@+id/RelativeLayout12"
            android:background="@drawable/war"
            android:orientation="vertical" >
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RelativeLayout16"
            android:layout_width="250sp"
            android:layout_height="230dp"
            android:layout_alignLeft="@+id/RelativeLayout14"
            android:layout_alignTop="@+id/RelativeLayout6"
            android:background="@drawable/band"
            android:orientation="vertical" >
        </RelativeLayout>

    </RelativeLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView"
        android:layout_centerHorizontal="true"
        android:text="Favourites" />

</RelativeLayout>

And then in your main Activity:

public class MainActivity extends FragmentActivity {
    MyPageAdapter pageAdapter;
    ViewPager pager;

    static ImageView image1 ;
    static ImageView image2;
    static ImageView image3;
    static ImageView image4;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button1=(Button)findViewById(R.id.button1);
        Button button2=(Button)findViewById(R.id.button2);
        Button button3=(Button)findViewById(R.id.button3);

        List<Fragment> fragments = getFragments();

        pageAdapter = new MyPageAdapter(getSupportFragmentManager(), fragments);

        pager = (ViewPager)findViewById(R.id.viewpager);
        pager.setAdapter(pageAdapter);
        pager.setCurrentItem(0);
        button1.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                pager.setCurrentItem(0);
            }
        });

        button2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                pager.setCurrentItem(1);
            }
        });

        button3.setOnClickListener(new OnClickListener() {

                @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                pager.setCurrentItem(2);
            }
        });
    }

    private List<Fragment> getFragments(){
        List<Fragment> fList = new ArrayList<Fragment>();

        fList.add(MyFragment.newInstance("Tv Shows"));
        fList.add(MyFragment.newInstance("Movies"));
        fList.add(MyFragment.newInstance("Music Videos"));

        return fList;
    }

    private class MyPageAdapter extends FragmentPagerAdapter {
        private List<Fragment> fragments;

        public MyPageAdapter(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();
        }
    }
}

And create a new Java class, MyFragment:

public class MyFragment extends Fragment implements AnimationListener {

    public static final String EXTRA_MESSAGE = "EXTRA_MESSAGE";
    private Animation animation1;
    private Animation animation2;
    private boolean isBackOfCardShowing = true;

    RelativeLayout image1;
    RelativeLayout image2;
    RelativeLayout image3;
    RelativeLayout image4;
    RelativeLayout image5;
    RelativeLayout image6;
    RelativeLayout image7;
    RelativeLayout image8;
    RelativeLayout image9;
    RelativeLayout image10;


    View v;
    Handler updateHandler;
    public static final MyFragment newInstance(String message)
    {
        MyFragment f = new MyFragment();
        Bundle bdl = new Bundle(1);
        bdl.putString(EXTRA_MESSAGE, message);
        f.setArguments(bdl);
        return f;
    }

    Runnable RecurringTask = new Runnable() {
        public void run() {

            // Do whatever you want
            image1.clearAnimation();
            image2.clearAnimation();
            image3.clearAnimation();
            image4.clearAnimation();
            image1.setAnimation(animation1);
            image1.startAnimation(animation1);
            image2.setAnimation(animation1);
            image2.startAnimation(animation1);
            image3.setAnimation(animation1);
            image3.startAnimation(animation1);
            image4.setAnimation(animation1);
            image4.startAnimation(animation1);

            // Call this method again every 30 seconds
            updateHandler.postDelayed(this, 10000);
        }
    };

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

        String message = getArguments().getString(EXTRA_MESSAGE);
        v = inflater.inflate(R.layout.myfragment_layout, container, false);
        TextView messageTextView = (TextView)v.findViewById(R.id.textView);
        messageTextView.setText(message);

        image1 = (RelativeLayout)v.findViewById(R.id.imageView1);
        image2 = (RelativeLayout)v.findViewById(R.id.RelativeLayout2);
        image3 = (RelativeLayout)v.findViewById(R.id.RelativeLayout15);
        image4 = (RelativeLayout)v.findViewById(R.id.RelativeLayout4);
        image5 = (RelativeLayout)v.findViewById(R.id.RelativeLayout6);
        image6 = (RelativeLayout)v.findViewById(R.id.RelativeLayout8);
        image7 = (RelativeLayout)v.findViewById(R.id.RelativeLayout20);
        image8 = (RelativeLayout)v.findViewById(R.id.RelativeLayout11);
        image9 = (RelativeLayout)v.findViewById(R.id.RelativeLayout13);
        image10 = (RelativeLayout)v.findViewById(R.id.RelativeLayout16);

        //
        animation1 = AnimationUtils.loadAnimation(getActivity(), R.anim.to_middle);
        animation1.setAnimationListener(this);
        animation2 = AnimationUtils.loadAnimation(getActivity(), R.anim.from_middle);
        animation2.setAnimationListener(this);
        if (message.equals("Tv Shows"))
        {
            /* image1.setBackgroundResource(R.drawable.movie1);
               image2.setBackgroundResource(R.drawable.movie);
               image3.setBackgroundResource(R.drawable.war);
               image4.setBackgroundResource(R.drawable.avatar); */
        }

        if (message.equals("Movies"))
        {
            /* image1.setBackgroundResource(R.drawable.movie);
               image2.setBackgroundResource(R.drawable.movie1);
               image3.setBackgroundResource(R.drawable.movienight);
               image4.setBackgroundResource(R.drawable.avatar); */
        }

        if (message.equals("Music Videos"))
        {
            /* image1.setBackgroundResource(R.drawable.movienight);
               image2.setBackgroundResource(R.drawable.avatar);
               image3.setBackgroundResource(R.drawable.movie);
               image4.setBackgroundResource(R.drawable.movie1); */
        }

        //
        updateHandler = new Handler();

        // Do this first after one second
        updateHandler.postDelayed(RecurringTask, 1000);
        return v;
    }

    @Override
    public void onAnimationEnd(Animation animation) {

        if (animation == animation1) {
            if (isBackOfCardShowing) {
                image1.setBackgroundResource(R.drawable.avatar);
                image2.setBackgroundResource(R.drawable.movie);
                image3.setBackgroundResource(R.drawable.movienight);
                image4.setBackgroundResource(R.drawable.movie1);
            }
            else {
                image2.setBackgroundResource(R.drawable.avatar);
                image1.setBackgroundResource(R.drawable.movie);
                image3.setBackgroundResource(R.drawable.movienight);
                image4.setBackgroundResource(R.drawable.movie1);
            }
            image1.clearAnimation();
            image2.clearAnimation();
            image3.clearAnimation();
            image4.clearAnimation();
            image1.setAnimation(animation2);
            image2.setAnimation(animation2);
            image3.setAnimation(animation2);
            image4.setAnimation(animation2);
            image1.startAnimation(animation2);
            image2.startAnimation(animation2);
            image3.startAnimation(animation2);
            image4.startAnimation(animation2);
        }
        else {
            isBackOfCardShowing=!isBackOfCardShowing;
            // v.findViewById(R.id.button1).setEnabled(true);
        }
    }

    @Override
    public void onAnimationRepeat(Animation arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onAnimationStart(Animation arg0) {
        // TODO Auto-generated method stub

    }
}

And in the end, write your page adapter and you are good to go:

package com.example.pager;

public class MyPageAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;

    public MyPageAdapter(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();
    }
}

AS: Delete the code chunks which are used for animation.