So recently I needed to implement action bar tabs that would swap out the current fragment with a new fragment. Despite hours of intensive searching I was unable to find a clear solution, so I thought I would present how I solved the problem here. Two of the fragments contained list views, which turned out to be a major complicating factor.
First create an Activity to which you want to attach the fragments. In the XML file for that Activity add a linear layout like so:
<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"
tools:context=".WoodenSideProject" >
<LinearLayout
android:id="#+id/fragment_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
Do not add anything else to the XML file. Not even the tab host that is preloaded with Eclipse.
Next create your fragments. First build the UI for your fragment how you want it using the fragment's XML file. I will show how to create a fragment with a List View:
public class Fragment1Name extends Fragment
{
public static String TAG="DirectionsFragment";
private String[] list_items = {"Put the list of Strings you want here"};
ListView lView1;
/*#Override
public void onActivityCreated(Bundle savedInstanceState)
{
super.onActivityCreated(savedInstanceState);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_1, list_items);
setListAdapter(adapter);
}*/
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_XML_title, container, false);
createListView(view);
// Inflate the layout for this fragment
return view;
}
private void createListView(View view)
{
lView1 = (ListView) view.findViewById(R.id.ListViewID);
//Set option as Multiple Choice. So that user can able to select more the one option from list
lView1.setAdapter(new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_1, list_items));
}
}
Some people suggest extending ListFragment for a fragment that uses a List View. My experience has been that is more trouble than it's worth.
Set up the Activity's java file as follows:
public class ActivityName extends FragmentActivity {
public static Context appContext;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_project);
ActionBar actionBar = getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
setTitle("WoodenSideProject");
ActionBar.Tab tab1 = actionBar.newTab().setText("Tab1");
ActionBar.Tab tab2 = actionBar.newTab().setText("Tab2");
ActionBar.Tab tab3 = actionBar.newTab().setText("Tab3");
Fragment Fragment1Name = new Fragment1Name();
Fragment Fragment2Name = new Fragment2Name();
Fragment Fragment3Name = new Fragment3Name();
tab1.setTabListener(new MyTabsListener(Fragment1Name));
tab2.setTabListener(new MyTabsListener(Fragment2Name));
tab3.setTabListener(new MyTabsListener(Fragment3Name));
actionBar.addTab(tab1);
actionBar.addTab(tab2);
actionBar.addTab(tab3);
}
Within the same Activity create the following class:
class MyTabsListener implements ActionBar.TabListener {
public Fragment fragment;
public MyTabsListener(Fragment fragment) {
this.fragment = fragment;
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
//do what you want when tab is reselected, I do nothing
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
ft.replace(R.id.fragment_placeholder, fragment);
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
ft.remove(fragment);
}
}
I don't know if others have had as much trouble as I implementing action bar tabs with fragments, but if they are I hope this helps. Any suggestions for better implementations would be greatly appreciated.
Related
I am trying to understand Android fragments and navigation, but there is something I just don't know how to do. I have created an app, with a MainActivity containing a viewPager :
public class MainActivity extends FragmentActivity implements TabListener
{
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private ActionBar actionBar;
private String[] tabNames = {"Tab 1", "Tab 2", "Tab 3"};
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.pager);
actionBar = getActionBar();
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
for(int i = 0 ; i < tabNames.length ; i++)
actionBar.addTab(actionBar.newTab().setText(tabNames[i]).setTabListener(this));
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft)
{
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {}
}
Here is TabsPagerAdapter :
public class TabsPagerAdapter extends FragmentPagerAdapter
{
public TabsPagerAdapter(FragmentManager fm)
{
super(fm);
}
#Override
public Fragment getItem(int index)
{
if(index == 0) return new FirstFragment();
else if(index == 1) return new SecondFragment();
else return new ThirdFragment();
}
#Override
public int getCount()
{
return 3;
}
}
And my FirstFragment is a list so it extends ListFragment. Here is what it looks like :
Now I want to go to another view if I click an item. Before I used to do it like this in apps without action bar and tabs :
Intent i = new Intent(this.getActivity().getApplicationContext(), MyNewActivity.class);
startActivity(i);
But now when I do this it doesn't display the action bar on top of the screen anymore, and I also want to keep the navigation state on this tab, if I go to another tab and then come back. What should I do?
Thanks for your help.
It is better to let each individual fragment manage its own menu items (actionbar) so you have to call setHasMenuOptions(true) in each fragment that you want to have menu options in. Get a reference to the actionbar in onActivityCreated() and configure your actionbar how you want it there. You will also have to override the oncreateoptionsmenu and onOptionsItemSelected in the fragment to handle menu item clicks.
Also using the view pager and tabs you want to make each tab a fragment. I don't know about making each tab an activity, and I don't even think that is possible, and if you are doing that then that is your problem. I don't see that from your code, and that is good.
Each tab needs to be a Fragment, so convert all of your activities into fragments and then use the supportFragmentManager to dynamically add and replace fragments to your framelayout resource, or override getItem and return the correct fragment as needed.
I put some tabs in the action bar with the following code. Everything looks fine. There are 5 tabs here. I coded each tab to open a new layout. But the problem is only the first tab works fine. Second tab opens the fifth layout and third, fouth, fifth tabs are not working. When I remove the fifth tab, then second tab opens the fourth layout and, other buttons are not woking, I couldn't silve this problem. Please help me. Thank you!
Here is my codings,
main class file;
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
android.app.ActionBar actionbar = getActionBar();
actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// show the given tab
}
public void onTabUnselected(ActionBar.Tab tab,
FragmentTransaction ft) {
// hide the given tab
}
public void onTabReselected(ActionBar.Tab tab,
FragmentTransaction ft) {
// probably ignore this event
}
};
ActionBar.Tab baby = actionbar.newTab().setText("Baby")
.setTabListener(tabListener);
ActionBar.Tab books = actionbar.newTab().setText("Books")
.setTabListener(tabListener);
ActionBar.Tab electronics = actionbar.newTab().setText("Electronics")
.setTabListener(tabListener);
ActionBar.Tab health = actionbar.newTab().setText("Health and Beauty")
.setTabListener(tabListener);
ActionBar.Tab sports = actionbar.newTab().setText("Sports")
.setTabListener(tabListener);
Fragment babyFragment = new Baby();
Fragment booksFragment = new Books();
Fragment electronicsFragment = new Electronics();
Fragment healthFragment = new Health();
//Fragment sportsFragment = new Sports();
baby.setTabListener(new MyTabsListener(babyFragment));
books.setTabListener(new MyTabsListener(booksFragment));
books.setTabListener(new MyTabsListener(electronicsFragment));
books.setTabListener(new MyTabsListener(healthFragment));
//books.setTabListener(new MyTabsListener(sportsFragment));
actionbar.addTab(baby);
actionbar.addTab(books);
actionbar.addTab(electronics);
actionbar.addTab(health);
actionbar.addTab(sports);
}
class MyTabsListener implements ActionBar.TabListener {
public Fragment fragment;
public MyTabsListener(Fragment fragment) {
this.fragment = fragment;
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
ft.replace(R.id.fragment_container, fragment);
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
ft.remove(fragment);
}
}
every other other java file looks like this;
public class Baby extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.baby, container, false);
}
}
main xml file;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_gravity="center">
<LinearLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
</LinearLayout>
Pleease help me to solve this problem.
The error seems to be here:
baby.setTabListener(new MyTabsListener(babyFragment)); // OK
books.setTabListener(new MyTabsListener(booksFragment)); // OK
books.setTabListener(new MyTabsListener(electronicsFragment)); // !!
books.setTabListener(new MyTabsListener(healthFragment)); // !!
You are setting the different listeners to the same tab (that's why the "books" shows the "health" fragment, and the others do nothing).
I've done stuff like this before and this is a super simple example but I can't seem to get it working using actionbarsherlock v4.1.
This is the main activity
public class VanityActivity extends SherlockFragmentActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (savedInstanceState != null) {
//restore
}
com.actionbarsherlock.app.ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.setHomeButtonEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
com.actionbarsherlock.app.ActionBar.Tab tab1 = actionBar.newTab();
tab1.setText("Website");
tab1.setTabListener(new HeaderTabListener(getApplicationContext()));
tab1.setTag(1);
actionBar.addTab(tab1);
com.actionbarsherlock.app.ActionBar.Tab tab2 = actionBar.newTab();
tab2.setText("Portfolio");
tab2.setTabListener(new HeaderTabListener(getApplicationContext()));
tab2.setTag(2);
actionBar.addTab(tab2);
com.actionbarsherlock.app.ActionBar.Tab tab3 = actionBar.newTab();
tab3.setText("Team");
tab3.setTabListener(new HeaderTabListener(getApplicationContext()));
tab3.setTag(3);
actionBar.addTab(tab3);
}
}
And my HeaderTabListener class:
public class HeaderTabListener implements
com.actionbarsherlock.app.ActionBar.TabListener {
private Context context;
public HeaderTabListener(Context context){
this.context = context;
}
#Override
public void onTabSelected(com.actionbarsherlock.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
int i=((Integer)tab.getTag()).intValue();
if(tab.getPosition()==0){
ft.replace(android.R.id.content, CompanyFragment.newInstance(i));
}else if(tab.getPosition()==1){
ft.replace(android.R.id.content, PortfolioFragment.newInstance(i));
}
}
#Override
public void onTabUnselected(com.actionbarsherlock.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
Log.v("Tab selected", tab.getText().toString());
}
#Override
public void onTabReselected(com.actionbarsherlock.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
Log.v("Tab selected2", tab.getText().toString());
}
}
And finally one of the fragments (both fragments are the same but the text in each layout is different)
public class PortfolioFragment extends SherlockFragment {
private static final String KEY_POSITION="position";
private static final String KEY_TEXT="text";
static PortfolioFragment newInstance(int position) {
PortfolioFragment frag=new PortfolioFragment();
Bundle args=new Bundle();
args.putInt(KEY_POSITION, position);
frag.setArguments(args);
return(frag);
}
#Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState) {
View result=inflater.inflate(R.layout.fragment_portfolio, container, false);
int position=getArguments().getInt(KEY_POSITION, -1);
return(result);
}
}
So when it first loads the the tabs are all displayed correctly, the first one his highlighted and the text in CompanyFragment layout displays. But then I am unable to click any of the other tabs to change the content and my logs inside of onTabSelected just never gets called. Any thoughts? Thanks for reading.
First off, let me tell you that I have no experience with ActionBarSherlock. I looked at your code to get a few ideas for my application. Seeing as it hasn't been answered since you posted it a few month ago, I would like to share my first impression.
As far as I know, ActionBarSherlock exposes the same functionality as the most recent Android APIs. Therefore, I do think that you are missing a simple method call. You would need to call commit() (Android Developer Guide reference) after you replace the fragment. Therefore, change the line, and all similar lines from;
ft.replace(android.R.id.content, PortfolioFragment.newInstance(i));
to
ft.replace(android.R.id.content, PortfolioFragment.newInstance(i)).commit();.
I hope this will solve your problem although I do realise you state that the ònTabSelected()` method is never called. Without debugging the difference between the problems would, however, seem transparent.
I am trying to create a scrollable tabs using fragment.
Tabs are showing and scrolling also. But the problem is the tab content is not showing.
I am using fragments to show the contents. I am new in this topic : fragment. Am I missing anything in this code?
Please help me.
public class SrollableTab extends Activity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
ActionBar bar = getActionBar();
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
bar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
bar.addTab(createTab("Tab 1"));
bar.addTab(createTab("Tab 2"));
bar.addTab(createTab("Tab 3"));
bar.addTab(createTab("Tab 4"));
bar.addTab(createTab("Tab 5"));
bar.addTab(createTab("Tab 6"));
if (savedInstanceState != null) {
bar.setSelectedNavigationItem(savedInstanceState.getInt("tab", 0));
}
}
public Tab createTab(String tabTitle)
{
ActionBar bar = getActionBar();
Tab tab = bar.newTab().setText(tabTitle).setTabListener(new TabFragment());
return tab;
}
class TabFragment extends Fragment implements TabListener
{
#Override
public void onCreate(Bundle fragmentState)
{
super.onCreate(fragmentState);
}
#Override
public View onCreateView(LayoutInflater inflator, ViewGroup container, Bundle savedState)
{
View view = inflator.inflate(R.layout.tab_content, container, false);
TextView t = (TextView)view.findViewById(R.id.txtTab);
t.setText("tab content");
return view;
}
#Override
public void onActivityCreated(Bundle savedState)
{
super.onActivityCreated(savedState);
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
}
}
tab_content.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"
android:background="#ffffff" >
<TextView android:id="#+id/txtTab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"
android:textColor="#ff0000"/>
</LinearLayout>
This may be old but found my own solution on this.
I've use PagerSlidingTabStrip for a while now until I start using the new material TabLayout. Both works on Activity, but not on Fragments. This are some discussion about the bug on fragments.
The fix I've come up with is, on settings viewpager's adater (usually extended with FragmentPagerAdapter) on its constructor parameter it needs FragmentManager, instead of using the activity's FragmentManager use the fragment's one instead which is getChildFragmentManager().
That fix it. Android bugs still annoys me though.
Cheers
I am wondering if this can be done. Basically I have a layout with 2 fragments in it that I use for most of my tabs but on 2 of the tabs I want to add a couple more fragments to display more things. Is it possible to change the content view to a different layout when changing tabs?
If that cant be done I thought about creating a layout with all the fragment parts that I would need and just changing the layouts of the fragments so the ones I dont use wont "show". I dont mean using FragmentTransaction.hide() because I want the fragments to fill the screen when others are not used. Would that be a bad idea or is there an easier way to do what I want?
here is my code for the activity and tabs
public class Tabs extends Activity{
long deleteID;
#Override
public void onCreate(Bundle create){
super.onCreate(create);
setContentView(R.layout.main_layout);
createTabs();
ActionBar bar = getActionBar();
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
bar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
bar.setDisplayHomeAsUpEnabled(true);
if(create != null){
bar.setSelectedNavigationItem(create.getInt("Home",0));
}
}
I also add tabs a whatnot but thats not important
this is the actionbar subclass
private class TabListener implements ActionBar.TabListener{
TabContent mFragment;
public TabListener(TabContent fragment) {
mFragment = fragment;
}
#Override
public void onTabReselected(Tab tab, android.app.FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, android.app.FragmentTransaction ft) {
ListFragment newListFragment = new BowlersListFragment();
Fragment newFragment = new BowlerEntryFrag();
ft = getFragmentManager().beginTransaction();
ft.replace(R.id.frameOne, newListFragment);
ft.replace(R.id.frameTwo, newFragment);
ft.addToBackStack(null);
ft.commit();
}
#Override
public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {
if(ft != null){
ft.remove(mFragment);
}
}
}
}
I tried doing Activity.setContentView(r.layout.newView) but that won't work
I had similar problem, so implemented it like this. I have a mainActivity that holds and creates the tabs. That activity uses a layout with one fragment container, main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
In my activity I have the following code for creating the tabs and fragments:
historyTab = actionbar.newTab().setText("History");
historyTab.setTabListener(new MyTabsListener(new HistoryFragment()));
actionbar.addTab(historyTab);
My tabListener looks something like this:
private class MyTabsListener implements ActionBar.TabListener {
public Fragment fragment;
private boolean isFragmentAdded = false;
public MyTabsListener(Fragment fragment) {
this.fragment = fragment;
}
#Override
public void onTabSelected(Tab tab, android.app.FragmentTransaction ft) {
FragmentManager fragMgr = getSupportFragmentManager();
FragmentTransaction xaction = fragMgr.beginTransaction();
if (fragment instanceof HistoryFragment) {
fragment = new HistoryFragment();
xaction.add(R.id.fragment_container, fragment);
} else if (fragment instanceof .. some other fragment..) {
fragment = new .. some other fragment();
xaction.add(R.id.fragment_container, fragment);
}
}
xaction.commit();
}
#Override
public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {
FragmentManager fragMgr = getSupportFragmentManager();
FragmentTransaction xaction;
xaction = fragMgr.beginTransaction();
Fragment fragment = fragMgr.findFragmentById(R.id.fragment_container);
xaction.remove(fragment);
xaction.commit();
}
}
The layout for the History fragment in my example, can be anything, even a layout that contains two fragments, or as much you need. Just be careful, and in onCreateview method in the fragment, use this:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
savedInstanceState) {
if (view == null) { // this line is very important!
view = inflater.inflate(R.layout.history_fragment_layout, container, false);
listView = (ListView) view.findViewById(R.id.historyList);
}
return view;
}
Hope that helps!:)