I have the code here with tabs and It works when you select each tab but I cannot swipe to go to next tab.
Each tab has listview which has its own activity.Only thing I want is to add swipe gesture to go to next tab.How do I do that? I really appreciate any help.Thanks in Advance.
public class AndroidTabAndListView extends TabActivity {
// TabSpec Names
private static final String INBOX_SPEC = "Inbox";
private static final String OUTBOX_SPEC = "Outbox";
private static final String PROFILE_SPEC = "Profile";
ViewPager pager;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
pager = (ViewPager) findViewById(R.id.pager);
TabHost tabHost = getTabHost();
// Inbox Tab
TabSpec inboxSpec = tabHost.newTabSpec(INBOX_SPEC);
// Tab Icon
inboxSpec.setIndicator(INBOX_SPEC, getResources().getDrawable(R.drawable.icon_inbox));
Intent inboxIntent = new Intent(this, InboxActivity.class);
// Tab Content
inboxSpec.setContent(inboxIntent);
// Outbox Tab
TabSpec outboxSpec = tabHost.newTabSpec(OUTBOX_SPEC);
outboxSpec.setIndicator(OUTBOX_SPEC, getResources().getDrawable(R.drawable.icon_outbox));
Intent outboxIntent = new Intent(this, OutboxActivity.class);
outboxSpec.setContent(outboxIntent);
// Profile Tab
TabSpec profileSpec = tabHost.newTabSpec(PROFILE_SPEC);
profileSpec.setIndicator(PROFILE_SPEC, getResources().getDrawable(R.drawable.icon_profile));
Intent profileIntent = new Intent(this, ProfileActivity.class);
profileSpec.setContent(profileIntent);
// Adding all TabSpec to TabHost
tabHost.addTab(inboxSpec); // Adding Inbox tab
tabHost.addTab(outboxSpec); // Adding Outbox tab
tabHost.addTab(profileSpec); // Adding Profile tab
}
}
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="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="409dp"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>
</TabHost>
Allright I see that you are not using the ViewPager in the xml. Because I have not tried it the way you are doin it, I recommend it will be a lot easier if you do it like the following examples:
Creating Swipe Views with Tabs
Android Tab Layout with Swipeable Views
Still not useful then you can read this
Hope it Helps you. Cheers :)
Use fragments for inner pages.
Create a class that extends FragmentPagerAdapter for tab buttons.
Example :
activity_main.xml
<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="match_parent" />
AndroidTabAndListView.java
public class AndroidTabAndListView extends FragmentActivity implements ActionBar.TabListener {
TabSpecNames mAppSectionsPagerAdapter;
ViewPager mViewPager;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Create the adapter that will return a fragment for each of the three primary sections
// of the app.
mAppSectionsPagerAdapter = new TabSpecNames(getSupportFragmentManager());
// Set up the action bar.
final ActionBar actionBar = getActionBar();
// Specify that the Home/Up button should not be enabled, since there is no hierarchical
// parent.
actionBar.setHomeButtonEnabled(false);
// Specify that we will be displaying tabs in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Set up the ViewPager, attaching the adapter and setting up a listener for when the
// user swipes between sections.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mAppSectionsPagerAdapter);
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// When swiping between different app sections, select the corresponding tab.
// We can also use ActionBar.Tab#select() to do this if we have a reference to the
// Tab.
actionBar.setSelectedNavigationItem(position);
}
});
// For each of the sections in the app, add a tab to the action bar.
for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) {
// Create a tab with text corresponding to the page title defined by the adapter.
// Also specify this Activity object, which implements the TabListener interface, as the
// listener for when this tab is selected.
actionBar.addTab(
actionBar.newTab()
.setText(mAppSectionsPagerAdapter.getPageTitle(i))
.setTabListener(this));
}
}
#Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
#Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in the ViewPager.
mViewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
public static class TabSpecNames extends FragmentPagerAdapter {
public TabSpecNames(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int i) {
switch (i) {
case 0:
return new InboxFragment();
case 1:
return new OutboxFragment();
case 2:
return new ProfileFragment();
default:
break;
}
return null;
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
String sections[] = {"Inbox", "Outbox", "Profile"};
return sections[position];
}
}
}
fragment_inbox.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Inbox (99)"/>
</LinearLayout>
InboxFragment.java
public class InboxFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState)
{
View rootView = inflater.inflate(R.layout.fragment_inbox,
container, false);
return rootView;
}
}
Related
I have a MainActivity which contains a Sliding drawer for menu and a FragmentContainer to switch fragments.
I have a Fragment called History which has a layout 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:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/colorPrimary"
android:textColor="#FFFFFF"
app:pstsIndicatorColor="#FFFFFF" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tabs" />
</RelativeLayout>
And the class looks like this
public class HistoryFragment extends Fragment {
public HistoryFragment() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_history, container, false);
// Initialize the ViewPager and set an adapter
ViewPager pager = (ViewPager) view.findViewById(R.id.pager);
pager.setAdapter(new PagerAdapter(getActivity().getSupportFragmentManager()));
// Bind the tabs to the ViewPager
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) view.findViewById(R.id.tabs);
tabs.setViewPager(pager);
return view;
}
class PagerAdapter extends FragmentPagerAdapter {
private final String[] TITLES = {"Last Transaction", "History"};
public PagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
#Override
public int getCount() {
return TITLES.length;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new LastTransaction();
case 1:
return new AboutFragment();
}
return null;
}
}
}
This History page works fine the first time when it is called from the NavigationSlider menu. The history page contains two sliding tabs with two fragments. These are displayed the first time and everything works fine.
The problem happens, when they are called the second time or after that.
There is no error shown, the layout is loaded, the sliding tabs are shown, but their fragments are not shown and the sliders malfunction.
What may be the reason for this problem ?
I tried to use a different approach for implementing the sliders in fragments as per this StackOverflow answer. Still the same problem.
Thanks in advance.
replace
pager.setAdapter(new PagerAdapter(getActivity().getSupportFragmentManager()));
with
pager.setAdapter(new PagerAdapter(getActivity().getChildFragmentmanager()));
Reason:
The CHILD FragmentManager is the one that handles Fragments contained within the Fragment that it was added to.
I am facing problem with my android app and I cannot find working solution for this particular problem - I am starting to believe that it is not possible to achive what I try to do.
I want to have an app with tabs (DONE!). I want to swipe through those tabs with finger gesture (partialy done) and I want to display different items on those tabs as a ListView (partialy done). The problem is that when I populate ListView with my db data I cannot swipe through tabs any longer. It is like that because I change the content view to one of my fragments.
How can I keep swiping through tabs and populate list view? The other thing is that I want to call different select statement on each of my tabs dynamically - so user can mark something as his favourite and when he'll navigate to "favourites" tab he will find proper content.
Here is my code (I think this are the most important bits):
MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initilization
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
TabsPagerAdapter mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
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));
}
/**
* on swiping the viewpager make respective tab selected
* */
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
setContentView(R.layout.fragment_main);
myList = (ListView) findViewById(R.id.listViewFromDB);
registerForContextMenu(myList);
openDB();
myDb.populateDataBaseOnStart();
populateListViewFromDB();
registerClickCallback();
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// on tab selected
// show respected fragment view
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
Here is my ClassFragment.java:
public class FilmyFragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_filmy, container, false);
return rootView;
}
}
And Here is layout xml for main activity and fragment class:
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" />
Fragment:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView android:id="#+id/listViewFromDB"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"/>
I'm developing an application for Android and need some help implementing Tabs
I need it to be compatible with android 2.2
I started to implement Tabs but now i dont know if it was the best idea
What I want is basically:
I want to open a activity where it will have the tabs
In each of the Tab, I want to load content dinamicly, like the play store apk:
My main problem is:
I have created a AsyncTask with an ProgressDialog for each fragment to load the data and show it on the fragment, but when the fragment activity open, it initialize all the tabs and makes to load all the fragments at the same time.
I want to load the Tab content only when the Tab becomes visible, because the user may want to see only one tab, so no need to get the other Tabs
How should I do that?
Should I use TabFragments or others methods?
My current Tab activiy is:
public class Tabs2 extends FragmentActivity implements OnTabChangeListener, OnPageChangeListener{
ViewPagerAdapter pageAdapter;
private ViewPager mViewPager;
private TabHost mTabHost;
private String interID;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Infla o layout
setContentView(R.layout.tablayout);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
// Tab Initialization
initialiseTabHost();
// Fragments and ViewPager Initialization
List<Fragment> fragments = getFragments();
pageAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragments);
mViewPager.setAdapter(pageAdapter);
mViewPager.setOnPageChangeListener(Tabs2.this);
}
// Method to add a TabHost
private static void AddTab(Tabs2 activity, TabHost tabHost, TabHost.TabSpec tabSpec) {
tabSpec.setContent(activity.new MyTabFactory(activity));
tabHost.addTab(tabSpec);
}
// Manages the Tab changes, synchronizing it with Pages
public void onTabChanged(String tag) {
int pos = this.mTabHost.getCurrentTab();
this.mViewPager.setCurrentItem(pos);
}
// Manages the Page changes, synchronizing it with Tabs
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
int pos = this.mViewPager.getCurrentItem();
this.mTabHost.setCurrentTab(pos);
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
#Override
public void onPageSelected(int arg0) {
}
private List<Fragment> getFragments(){
List<Fragment> fList = new ArrayList<Fragment>();
// Put here your Fragments
fList.add(Fragment.instantiate(this, TabFragmentA.class.getName()));
fList.add(Fragment.instantiate(this, TabFragmentB.class.getName()));
fList.add(Fragment.instantiate(this, TabFragmentC.class.getName()));
return fList;
}
// Tabs Creation
private void initialiseTabHost() {
mTabHost = (TabHost) findViewById(android.R.id.tabhost);
mTabHost.setup();
// Put here your Tabs
Tabs2.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab1").setIndicator("Detalhes"));
Tabs2.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab2").setIndicator("Comentários"));
Tabs2.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab3").setIndicator("cenas"));
mTabHost.setOnTabChangedListener(this);
}
// Um simples factory que retorna View para o TabHost
class MyTabFactory implements TabContentFactory {
private final Context mContext;
public MyTabFactory(Context context) {
mContext = context;
}
public View createTabContent(String tag) {
View v = new View(mContext);
v.setMinimumWidth(0);
v.setMinimumHeight(0);
return v;
}
}
}
The ViewPagerAdatper:
public class ViewPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments;
public ViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
mFragments = fragments;
}
#Override
public Fragment getItem(int i) {
return mFragments.get(i);
}
#Override
public int getCount() {
return mFragments.size();
}
}
The XML for the Tabs activiy
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:orientation="horizontal"
android:gravity="bottom"
android:padding="0dip" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:isScrollContainer="true"
android:scrollbars="vertical" />
</LinearLayout>
</TabHost>
For each Tab I used Fragments
public class TabFragmentA extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
if (container == null) {
return null;
}
// HERE I Call the AsyncTask and return the data with the layout
return (RelativeLayout) inflater.inflate(R.layout.layout_a, container, false);
}
}
since you are using a viewpager this is how a viewpager works and for good reason. A view pager by default loads the previous, current and next tab so that the content is ready when the user gets to the tab. you cannot change the viewpager to only load one page at a time.
If you notice this is exactly how the play store works
I've been trying to create a simple Horizontal scrolling option.
I have 2 ListFragments, which I would like to scroll between.
I'm getting a "Source Not Found" error when returning the View from onCreateView function.
This is my MainActivity Class:
public class MainActivity extends FragmentActivity implements ActionBar.TabListener {
AppSectionsPagerAdapter mAppSectionsPagerAdapter;
ViewPager mViewPager;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAppSectionsPagerAdapter = new AppSectionsPagerAdapter(getSupportFragmentManager());
final ActionBar actionBar = getActionBar();
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mAppSectionsPagerAdapter);
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
});
for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) {
actionBar.addTab(
actionBar.newTab()
.setText(mAppSectionsPagerAdapter.getPageTitle(i))
.setTabListener(this));
}
}
#Override
public void onTabUnselected(ActionBar.Tab tab, android.app.FragmentTransaction fragmentTransaction) {
}
#Override
public void onTabSelected(ActionBar.Tab tab, android.app.FragmentTransaction fragmentTransaction) {
// When the given tab is selected, switch to the corresponding page in the ViewPager.
mViewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabReselected(ActionBar.Tab tab, android.app.FragmentTransaction fragmentTransaction) {
}
public static class AppSectionsPagerAdapter extends FragmentPagerAdapter {
public AppSectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
Fragment a;
#Override
public Fragment getItem(int i) {
switch (i) {
case 0:
return new FragmentA();
default:
return new FragmentB();
}
}
#Override
public int getCount() {
return 2;
}
#Override
public CharSequence getPageTitle(int position) {
return "Section " + (position + 1);
}
}
}
This is one of my ListFragment class (the second is the same but different name & layout file):
public class FragmentA extends ListFragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.favorites_layout, container, false);
updateStationsView(0);
return rootView;
}
}
updateStationView is a function that populates the List. removing it did not help, so I figured it's harmless.
The error is thrown right after the:
return rootView;
which returns to the onCreate functions of MainActivity.
When I'm changing the ListFragment to be a simple Fragment it works. I think I'm lacking some knowledge to figure this one out. I really want to use ListFragment...
Can someone please try an help ?
Many thanks for your efforts.
Adding the XML files:
activity_main.xml:
<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="match_parent" />
favorites_layout.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
I im quite sure the issue is that your custom layout for the ListFragment does not contain a ListView. These lines of code are causing the error because you need to have a ListView inside your "favourites_layout" .xml file.
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.favorites_layout, container, false);
updateStationsView(0);
return rootView;
}
ListFragment has a default layout that consists of a single list view.
However, if you desire, you can customize the fragment layout by
returning your own view hierarchy from onCreateView(LayoutInflater,
ViewGroup, Bundle). To do this, your view hierarchy must contain a
ListView object with the id "#android:id/list" (or list if it's in
code)
So your layout could for example look like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
See here for more:
http://developer.android.com/reference/android/app/ListFragment.html
I noticed with the latest version of ViewPagerIndicator, ICS style dividers are supported, I tried to follow the issue and solution, but no matter what I do I can't get the divider to show up on my options on the actionbar for the TitlePageIndicator. I added the IcsLayout as the container, put divider, showDividers, and other properties, but am still getting nothing. Here's my layout (oddly enough, if I switch the IcsLayout to the viewpager indicator one, the app crashes):
<com.actionbarsherlock.internal.widget.IcsLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.sosick.android.brink"
android:layout_width="match_parent"
android:divider="#ffffff"
android:showDividers="middle"
android:dividerPadding="8dp"
android:dividerHeight="10dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.viewpagerindicator.TitlePageIndicator
android:id="#+id/tpi_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
textColor="#color/text_light"
android:background="#drawable/ab_stacked_solid_brink"
app:topPadding="10dp"
app:footerPadding="15dp"
app:footerColor="#a4ded7"
app:footerIndicatorHeight="2dp"
app:footerIndicatorStyle="underline"
app:footerLineHeight="2dp"
app:selectedBold="false" />
<android.support.v4.view.ViewPager
android:id="#+id/vp_pages"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</com.actionbarsherlock.internal.widget.IcsLinearLayout>
You need to declare divider params in styles, rather than in layout xml.
../res/values/styles.xml:
<style name="StyledIndicators" parent="#android:style/Theme.Light">
<item name="vpiIconPageIndicatorStyle">#style/CustomIconIndicator</item>
</style>
<style name="CustomIconIndicator" parent="Widget.TabPageIndicator">
<item name="android:divider">#drawable/custom_tab_indicator_divider</item>
<item name="android:showDividers">middle</item>
<item name="android:dividerPadding">10dp</item>
</style>
In manifest for your activity:
<activity
android:name=".SampleIconsDefault"
android:label="Icons/Default"
android:theme="#style/StyledIndicators">
</activity>
Following code snippets are mainlyfrom Android Developer site. There is also a very good example app/project.
Use ViewPage as a container for your layout, e.g. res/layout/activity_main.xml:
<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="match_parent" />
Implement ABS' ActionBar.TabListener in your class, add and extend FragmentPagerAdapter or FragmentStatePagerAdapter from support library e.g.:
public class TheDesertFoxActivity extends SherlockFragmentActivity
implements ActionBar.TabListener {
private AppSectionsPagerAdapter mAppSectionsPagerAdapter;
private ViewPager mViewPager;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAppSectionsPagerAdapter = new AppSectionsPagerAdapter(getSupportFragmentManager());
// Set up action bar
final ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Set up the ViewPager, attaching the adapter
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mAppSectionsPagerAdapter);
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// When swiping between different app sections, select the corresponding tab
actionBar.setSelectedNavigationItem(position);
}
});
// For each of the sections in the app, add a tab to the action bar
for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) {
// Create a tab with text corresponding to the page title defined by the adapter.
// Also specify this Activity object, which implements the TabListener interface, as the
// listener for when this tab is selected.
actionBar.addTab(actionBar.newTab()
.setText(mAppSectionsPagerAdapter.getPageTitle(i))
.setTabListener(this));
}
}
public static class AppSectionsPagerAdapter extends FragmentPagerAdapter {
public AppSectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int i) {
switch (i) {
Fragment fragment = new MyTabsFragment();
Bundle args = new Bundle();
args.putInt(MyTabsFragment.TAB_ID, i);
fragment.setArguments(args);
return fragment;
}
}
#Override
public int getCount() {
return <YOUR_TAB_COUNT>;
}
}
public static class MyTabsFragment extends Fragment {
public static final String TAB_ID = "tab_id";
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
int layoutId = -1;
switch (getArguments(getInt(TAB_ID))) {
case 0:
layoutId = R.layout.fragment_first_tab;
break;
case 1:
layoutId = R.layout.fragment_second_tab;
break;
...
...
...
default:
layoutId = R.layout.fragment_default_tab;
}
View rootView = inflater.inflate(layoutId, container, false);
return rootView;
}
}
}
That's it. Dividers will be put by ViewPager for you. You do not have to add them yourself.