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.
![]()