Xamarin.Android NavigationTabStrip - xamarin.android

Question

I want to implement the NavigationTabStrip (https://github.com/martijn00/NavigationTabStripXamarin) to my app, but I don't know how. I've seen also the original project, but I'm new in this world. Has anyone a project to help me to implement this? Or is there anyone that knows how to do that? I'm trying to create a TabLayout in material design.

Answer 1

The Easiest way to do it would be like this :
http://camposha.info/source/xamarin-android-swipe-tabs-viewpager-fragments-images-actionbartabs/
http://www.c-sharpcorner.com/article/creating-sliding-tab-layout-interface-using-xamarin-android-using-visual-studio/
The code is in xamarin so it would be an easy implementation for you!
Goodluck!
UPDATE:
The code for your activities Axml file :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/MyTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
/>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Code for your Activities cs file:
public class GoogleMapsActivity : AppCompatActivity
{
private Fragment MapsFragment;
private Fragment ListFragment;
private TabLayout allTabs;
FragmentManager fm;
FragmentTransaction ft;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.your_activity);
bindAllWidgets();
setupTabLayout();
setUpToolbar();
}
void setUpToolbar()
{
#region "Tool bar"
var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
toolbar.SetTitleTextColor(ResourcesCompat.GetColor(Resources, Resource.Color.colorRedText, null));
Drawable upArrow = ResourcesCompat.GetDrawable(Resources, Resource.Drawable.abc_ic_ab_back_mtrl_am_alpha, null);
upArrow.SetColorFilter(Color.ParseColor(Resources.GetString(Resource.Color.colorRedText)), PorterDuff.Mode.SrcAtop);
SetSupportActionBar(toolbar);
SupportActionBar.Title = Resources.GetString(Resource.String.toolbar_title_dhl_service_points);
SupportActionBar.SetHomeButtonEnabled(true);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetHomeAsUpIndicator(upArrow);
#endregion
}
private void setupTabLayout()
{
allTabs.AddTab(allTabs.NewTab().SetText(Resources.GetString(Resource.String.google_maps_page_title_map)), true);
allTabs.AddTab(allTabs.NewTab().SetText(Resources.GetString(Resource.String.google_maps_page_title_list)));
}
private void bindAllWidgets()
{
allTabs = FindViewById<TabLayout>(Resource.Id.tabs);
allTabs.TabSelected += AllTabs_TabSelected;
}
private void AllTabs_TabSelected(object sender, TabSelectedEventArgs e)
{
var tab = e.Tab;
setCurrentTabFragment(tab.Position);
}
public void replaceFragment(Fragment fragment)
{
fm = FragmentManager;
ft = fm.BeginTransaction();
if (fragment == MapsFragment)
{
if (MapsFragment == null)
{
MapsFragment = new PoSLocationMapView(this);
ft.Add(Resource.Id.frame_container, MapsFragment, "MapsFragment");
}
else
{
ft.Detach(FragmentManager.FindFragmentByTag("ListFragment"));
ft.Attach(MapsFragment);
}
}
else if (fragment == ListFragment)
{
if (ListFragment == null)
{
ListFragment = new ServicePointDHLList(this);
ft.Add(Resource.Id.frame_container, ListFragment, "ListFragment");
}
else
{
ft.Detach(FragmentManager.FindFragmentByTag("MapsFragment"));
ft.Attach(ListFragment);
}
}
ft.SetTransition(FragmentTransit.FragmentOpen);
ft.Commit();
}
private void setCurrentTabFragment(int tabPosition)
{
switch (tabPosition)
{
case 0:
replaceFragment(MapsFragment);
break;
case 1:
replaceFragment(ListFragment);
break;
}
}
}

Answer 2

Try this library it is more clearly.
https://github.com/ahoefling/TabStrip/blob/master/README.md