Blog

10) Scrollable tabs

Creating a scroll tab:

  • 1) Create the fragment classes and layouts
  • 2) Create a view pager – a view pager is layout manager where each child is a separate page. It uses an implementation of PagerAdapter to switch between pages

    • If using fragments use:

    FragmentStatePagerAdapter – used for a small number of fixed pages. Each fragment is kept as an object associated with the activity and the UI is destroyed when the user navigates away – it’s onSaveInstanceState() is NOT called

    FragmentPagerAdapter – used for large number of pages – entire fragment may be destroyed – it’s onSaveInstanceState() is called

  • 3) Implement the appropriate adapter

    • getItem() – returns the fragment at a given position
    getCount() – returns the total number of pages or fragments

  • 4) Add a title inside the View Pager

    • MainActivity.java

    package com.jamesfroggatt.scrollabletabsdemo.app;

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

public class MainActivity extends FragmentActivity {

    ViewPager viewPager=null;

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

        FragmentManager fragmentManager=getSupportFragmentManager();
        viewPager= (ViewPager) findViewById(R.id.pager);

        viewPager.setAdapter(new MyAdapter(fragmentManager));
    }
}


class MyAdapter extends FragmentPagerAdapter
{

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

    @Override
    public Fragment getItem(int position) {
        Fragment fragment=null;
        if (position==0){
            fragment = new FragmentA();
        }
        if (position==1){
            fragment = new FragmentB();
        }
        if (position==2){
            fragment = new FragmentC();
        }
        return fragment;
    }

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

    FragmentA.java

    package com.jamesfroggatt.scrollabletabsdemo.app;

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

public class FragmentA extends Fragment {

    // link fragment_a.xml with this java class

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_a,container,false);
    }
}

    FragmentB.java

    package com.jamesfroggatt.scrollabletabsdemo.app;

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

public class FragmentB extends Fragment {

    // link fragment_a.xml with this java class

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_b,container,false);
    }
}

    FragmentC.java

    package com.jamesfroggatt.scrollabletabsdemo.app;

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

public class FragmentC extends Fragment {

    // link fragment_a.xml with this java class

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_c,container,false);
    }
}

    activity_main.xml

    <android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/pager">


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

    fragment_a.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"
    android:background="#FFCC00">

    <TextView
        android:layout_margin="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Fragment A"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

    fragment_b.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"
    android:background="#CCFF00">

    <TextView
        android:layout_margin="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Fragment B"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

    fragment_c.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"
    android:background="#AAFF33">

    <TextView
        android:layout_margin="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Fragment C"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

    In the above, when we move away from any fragment, its STATE is not remembered. Let’s say we were doing something in fragment a, like downloading, and moved to fragment b, we will LOSE all that downloaded data.

    This is where FragmentStatePagerAdapter comes into play.

    If we change the line

    class MyAdapter extends FragmentPagerAdapter

    to

    class MyAdapter extends FragmentStatePagerAdapter

    .. this will now automatically call onSaveInstanceState so that the state of each fragment is remembered when we move away from it.

    Full tutorial on this:

    Final code for completed scrollable tabs

    To complete the scrollable tabs, only a few of the files above have been changed:

    MainActivity.java & activity_main.xml

    MainActivity.java

    package com.jamesfroggatt.scrollabletabsdemo.app;

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

public class MainActivity extends FragmentActivity {

    ViewPager viewPager=null;

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

        FragmentManager fragmentManager=getSupportFragmentManager();
        viewPager= (ViewPager) findViewById(R.id.pager);

        viewPager.setAdapter(new MyAdapter(fragmentManager));
    }
}


class MyAdapter extends FragmentStatePagerAdapter
{

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

    @Override
    public Fragment getItem(int position) {
        Fragment fragment=null;
        if (position==0){
            fragment = new FragmentA();
        }
        if (position==1){
            fragment = new FragmentB();
        }
        if (position==2){
            fragment = new FragmentC();
        }
        return fragment;
    }

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

    // to get the scroll menu working
    @Override
    public CharSequence getPageTitle(int position) {
        String title=new String();
        if (position==0){
            return "Tab 1";
        }
        if (position==1){
            return "Tab 2";
        }
        if (position==2){
            return "Tab 3";
        }
        return null;
    }
}

    activity_main.xml

    <android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/pager">

    <!-- to get the scroll menu working properly-->
<android.support.v4.view.PagerTitleStrip
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/title"
    android:layout_gravity="top"
    android:background="#33B5E5"
    android:paddingTop="4dp"
    android:paddingBottom="4dp">

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

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

    Tags: , ,

    Leave a Reply