CODEWITHSUNDEEP
tabsxamarin.android
aman
aman

Reputation: 77

customizing Tab text color, stacked color, and swipe functionality in Xamarin Android?

I have three tabs in xamarin android, I have used tab Host to create those tabs. Now, I want to change the text color in those tabs, and I want to use the swipe effect just like the Tabbed Page in Xamarin Forms. How can I achieve this? Please do tell me the library also ,if required?

Upvotes: 0

Views: 1127

Answers (1)

York Shen
York Shen

Reputation: 9084

I want to change the text color in those tabs, and I want to use the swipe effect just like the Tabbed Page in Xamarin Forms

You could use TabLayout, Usage like this :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

   <android.support.design.widget.TabLayout
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:id="@+id/tablayout"
       app:tabTextColor="@color/colorPrimary"
       app:tabSelectedTextColor="@color/colorAccent"
       app:tabIndicatorColor="@android:color/holo_orange_light">

      <android.support.design.widget.TabItem
          android:text="tab 1"/>
      <android.support.design.widget.TabItem
          android:text="tab 2"/>
      <android.support.design.widget.TabItem
          android:text="tab 3"/>

   </android.support.design.widget.TabLayout>

 </LinearLayout>

Attribute to change the text color :

 app:tabTextColor         -->   The default text color to be applied to tabs.
 app:tabSelectedTextColor -->   The text color to be applied to the currently selected tab. 
 app:tabIndicatorColor    -->   Color of the indicator used to show the currently selected tab.

Effect like this.

use the swipe effect just like the Tabbed Page in Xamarin Forms

In Xamarin.Forms, tabs is associated with Page, actually when it render in native Android, it was associated with ViewPager. So if you want implement the swipe effect feature, you have to write the code by yourself. For more details, you could read the document.

EDIT :

To use TabLayout, you have to add Xamarin.Android.Support.v4 and Xamarin.Android.Support.Design nuget package.

EDIT 2 ；

Here is a simple demo about implement the swipe effect :

public class MainActivity : AppCompatActivity
{
    private List<Android.Support.V4.App.Fragment> mFragments = new List<Android.Support.V4.App.Fragment>();
    private List<string> mTabTitles = new List<string>();
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        SetContentView(Resource.Layout.Main);
        TabLayout tabLayout = FindViewById<TabLayout>(Resource.Id.tablayout);
        ViewPager viewPager = FindViewById<ViewPager>(Resource.Id.view_pager);

        initTab();
        mFragments.Add(new Fragment1());
        mFragments.Add(new Fragment1());
        mFragments.Add(new Fragment1());
        mFragments.Add(new Fragment1());

        viewPager.Adapter = new ViewPagerAdapter(SupportFragmentManager, mFragments,mTabTitles);
        tabLayout.SetupWithViewPager(viewPager);
    }

    private void initTab()
    {
        for (int i = 1; i < 5; i++)
        {
            mTabTitles.Add("Tab" + i);
        }
    }
}

public class ViewPagerAdapter : FragmentPagerAdapter
{
    private List<string> mTabTitles;
    private static  int FRAGMENT_COUNT = 4;

    public ViewPagerAdapter(Android.Support.V4.App.FragmentManager fragmentManager, List<Android.Support.V4.App.Fragment> fragments, List<string> tabTitles):base(fragmentManager)
    {
        mTabTitles = tabTitles;
    }

    public override Android.Support.V4.App.Fragment GetItem(int position)
    {
        Fragment1 testFragment = new Fragment1();
        return testFragment;
    }

    public override int Count => FRAGMENT_COUNT;

    public override ICharSequence GetPageTitleFormatted(int position)
    {
        return new Java.Lang.String(mTabTitles[position]);
    }
}

axml file :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <android.support.design.widget.TabLayout
      android:layout_height="wrap_content"
      android:layout_width="match_parent"
      android:id="@+id/tablayout"
    >
  </android.support.design.widget.TabLayout>
   <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
   </android.support.v4.view.ViewPager>

</LinearLayout>

Effect.

EDIT 3 :

In my demo, Fragment should use Android.Support.V4.App.Fragment, code like this :

public class Fragment1 : Android.Support.V4.App.Fragment
{
    public override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        // Create your fragment here
    }

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        // Use this to return your custom view for this Fragment
        return inflater.Inflate(Resource.Layout.YourFragment, container, false);

        return base.OnCreateView(inflater, container, savedInstanceState);
    }
}

Upvotes: 1

Related Questions