Android layout ActionbarSherlock Tabs + ViewPagerI

Question

I want to make a layout similar to this picture given below:

What I have tried so for is

1. Included Sherlock library
2. included Viewpage Indicator Library
3. Created project using "Fixed Tabs + swipe navigation type"
4. tested up to android 2.1 froyo to 4.4 kitkat without any crash

Now work to do

As you can see in the above image I want 3 action-bar tabs + Overview tab should contain 4 other screens with certain views. they should change in on swipe event

And all other tabs should contain a single separate fragment in it.

Answer 1

Well I have done it. Yeahhhssss :P

Ohk here what i done

Here is my MainActivity extendind SherlockFragmentActivity

import java.util.ArrayList;

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.Tab;
import com.actionbarsherlock.app.SherlockFragment;
import com.actionbarsherlock.app.SherlockFragmentActivity;
import com.actionbarsherlock.view.Menu;

public class MainActivity extends SherlockFragmentActivity {


private ArrayList<Class> classes = new ArrayList<Class>();

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

    classes.add(OverView.class);
    classes.add(LifeStyle.class);
    classes.add(RealState.class);

    // Set up the action bar.
    final com.actionbarsherlock.app.ActionBar actionBar = getSupportActionBar();


    actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayShowTitleEnabled(false);

    Tab tab = null;

    for (int i = 0; i < classes.size(); i++) {

        tab = actionBar
                .newTab()
                .setText(
                        getResources().getStringArray(R.array.tabs_names)[i])
                .setTabListener(
                        new TabListener<SherlockFragment>(this, "Tab" + i,
                                (Class<SherlockFragment>) classes.get(i)));
        actionBar.addTab(tab);
    }
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getSupportMenuInflater().inflate(R.menu.main, menu);
    return true;
}

public static class TabListener<T extends SherlockFragment> implements
        ActionBar.TabListener {
    private SherlockFragment mFragment;
    private final SherlockFragmentActivity mActivity;
    private final String mTag;
    private final Class<T> mClass;

    /**
     * Constructor used each time a new tab is created.
     * 
     * @param activity
     *            The host Activity, used to instantiate the fragment
     * @param tag
     *            The identifier tag for the fragment
     * @param clz
     *            The fragment's Class, used to instantiate the fragment
     */
    public TabListener(SherlockFragmentActivity activity, String tag,
            Class<T> clz) {
        mActivity = activity;
        mTag = tag;
        mClass = clz;
    }

    /* The following are each of the ActionBar.TabListener callbacks */

    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // Check if the fragment is already initialized
        if (mFragment == null) {
            // If not, instantiate and add it to the activity
            mFragment = (SherlockFragment) SherlockFragment.instantiate(
                    mActivity, mClass.getName());
            ft.add(android.R.id.content, mFragment, mTag);
        } else {
            // If it exists, simply attach it in order to show it
            ft.attach(mFragment);
        }
    }

    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if (mFragment != null) {
            // Detach the fragment, because another one is being attached
            ft.detach(mFragment);
        }
    }

    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // User selected the already selected tab. Usually do nothing.
    }
}

}

this will set my 3 tabs on the actionbar.

now the second proplem is showing multiple fragments in first tabs and showing the page indicator. I have achieved this using the view pager and view page indicator.

here is my overview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="10dip" />

</LinearLayout>

and here is my Overview.java file which inflates the above xml file like this

import android.content.Context;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.actionbarsherlock.app.SherlockFragment;
import com.viewpagerindicator.CirclePageIndicator;

public class OverView extends SherlockFragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.overview_fragment, container, false);

    MyPagerAdapter adapter = new MyPagerAdapter();
    ViewPager myPager = (ViewPager) rootView.findViewById(R.id.view_pager);
    myPager.setAdapter(adapter);
    myPager.setCurrentItem(0);
    CirclePageIndicator indicator = (CirclePageIndicator) rootView
            .findViewById(R.id.indicator);
    indicator.setViewPager(myPager);

    return rootView;
}

private class MyPagerAdapter extends PagerAdapter {

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

    @Override
    public Object instantiateItem(View collection, int position) {

        LayoutInflater inflater = (LayoutInflater) collection.getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = null;

        switch (position) {
        case 0:

            view = inflater.inflate(R.layout.overview_1st, null);

            break;

        case 1:

            view = inflater.inflate(R.layout.overview_2nd, null);

            break;

        case 2:

            view = inflater.inflate(R.layout.overview_3rd, null);

            break;

        default:

            view = inflater.inflate(R.layout.overview_3rd, null);

            break;
        }

        ((ViewPager) collection).addView(view, 0);

        return view;
    }

    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView((View) arg2);

    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == ((View) arg1);

    }

}

}

and here is the output

also make sure you have inluded the libraries