swipe tab vs scroll tab android

Question

I need to use tabs on my app , I may need 4 to 7 tabs on my fragmentActivity . I heard swipe tabs are best suited for displaying 3 or fewer tabs . I've already use them in another app but the number of tabs was 3 . I don't know if it's true or not but they worked perfect on that app . I need to make something like Google Play Store app , as you can see there are lots of tabs , what are those tabs ?

I don't need to have any communication between these tabs .

What is the best tab to use when I have 4 to 7 tabs ?
I need to run the app on older devices like 2.3+

thanks you

Answer 1

It is better to use scroll tabs in your case.

Use fragment class from support.v4.app lib,this will enable you to use scroll tabs with devices older than API level 11.

For using support lib,include it in dependencies in builf.gradle file.

Also extend adapter with FragmentStatePagerAdapter instead of FragmentPagerAdapter to store the instance before it getting destroyed.

Here is an example code snippet

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

public class MainActivity extends FragmentActivity {

ViewPager pager = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    pager = (ViewPager) findViewById(R.id.pager);
    android.support.v4.app.FragmentManager manager = getSupportFragmentManager();
    pager.setAdapter(new MyAdapter(manager));

}


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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

public class MyAdapter extends FragmentStatePagerAdapter{

    public MyAdapter(android.support.v4.app.FragmentManager fm) {
        super(fm);
    }

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

    @Override
    public int getCount() {
        return 3;
    }
    public CharSequence getPageTitle(int i){
        String title = new String();
        if(i==0){
           title = "FRAG1";
        }
        if(i==1){
            title = "FRAG2";
        }
        if(i==2){
            title = "FRAG3";
        }
        return title;
    }
}

}

Answer 2

Google Play store app uses Scrolling Tabs. Here's an example:

MainActivity.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends ActionBarActivity {
    // used ActionBarActivity from v7 support library, 
    // for backward compatibility 

    private ViewPager viewPager;
    private MyPagerAdapter adapter;

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

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        adapter = new MyPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(adapter);
    }

    private static class MyPagerAdapter extends FragmentPagerAdapter {
        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int arg0) {
            // each page corresponds to a new fragment
            // I'll return the same fragment for now
            return new MyFragment();
        }

        @Override
        public int getCount() {
            // return no of pages
            return 5;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // return the page title
            return "Tab " + position;
        }
    }

    public static class MyFragment extends Fragment {
        public MyFragment() {
        }

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

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MergeRootFrame" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#33b5e5"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:textColor="#fff" />
    </android.support.v4.view.ViewPager>

</FrameLayout>

fragment_main.xml is just the hello world fragment. You will need to customize the PagerTitleStrip to make it look like a tab. For that I really love this library.

Hope this helps :)