Viewpager indicator Tabs

Question

Hey guys i am trying to create a view pager indicator like google playstore tabs and i following this example

Git Example

But for some reason it gives me a null pointer exception.

I have an activity called NewOrder that extends Activity and on setContentView i have the below layout

My xml layout is:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip" />

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

I have created an Adapter that i use to create swipeable tabs.

My Adapter:

public class TabsPagerAdapter extends FragmentPagerAdapter {

    private final String[] TITLES = { "Coffees", "Sweets", "Snacks", "Drinks" };

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

    @Override
    public Fragment getItem(int i) {
        switch (i) {
            case 0:
                return new CoffeesFragment();
            case 1:
                return new SweetsFragment();
            case 2:
                return new SnacksFragment();
            case 3:
                return new DrinksFragment();
        }
        return null;
    }

    @Override
    public int getCount() {
        return TITLES.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return TITLES[position];
    }
}

For Each fragment that i return i have a separate Fragment with different layout.

Now the thing is that i use

<com.astuetz.PagerSlidingTabStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dip" />

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

should i place them on the layout of each fragment or in the parent activity layout??

should i have them like this??

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:descendantFocusability="beforeDescendants"
    android:focusableInTouchMode="true"
    android:layout_height="match_parent"
    tools:context="com.example.kostas.fragments.CoffeesFragment">

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip" />

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

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Search..."
            android:id="@+id/searchListCoffees" />

        <ListView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/coffesListView" />
    </LinearLayout>
</RelativeLayout>

And here is where i setup the tabs

public class NewOrder extends FragmentActivity implements ActionBar.TabListener{

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private PagerSlidingTabStrip tabPager;
    private ActionBar actionBar;

    private String[] tabs = { "Coffees", "Sweets", "Snacks", "Drinks" };

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

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(mAdapter);
        tabPager = (PagerSlidingTabStrip)findViewById(R.id.tabs);
        tabPager.setViewPager(viewPager);
        actionBar.setHomeButtonEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }
        ViewPager.SimpleOnPageChangeListener mListener = new ViewPager.SimpleOnPageChangeListener(){
            @Override
            public void onPageSelected(int position) {
                actionBar.setSelectedNavigationItem(position);
            }
        };
        viewPager.setOnPageChangeListener(mListener);

    }

    @Override
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
        viewPager.setCurrentItem(tab.getPosition());

    }

    @Override
    public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {

    }

    @Override
    public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {

    }
}

I am doing everything that the example says and when i run the activity it crashes providing me with this error:

Process: com.example.kostas.ordertakingsystem, PID: 1195
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.kostas.ordertakingsystem/com.example.kostas.ordertakingsystem.NewOrder}: java.lang.NullPointerException
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2195)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2245)
            at android.app.ActivityThread.access$800(ActivityThread.java:135)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
            at android.os.Handler.dispatchMessage(Handler.java:102)
            at android.os.Looper.loop(Looper.java:136)
            at android.app.ActivityThread.main(ActivityThread.java:5017)
            at java.lang.reflect.Method.invokeNative(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:515)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:779)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:595)
            at dalvik.system.NativeStart.main(Native Method)
     Caused by: java.lang.NullPointerException
            at com.example.kostas.ordertakingsystem.NewOrder.onCreate(NewOrder.java:38)
            at android.app.Activity.performCreate(Activity.java:5231)
            at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2159)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2245)
            at android.app.ActivityThread.access$800(ActivityThread.java:135)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
            at android.os.Handler.dispatchMessage(Handler.java:102)
            at android.os.Looper.loop(Looper.java:136)
            at android.app.ActivityThread.main(ActivityThread.java:5017)
            at java.lang.reflect.Method.invokeNative(Native Method)

any ideas?? i know that it may be a duplicate question but i have not found a way to implement it correctly yet.

I would appreciate any help. Thanks in advance.

Answer 1

try this， https://github.com/hackware1993/MagicIndicator，A powerful and extensible ViewPager indicator framework.