Multiple Activities under single tab using PagerAdapter in android (Swipeable tabs)

Question

How can I make a single tab with multiple activities? So far, I've developed one little demo(as per below image).

Here, there is only one activity in "Check In" tab. Now, suppose I click on a button within "Check In" tab, second activity should prompt under the same "Check In" tab. Below is my code using pager adapter.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <HorizontalScrollView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
              />
        </HorizontalScrollView>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <FrameLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <FrameLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <FrameLayout
                android:id="@+id/tab3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <FrameLayout
                android:id="@+id/tab4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <FrameLayout
                android:id="@+id/tab5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />
        </FrameLayout>

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

</TabHost>

MainActivity.java

public class MainActivity extends Activity implements OnTabChangeListener, OnPageChangeListener{  
    private TabHost tabHost;  
    public static ViewPager pager; 
    HorizontalScrollView mHorizontalScroll;
 @Override  
 public void onCreate(Bundle savedInstanceState) {  
   super.onCreate(savedInstanceState);  
   setContentView(R.layout.activity_main);  
   tabHost = (TabHost)findViewById(android.R.id.tabhost);  
   pager = (ViewPager) findViewById(R.id.pager);
   mHorizontalScroll = (HorizontalScrollView)findViewById(R.id.scroll);

   tabHost.setup();  
   TabWidget tabwidget=tabHost.getTabWidget();

   TabSpec spec = tabHost.newTabSpec("tab1");  
   spec.setContent(R.id.tab1);  
   spec.setIndicator("Check In");  
   tabHost.addTab(spec);  

   spec = tabHost.newTabSpec("tab2");  
   spec.setContent(R.id.tab2);  
   spec.setIndicator("Buddies");  
   tabHost.addTab(spec);  

   spec = tabHost.newTabSpec("tab3");  
   spec.setContent(R.id.tab3);  
   spec.setIndicator("Recommendation");  
   tabHost.addTab(spec); 

   spec = tabHost.newTabSpec("tab4");  
   spec.setContent(R.id.tab4);  
   spec.setIndicator("Feed");  
   tabHost.addTab(spec); 

   spec = tabHost.newTabSpec("tab5");  
   spec.setContent(R.id.tab5);  
   spec.setIndicator("Last");  
   tabHost.addTab(spec);

   pager.setAdapter(new MyPagerAdapter(this));  
   pager.setOnPageChangeListener(this); 
   tabHost.setOnTabChangedListener(this);  

 }  
    @Override  
    public void onTabChanged(String tabId)
    {  
         int pageNumber = 0;  
         if(tabId.equals("tab1"))
         {  
              pageNumber = 0;  
         }

         else if(tabId.equals("tab2"))
         {  
              pageNumber = 1;

         }

         else if(tabId.equals("tab3"))
         {  
              pageNumber = 2;  

         }

         else if(tabId.equals("tab4"))
         {  
              pageNumber = 3;  

         }

         else if(tabId.equals("tab5"))
         {  
              pageNumber = 4;  
         }
         else
         {  
              pageNumber = 0;  
         }  

         pager.setCurrentItem(pageNumber);

    } 

    @Override  
    public void onPageSelected(int pageNumber) {  
        tabHost.setCurrentTab(pageNumber);


    }
    @Override
    public void onPageScrollStateChanged(int arg0) {

    }


    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        View tabView = tabHost.getTabWidget().getChildAt(position);

        if (tabView != null)
        {
            final int width = mHorizontalScroll.getWidth();
            final int scrollPos = tabView.getLeft() - (width - tabView.getWidth()) / 2;
            mHorizontalScroll.scrollTo(scrollPos, 0);

        } else {
            mHorizontalScroll.scrollBy(positionOffsetPixels, 0);
        }
    }

    public void switchTabBar(int tab) {
        tabHost.setCurrentTab(tab); 


    }
    }

MyPagerAdaper.java

public class MyPagerAdapter extends PagerAdapter  {
    private Context ctx;


    public MyPagerAdapter(Context ctx) {
        this.ctx = ctx;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View parent_view = null;
        ctx = container.getContext();
        if (position ==0)
        {
            parent_view = getViewForPageOne();

            ((ViewPager) container).addView(parent_view, 0);
            return parent_view;
        }

        else if (position == 1) 
        {
            parent_view = getViewForPageTwo();
            ((ViewPager) container).addView(parent_view, 0);
            return parent_view;
        }

        else
        {
            TextView tView = new TextView(ctx);
            position++;
            tView.setText("Page number: " + position);
            tView.setTextColor(Color.RED);
            tView.setTextSize(20);
            container.addView(tView);

            return tView;
        }

    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return (view == object);
    }

    @Override
    public void destroyItem(View container, int position, Object object) {
        ((ViewPager) container).removeView((View) object);
    }

    private View getViewForPageOne()
    {
        final LayoutInflater inflater = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View v = inflater.inflate(R.layout.first, null);

        Button btn = (Button)v.findViewById(R.id.first);
        btn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                Toast.makeText(v.getContext(), "Hello", 2000).show();
                MainActivity.pager.setCurrentItem(1);


            }
        });
         return v;
    }

    private View getViewForPageTwo(){
        LayoutInflater inflater = (LayoutInflater)ctx.getSystemService
                  (Context.LAYOUT_INFLATER_SERVICE);
        View v = inflater.inflate(R.layout.second, null);

         return v;
    }

}

I'm developing my app on api level 2.2. I also want my tabs swipe able, I did it. Also, I came across the topic of Fragments which require api level 11. I'm confused what to do to overcome this issue. What needs to be done? Or is there any better solution to make multiple activities under single tab?

Answer 1

You need to use Fragment for this purpose..

And you can replace the fragment on button click with :

   FragmentManager fm = getSupportFragmentManager();
   FragmentTransaction ft = fm.beginTransaction();
   ft.add(R.id.rootNode, mFragment);
   ft.commit();

EDIT:

Please refer this to implement fragment(supported in all API) .

Answer 2

You cannot use multiple activities under single tab/activity. You can use fragments at android version 2.2 with support package. Use a viewPager and fragments instead of a tabHost.
http://developer.android.com/training/animation/screen-slide.html
Android.app Fragments vs. android.support.v4.app using ViewPager?
Edit: Here you can find what you are looking for
Android - Google Play like tabs