More fun with actionbars with Xamarin
- February 6, 2016
Ok so in prior posts I talked about adding drawer layout to my android project. Today, I am going to add an actionbar to the project. Starting with the end result of my first attempt see below. I have an activity with tabs on each view.
This is how that was accomplished. Within the OnCreate(Bundle bundle) method of the Activity
this.ActionBar.NavigationMode = ActionBarNavigationMode.Tabs; AddTab("Tab 1", Resource.Drawable.ic_tab_white, new SampleTabFragment()); AddTab("Tab 2", Resource.Drawable.ic_tab_white, new SampleTabFragment2()); if (bundle != null) this.ActionBar.SelectTab(this.ActionBar.GetTabAt(bundle.GetInt("tab")));
Adding method AddTab
void AddTab(string tabText, int iconResourceId, Fragment view) { var tab = this.ActionBar.NewTab(); tab.SetText(tabText); tab.SetIcon(Resource.Drawable.ic_tab_white); // must set event handler before adding tab tab.TabSelected += delegate (object sender, Android.App.ActionBar.TabEventArgs e) { var fragment = this.FragmentManager.FindFragmentById(Resource.Id.frameLayout); if (fragment != null) e.FragmentTransaction.Remove(fragment); e.FragmentTransaction.Add(Resource.Id.frameLayout, view); }; tab.TabUnselected += delegate (object sender, Android.App.ActionBar.TabEventArgs e) { e.FragmentTransaction.Remove(view); }; this.ActionBar.AddTab(tab); }
Adding fragment classes for the end target for selecting a tab
public class SampleTabFragment : Fragment { public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { base.OnCreateView(inflater, container, savedInstanceState); var view = inflater.Inflate(Resource.Layout.Tab, container, false); var sampleTextView = view.FindViewById<TextView>(Resource.Id.sampleTextView); sampleTextView.Text = "sample fragment text"; return view; } } public class SampleTabFragment2 : Fragment { public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { base.OnCreateView(inflater, container, savedInstanceState); var view = inflater.Inflate(Resource.Layout.Tab, container, false); var sampleTextView = view.FindViewById<TextView>(Resource.Id.sampleTextView); sampleTextView.Text = "sample fragment text 2"; return view; } }
When a user selects a tab, we have them hooked up to show the respective fragment. I also noticed that the code within the TabSelected event could be replaced by the following FragmentManager code
tab.TabSelected += delegate (object sender, Android.App.ActionBar.TabEventArgs e) { //var fragment = this.FragmentManager.FindFragmentById(Resource.Id.frameLayout); //if (fragment != null) //e.FragmentTransaction.Remove(fragment); //e.FragmentTransaction.Add(Resource.Id.frameLayout, view); base.FragmentManager.BeginTransaction().Replace(Resource.Id.frameLayout, view).Commit(
};
While the above works to show tabs in my sample application this is not really what I am looking for. The following guide shows the different aspects of the ActionBar. In our above example we were working with Tab Navigation. Ideally, what I am looking for is how to get my tabs where the action buttons are shown.